Echarts 抽象类封装以及使用

开发中，经常需要要实现一些统计的功能，实现折线图、柱状图、双Y轴柱状图、双Y轴折线图、饼状图等，今天我们来封装一下百度Echarts的图标类。

Echarts的官方文档：https://echarts.apache.org/zh/index.html

一、创建 my_echrts 类

1 2 3 4 5 6 7

(function () {           var my_charts = function (element, type, xAxisData, data, legend = [], options = {}) {       };    }());

二、定义 my_echrts 类基础属性

element:  echarts图表绑定的页面元素

type:  图表的类型，可自定义，如  line: 折线图 bar:柱状图 pie:饼状图  dodubleYLine: 双Y轴折线图  doubleYBar: 双Y轴柱状图

xAxisData: X轴的数据

data: 图表的数据

legend: 图例的数据

option: 额外的参数，如： 样式，颜色等等，可以参考官方文档

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

(function () {           var my_charts = function (element, type, xAxisData, data, legend = [], options = {}) {         this.instance = null;         this.element = element;         this.legend = [];         this.series = [];         this.tooltip = {             trigger: 'axis',             formatter: ''         }         this.xAxisData = xAxisData;         if(legend.length > 0){             this.legend = legend;         }         this.data = data;         this.type = type;         this.xAxis = {};         this.yAxis = {};         this.extraOption = options;    };    }());

三、定义 my_echarts 类 初始化方法

接下类，为 my_echarts 类定义 init 初始方法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

init: function () {     this.initSeriesData();     var element = this.element;     this.instance =  echarts.init(document.getElementById(element));     var option = {         tooltip: {             trigger: this.tooltip.trigger,             formatter: this.tooltip.formatter         },         toolbox: {             x: '90%',             feature: {                 saveAsImage: {}             }         },         grid: {             left: '4%',             right: '4%',             bottom: '8%',             containLabel: true         },         legend: {             data: this.legend,             top: 'bottom',             icon: 'circle'         },         xAxis: this.xAxis,         yAxis: this.yAxis,         series: this.series,         color: ['#58afff', '#fbd437'],     };     this.instance.setOption($.extend(true, option, this.extraOption) );     return this; },

定义初始图标数据的方法 initSeriesData:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

initSeriesData: function(){     switch (this.type) {         case 'line':             this.setLineSeries(this.data);             this.setXAxis({});             this.setYAxis();             break;         case 'bar':             this.setBarSeries(this.data);             this.setXAxis({}, this.xLimitNum);             this.setYAxis();             break;         case 'pie':             this.setPieSeries(this.data);             this.setPieToolTip();             this.setXAxis({show: false});             this.setYAxis({show: false});             break;         case 'doubleYBar':             this.setDoubleBarSeries(this.data);             this.setDoubleYAxis();             this.setXAxis({});             break;         case 'doubleYLine':             this.setDoubleLineSeries(this.data);             this.setDoubleYAxis();             this.setXAxis({});             break;         default : this.setLineSeries(this.data);break;     } },

定义初始图标数据的方法 setLineSeries:

1 2 3 4 5 6 7 8 9 10

var _this = this; $.each(data, function (index, value) {       var item = {         name: value.name,         type: 'line',         data: value.item     };     _this.series.push(item); })

定义初始化X轴的数据的方法setXAxis:

1 2 3 4 5 6 7 8 9

setXAxis: function(xAxis = {}){     var _this = this;     this.xAxis = $.extend(true, {             type: 'category',             data: this.xAxisData,             show: true,             splitLine: {show: false},         }, xAxis); },

定义初始化Y轴的数据的方法setYAxis:

1 2 3 4 5 6

setYAxis: function(yAxis = {}){     this.yAxis = $.extend(true, {         type: 'value',         show: true,     }, yAxis); },

三、为my_echarts.js 注册全局对象

1	window.my_echarts = my_echarts;

四、调用实例

1 2 3 4

var line = new lzECharts('echarts-line-chart', 'line', days , data);  line.init();  //days: ["2020-04-23","2020-04-24","2020-04-25","2020-04-26"]  //data: [{name: "总消费", item: [0,0,0,"0.11"]}]

提供一个实现了折线图、柱状图、双Y轴柱状图、双Y轴折线图、饼状图 的 类， 其余可自行扩展。

下载地址：https://xjwblog.com/wp-content/uploads/xjw_echarts.js

转载地址：https://xjwblog.com/?p=687