vue项目中引入echarts

1、安装echarts依赖

npm install echarts --save
或者
cnpm install echarts --save

2、引入echarts（注明：可在main.js文件中全局引入，也可在所需的组件中局部引入，如user.vue组件中局部引入）

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

3、在需要使用echarts的组件中使用

<div id="myChart1" :style="{width: ‘300px‘, height: ‘300px‘}"></div>

//饼状图构建
this.initPieChart('myChart1’,10,90);
initPieChart(idName,rest,used){
  let myChart = echarts.init(document.getElementById(idName));
  myChart.setOption({
    title : {
      text: '',
      subtext: '',
      x:'center'
    },
    tooltip : {
      trigger: 'item',
      formatter: '({d}%) {a} <br/>{b} : {c}TB ',
    },
    legend: {
      orient: '',
      left: '',
      data: [],
      show:false
    },
    color:['#78C085','#75ABDE'],
    series : [
      {
        name: '',
        type: 'pie',
        radius : '63%',
        center: ['50%', '50%'],
        data:[
          {value:rest, name:'剩余'},
          {value:used, name:'已用'}
        ],
        labelLine: {    //指示线状态
          normal:{
            length:8//长度
          }
        },
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
          normal:{//饼图图形上的文本标签
            labelLine : {
              show : true   //显示标示线
            }
          }
        }
      }
    ]
  });
}

注明：如果您只需要引入柱状图，可以按需引入，那么只需要将上述的第2步改为：

1、引入基本模板
let echarts = require('echarts/lib/echarts')
 
2、引入折线图组件
require('echarts/lib/chart/line')

3、引入提示框和title组件，图例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/legendScroll')//图例翻译滚动
4、vue扩展echarts插件
Vue.prototype.$echarts = echarts

小提示：require不用完整路径，import需要完整路径