Echarts 抽象类封装以及使用

  • A+
所属分类:Jquery JS

开发中,经常需要要实现一些统计的功能,实现折线图、柱状图、双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轴折线图、饼状图 的 类, 其余可自行扩展。

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

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: