vue中echarts全局引入和按需引入两种方式

npm 安装 ECharts

npm install echarts --save

1、全局引用，在main.js中添加

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

2、按需引入

// main.js中引入 ECharts 主模块
let echarts = require('echarts/lib/echarts');

// 引入折线图/柱状图等组件,折线图是line,饼图改为pie,柱形图改为bar
require('echarts/lib/chart/line')   
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')

// 引入提示框和title组件，图例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')

//注意修改初始化为下
let myChart = echarts.init(document.getElementById('myChart'))

3、使用

<div id="myChart" :style="{width: '100%', height: '165px'}"></div>  //创建挂载对象  



 mounted(){
    this.drawLine();
 },
 methods:{
    drawLine(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      myChart.setOption({
          title: {
          text: '热量比及摄入',
          top: 8,
          left:11,
          textStyle: {
            color: '#000',
            fontSize:12
          }
      },
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: { 
          left: 'center',
          top: 'bottom',
          textStyle: {
            color: '#000',
            fontSize:12
          },
          itemWidth:8,
          itemHeight:8,
          itemGap:28,
          data: ['晚餐', '午餐', '早餐']
      },
      series: [
          {
              name: '热量比及摄入',
              type: 'pie',
              radius: '55%', 
              center: ['50%', '50%'],
              data: this.data.sort(function (a, b) { return a.value - b.value; }),
              roseType: 'radius',
              labelLine: {
                  smooth: 0.2,
                  length: 10,
                  length2: 20
              },
              itemStyle: {
                  shadowBlur: 200,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                  normal:{
                    color:function(params) {
                      //自定义颜色
                      var colorList = [ '#8B83FF', '#437DF6', '#00CA9D'];
                      return colorList[params.dataIndex]
                    },
                    label:{
                       show: true,
                       formatter: '{b}({d}%)'
                     },
                     labelLine :{show:true}
                   }
              },
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                  return Math.random() * 200;
              }
          }
      ]
      })