VChart 组件基本使用

1.引入,安装

import VChart from 'vue-echarts'

export default {
  components: {
    VChart
  },

全局引入,在main.js中操作

import Vue from 'vue'
import { VChart } from 'vue-echarts'

Vue.component('VueEcharts', VChart)

2.直接在页面使用组件

style="width: 100%; height: 250px" 是给整个盒子一个宽高 , :option="middleRightOption" 是这个图表的数据 , 直接定义middleRightOption即可 , ref="middleRightMain" 给这个图表的标识 . 

 3.定义option , 配置项与echarts基本一致

 getMiddleRightCharts() {
    this.$refs.middleRightMain.chart.on('click', () => {
        this.openLagDetail()  //后续操作
      })
    var xdata = [
        { value: 25, name: '已滞后', color: '#f59a23' },
        { value: 75, name: '已完成', color: '#70b603' }
      ]
      this.middleRightOption = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '35%',
          left: '10%',
          orient: 'vertical', //图例列表的布局朝向。
          itemGap: 50 //图例间距
        },
        series: [
          {
            type: 'pie',
            // 饼图颜色设置
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ['#f59a23', '#70b603']
                  return colorList[colors.dataIndex]
                }
              }
            },
            radius: ['40%', '70%'],
            center: ['60%', '50%'],
            labelLine: {
              show: false
            },
            label: {
              formatter: `{c}个`, //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
              textStyle: {
                align: 'center',
                fontWeight: 'bolder'
              }
            },
            data: xdata
          }
        ]
      }
}

this.$refs.middleRightMain.chart.on('click', () => {

        this.openLagDetail()    //后续操作

      })

这里用this.$refs获取dom元素, 再进行后面的点击事件操作.