vue使用echarts

安装echarts模块

npm install echarts -S
或者使用淘宝镜像安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

引入echarts

在main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

 draw() {
     // 绘制图表。
      let Myechart = this.$echarts.init(this.$refs.pie);
      Myechart.setOption({
        title: {
          text: this.dis + "各产业链规上工业企业个数",
          x: "center",
          y: "bottom",
          top: "0%",
          // itemGap设置主副标题纵向间隔，单位px，默认为10
          itemGap: 30,
          textStyle:{
            color:'#fff',
            fontSize:16
          }
        },
        tooltip: {
            trigger: 'item',
            formatter:"{a} <br/>{b} : {c}"+ "个" + "({d}%)",
            position: function(point, params, dom, rect, size){ // point: 鼠标位置
                var tipHeight = point[1] + size.contentSize[1]; // contentSize: 提示dom 窗口大小
                if(tipHeight > size.viewSize[1] ){              // viewSize: echarts 容器大小
                    return [point[0]+40, point[1]-size.contentSize[1]];
                } else if(point[1] < size.contentSize[1]){
                    return [point[0]+40, point[1]+20];
                } else {
                    return point;
                }
            },
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        color:this.color,
        series: {
          name: this.dis + "各产业链规上工业企业个数",
          type: "pie",
          minAngle: 5,
          top:20,
        //   bottom:0,
        //   avoidLabelOverlap: true,
          data: this.pieData,
        //   radius: "60%",
           radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
        }
      });
    },

可能遇到的报错

"export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’
出现这个问题应该是echarts的版本比较新，我自己试了一下4.9版本的就没问题了

解决办法：
npm uninstall echarts
npm install echarts@4.9.0

本文地址：https://blog.csdn.net/qq_42430948/article/details/112507397