vue中使用echarts

vue中使用echarts

1. 社区地址
2. 安装

npm install echarts -S

3. 按需引入

import * as echarts from  'echarts/lib/echarts'

import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/grid'
import 'echarts/lib/chart/bar'
import  'echarts/lib/chart/line'
import  'echarts/lib/component/toolbox'
import  'echarts/lib/component/dataZoom'

Vue.prototype.$echarts = echarts

4. 初始化

 this.echartsData.myChart = this.$echarts.init(this.$refs.versionedBox3Echarts);//echarts对象初始化

 this.echartsData.option = {
       tooltip: {//设置提示工具
         trigger: 'item',
         backgroundColor: 'rgba(55,55,55,0.8)',
         formatter: (params) => {
           var color = params.color;
           var htmlStr = '<div style="color:#fff;">';
           htmlStr += params.name+ '<br/>';//x轴的名称
           htmlStr += `<span style="background-color:${color};display: inline-block;width: 10px;height: 10px;border-radius: 50%;margin-right:10px"></span>`;
           htmlStr += '用户' + '：' + params.value;
           htmlStr += '</div>';
           return htmlStr;
         }
       },
       grid: {
         bottom: 90//距离底部距离
       },
       dataZoom: [{//设置可缩放视图
         type: 'inside'
       }, {
         type: 'slider',
         height:18//设置滚动条高度
       }],
       xAxis: {
         data: this.echartsData.data.categoryData,//x轴刻度线数据
         silent: false,
         splitLine: {
           show: false//不显示
         },
         splitArea: {
           show: false
         }
       },
       yAxis: {
         splitArea: {
           show: false
         }
       },
       series: [{
         barWidth:this.echartsData.barWidth,//柱形图宽度
         type: this.echartsData.seriesType,//类型
         data: this.echartsData.data.valueData,//值
         large: true
       }]
     }
     this.echartsData.myChart.clear()//清除缓存
     this.echartsData.myChart.setOption(this.echartsData.option);