- 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轴折线图、饼状图 的 类, 其余可自行扩展。