VUE项目中引入echarts组件

1、安装echarts依赖

npm install echarts -S

2、全局引入main.js

import * as echarts from "echarts"
Vue.prototype.$echarts = echarts

3、页面加载

 <div id="main" class="main_container"></div>

mounted() {
    this.initCharts()
  },
  initCharts() {
      // 初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"))
      // 绘制图表
      myChart.setOption({
        // title: {
        //   text: "标题",
        // },
        tooltip: {
         trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['地质事件', '构造演化', '块体拼合', '能源预测']
        },
        series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '12',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: true
            },
            data: [
                { value: 404, name: '地质事件'},
                { value: 735, name: '构造演化'},
                { value: 580, name: '块体拼合'},
                { value: 484, name: '能源预测'},
            ]
          }
      ]
    })
    },

.main_container {
  width: 100%;
  height: 175px;
  /* overflow: hidden; */
}
#main{
    margin-top: 35px;
    width: 400px;
    height: 212px;
}