vue Echarts之饼图的详解_vue中使用echarts给饼图动态赋值

最近项目中用到了Echarts,下面就来说下具体是怎么用的吧

一、安装Echarts   

npm install echarts --save

二、在main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

三、接下来要详细的介绍饼图的使用啦   

1. 在具体组件中进行引用（就像通过import引入其他组件类似）

   const echarts = require('echarts/lib/echarts')
   // 引入饼状图组件
   require('echarts/lib/chart/pie')
   require('echarts/lib/component/tooltip')
   

2. 要给图留个坑的呀

   <div id="pie1" class="pie">
     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
     <div id="main1" style="float:left;width:100%;height: 450px" />
   </div>
   

    

3. 在methods中定义方法

   initData() {
      // 基于准备好的dom，初始化echarts实例
     const myChart = echarts.init(document.getElementById('main1'))
       myChart.setOption({
       tooltip: {
         trigger: 'item',
         formatter: '{a} <br/>{b} : {c} ({d}%)' // 具体a b c d 代表的属性看下面注释啦
       },
       series: [
         {
           name: '访问来源', // formatter 中的a
           type: 'pie',
           radius: '50%',
           center: ['50%', '60%'],
           data: [
             { value: 1, name: '你的呀', itemStyle: { color: '#D8ECFF' }, label: { color: '#666666' }, labelLine: { lineStyle: { color: '#666666' }}},
             { value: 1, name: '我的呀', itemStyle: { color: '#F5A623' }},
             { value: 1, name: '他的呀', itemStyle: { color: '#339DFF' }}
           ], // data 中的name为formatter中的 b；data中的value呢就是formatter中c；至于d就是Echarts计算出来的百分比啦；itemStyle:为饼图每个扇形的颜色；label为指示线后面的文字的样式，labelLine为指示线的颜色 
           label: {
             normal: {
               show: true,
               textStyle: {
                 fontWeight: 400,
                 fontSize: 12 // 文字的字体大小
               },
               formatter: '{b} \n {c}人' // 这里为指示线后面的提示信息，这里的换行要用\n 与上面tooltips中的formatter换行不同滴
             }
           },
           itemStyle: {
             emphasis: {
               shadowBlur: 10,
               shadowOffsetX: 0,
               shadowColor: 'rgba(0, 0, 0, 0.5)'
             }
           }
         }
       ]
     })
     window.onresize = myChart.resize  //自适应浏览器窗口的大小
   }
   

    

4. 在mounted中调用initData方法

   this.initData()
   

   这样就大功告成啦  

   拿到接口的数据之后就可以给initData方法中data里面value赋值啦，注意赋值不能直接用this.data去赋值 此this非彼this 所以需要在方法里面定义一个变量const that = this这样就可以赋值啦 value:that.data；.....另外....,调用后台接口也要在mounted中进行

给大家看一下效果图