vue使用echarts

一、安装echarts

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

二、引入依赖

let echarts = require('echarts')
Vue.prototype.$echarts = echarts

这里需要注意引入echarts的时候如果用“import echarts from ‘echarts’”会报以下错误：
[Vue warn]: Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init’)”
改用“let echarts = require(‘echarts’)“引入就行了

三、 方法

export default {
  name: 'index',
  data () {
    return {
    }
  },
  mounted(){
    this.myChart()
  },
  methods: {
    myChart(){
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      var datas = {
        value: 95,
        company: "%",
        ringColor: [{
          offset: 0,
          color: '#06d3f8' // 0% 处的颜色
        }, {
          offset: 1,
          color: '#c1f632' // 100% 处的颜色
        }]
      }
      myChart.setOption({
          title: {
            text: datas.value + datas.company,
            x: 'center',
            y: 'center',
            textStyle: {
              fontWeight: 'normal',
              color: '#2bfaff',
              fontSize: '.50rem'
            }
          },
          color: ['#008def'],
          legend: {
            show: false,
            data: []
          },

          series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['70%', '80%'],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: datas.value,
              name: '',
              itemStyle: {
                normal: {
                  color: { // 完成的圆环的颜色
                    colorStops: datas.ringColor
                  },
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                }
              }
            }, {
              name: '',
              value: 100 - datas.value
            }]
          }]
      });
    }
  },
}