Echarts简单封装

1.引入Echarts (Vue项目)并注册组件

import vueEcharts from "vue-echarts";
import echarts from "echarts";

export default {
  name: "demo",
  components: { vueEcharts },
  data(){
  	return {
  		//...
  	}
  },
  //...
}

2.页面嵌入

<vue-echarts
ref="my_chart1"
:options="chart1"
:auto-resize="true"
theme="light"
></vue-echarts>

<vue-echarts
ref="my_chart2"
:options="chart2"
:auto-resize="true"
theme="light"
></vue-echarts>

3.options配置

export default {
	data(){
 		return {
			chart1: this.initChart(
	        "bar",
	        "各类别在线率、离线率对比",
	        ['A', 'B', 'C', 'D'],
	        [
	          {
	            name: "在线率",
	            colors: ['#F5CD2E', '#FB951C'],
	            data: [43.3, 83.1, 86.4, 72.4]
	          },
	          {
	            name: "离线率",
	            colors: ['#00F09E', '#00B074'],
	            data: [85.8, 73.4, 65.2, 53.9]
	          }
	        ]
	      ),
      chart2: this.initChart(
        "line",
        "7天内在线率、离线率对比",
        ['07/04', '07/05', '07/06', '07/07', '07/08', '07/09', '07/10'],
        [
          {
            name: "在线率",
            colors: ["#FB951C", "#F5CD2E"],
            data: [820, 1032, 901, 834, 1290, 1330, 332]
          },
          {
            name: "离线率",
            colors: ["#009AEE", "#00DAEE"],
            data: [1200, 890, 1770, 834, 990, 1030, 1332]
          },
        ],
        ['#FB951C', '#009AEE']
      )
		};
 	}
}

4.配置函数封装：

methods: {
	initChart(type, title, xItems=[], yItems=[], colors){
      let result =  {
        //标题
        title: {
          text: title,
          textStyle: {
            fontSize: "14",
            color: "#000",
            fontWeight: "400"
          },
          padding: [5,0,0,20]
        },
        //图例
        legend: {
          left: "right",
          padding: [5,20,0,0]
        },
        //提示框
        tooltip: type==="bar" ? {
          lineStyle: {
            type: 'solid',
            color: '#D2D2D2'
          }
        } : {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        //x轴
        xAxis: {
          type: 'category',
          data: xItems
        },
        //y轴
        yAxis: {
          type: 'value'
        },
        //数据项配置
        series: yItems.map(item => {

          let seriesItem = {
            name: item.name,
            type: type,
            data: item.data||[]
          };

          type==="bar" && (seriesItem.itemStyle = {
            color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,
              [
                {offset: 0, color: item.colors[0]},
                {offset: 1, color: item.colors[1]}
              ]
            )
          });
          type==="line" && (seriesItem.areaStyle = {
            opacity: 0.2,
            color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,
              [
                {offset: 0, color: item.colors[0]},
                {offset: 1, color: item.colors[1]}
              ]
            )
          }) && (seriesItem.smooth = true);

          return seriesItem;
        })
      };

      colors && (result.color = colors);

      result.setTitle = function(title){
        this.title.text = title;
      };
      result.setXData = function(data=[]){
        this.xAxis.data = data;
      };
      result.setYData = function(data=[]){
        for(let i=0; i<data.length; i++){
          this.series[i].data = data[i]||[];
        }
      };

      return result;
    }
}

5.数据渲染：

  this.chart2.setTitle("xxx"); //修改标题
  //修改x轴每个项目的名称
  this.chart2.setXData(['a','b','c','d','e','f','g']); 
  //设置y轴的数据，参数为二维数组
  this.chart2.setYData([
       [1200, 890, 1770, 834, 990, 1030, 1332],
       [820, 1032, 901, 834, 1290, 1330, 332]
  ]);