- A+
开发中，经常需要要实现一些统计的功能，实现折线图、柱状图、双Y轴柱状图、双Y轴折线图、饼状图等，今天我们来封装一下百度Echarts的图标类。
Echarts的官方文档：https://echarts.apache.org/zh/index.html
一、创建 my_echrts 类
(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: 额外的参数，如： 样式，颜色等等，可以参考官方文档
(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 初始方法：
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:
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:
var _this = this;
$.each(data, function (index, value) {
var item = {
name: value.name,
type: 'line',
data: value.item
};
_this.series.push(item);
})
定义初始化X轴的数据的方法setXAxis:
setXAxis: function(xAxis = {}){
var _this = this;
this.xAxis = $.extend(true, {
type: 'category',
data: this.xAxisData,
show: true,
splitLine: {show: false},
}, xAxis);
},
定义初始化Y轴的数据的方法setYAxis:
setYAxis: function(yAxis = {}){
this.yAxis = $.extend(true, {
type: 'value',
show: true,
}, yAxis);
},
三、为my_echarts.js 注册全局对象
window.my_echarts = my_echarts;
四、调用实例
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轴折线图、饼状图 的 类， 其余可自行扩展。
