echarts图表应用

echarts图表在vue中的应用
话不多说，直接上步骤：
1、vue引入echarts
安装依赖包：

npm install echarts --save

2、应用pie饼图
html代码块

<template>
   <div id="myChart" :style="{width:'100%',height:'240px'}"></div>
</template>

js代码块

getWorkflow() {
        getAction(this.url.workflow).then((res) => {
          if (res.success) {
            this.serviceWork = res.result;
            let serviceWorkPie = [];
            for (let i = 0; i < this.serviceWork.length; i++) {
              var obj = new Object();
              obj.value = this.serviceWork[i].num;
              obj.name = this.serviceWork[i].project_name;
              serviceWorkPie[i] = obj;
            }
            this.drawLinechart(serviceWorkPie)
          } else {
            this.$message.warning(res.message);
          }
        }).finally(() => {})
      },

注：getAction是自行封装过得请求方法

echarts代码块

drawLinechart(serviceWorkPie) {
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        myChart.setOption({
          title: {
            text: '各项目工作量分布图'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            bottom: 'bottom',
            // data: label
          },
          series: [{
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            data: serviceWorkPie,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        })
      },

好了，到此结束，具体的还是得多动手操作，用多了自然就会了，其他图表的用法差不多也是这样的，都是一个套路