How to implement custom pie chart (Echarts) component in vue2.0

Now I will share with you a method of customizing the pie chart (Echarts) component in vue2.0. It has a good reference value and I hope it will be helpful to everyone.

1. Custom chart component

Echarts.vue

<!-- 自定义 echart 组件 -->
<template>
 <p>
 <!-- echart表格 -->
 <p id="myChart" :style="echartStyle"></p>
 </p>
</template>
 
<script>
 export default {
 props: {
  // 样式
  echartStyle: {
  type: Object,
  default(){
   return {}
  }
  },
  // 标题文本
  titleText: {
  type: String,
  default: &#39;&#39;
  },
  // 提示框键名
  tooltipFormatter: {
  type: String,
  default: &#39;&#39;
  },
  // 扇形区域名称
  opinion: {
  type: Array,
  default(){
   return []
  }
  },
  // 提示框标题
  seriesName: {
  type: String,
  default: &#39;&#39;
  },
  // 扇形区域数据
  opinionData: {
  type: Array,
  default(){
   return []
  }
  },
 },
 data(){
  return {
  //
  }
 },
 mounted(){
  this.$nextTick(function() {
  this.drawPie(&#39;myChart&#39;)
  })
 },
 methods: {
  // 监听扇形图点击
  eConsole(param) {
  // 向父组件传值
  this.$emit("currentEchartData",param.name);
  },
  // 绘制饼状图
  drawPie(id){
  this.charts = this.$echarts.init(document.getElementById(id));
  this.charts.on("click", this.eConsole);
  this.charts.setOption({
   title: {
   text: this.titleText, // 标题文本
   left: &#39;center&#39;
   },
   tooltip : {
   trigger: &#39;item&#39;,
   formatter: "{a} <br/> " + this.tooltipFormatter + ":{c}"
   },
   legend: {
   bottom: 20,
   left: &#39;center&#39;,
   data: this.opinion // 扇形区域名称
   },
   series : [
   {
    name:this.seriesName, // 提示框标题
    type: &#39;pie&#39;,
    radius : &#39;65%&#39;,
    center: [&#39;50%&#39;, &#39;50%&#39;],
    selectedMode: &#39;single&#39;,
    data:this.opinionData, // 扇形区域数据
    itemStyle: {
    emphasis: {
     shadowBlur: 10,
     shadowOffsetX: 0,
     shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
    }
    }
   }
   ]
  })
  }
 }
 }
</script>
 
<style lang="less" scoped>
 #myChart{
 width: 100%;
 }
</style>

2. Page call

Diagram.vue

<!-- 图表 -->
<template>
 <p>
 <!-- 标题栏 -->
 <mt-header title="图表">
  <router-link to="/" slot="left">
  <mt-button icon="back">返回</mt-button>
  </router-link>
 </mt-header>
 <!-- 内容 -->
 <m-echarts
  :echartStyle="s"
  :titleText="a"
  :tooltipFormatter="b"
  :opinion="c"
  :seriesName="d"
  :opinionData="e"
  v-on:currentEchartData="getEchartData"
 ></m-echarts>
 </p>
</template>
 
<script>
 import mEcharts from &#39;../components/Echarts&#39;
 
 export default {
 name: &#39;Diagram&#39;,
 components: {
  mEcharts
 },
 data(){
  return {
  a:&#39;水果销售统计&#39;,
  b:&#39;销售数量&#39;,
  c:[&#39;香蕉&#39;,&#39;苹果&#39;,&#39;橘子&#39;],
  d:&#39;销售统计&#39;,
  e:[
   {value:3, name:&#39;香蕉&#39;},
   {value:3, name:&#39;苹果&#39;},
   {value:3, name:&#39;橘子&#39;}
   ],
  s: {
   height: &#39;&#39;
  }
  }
 },
 created(){
  // 获取屏幕高度
  this.s.height = document.documentElement.clientHeight - 44 + &#39;px&#39;;
 },
 methods: {
  getEchartData(val){
  console.log(val);
  }
 }
 }
</script>
 
<style lang="less" scoped>
 //
</style>

3. Renderings

The above is what I compiled for you. I hope you will see more in the future Helpful to everyone.

Related articles:

Found problems with custom instructions in Vue.directive

Detailed explanation of JavaScript image processing and synthesis technology (detailed tutorial)

How to implement the back force refresh function on the WeChat web side (detailed tutorial)

The above is the detailed content of How to implement custom pie chart (Echarts) component in vue2.0. For more information, please follow other related articles on the PHP Chinese website!