[項目實戰] 關於Echarts的二次封裝

前言

最近在作報表類的項目，圖表熱門的框架有Echarts和Highcharts，二者的共同點是都是基於瀏覽器渲染技術的純JS框架，且API文檔全面，看着文檔都能寫出一個差很少的餅狀圖或者柱狀圖，但在最終作項目前，仍是要看看二者的區別，來選擇一個做爲項目的主要框架。

二者區別

Echarts已經兼容了大部分的瀏覽器，且是國人開發，免費，首選。

Echarts

• echarts是百度公司前端開發的一個圖表庫,
• 支持柱狀圖、餅狀圖、k線圖、map圖、熱導向圖、折線圖
• 主要採用canvas畫圖，正式由於基於canvas繪圖對於動態的增刪節點是須要從新繪圖加載數據，並且沒法動態改變圖表的尺寸，只能是縮放
• 商用免費
• 中文文檔，學習成本低
• 兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等）

Highcharts

• highcharts是國外的一家公司開發的圖表庫，主要採用svg畫圖，對於動態的增刪節點數據很是靈活，不須要從新繪圖
• 英文文檔，學習成本高
• 商用收費

對Echarts的二次封裝

封裝是結合本身的項目來更好的運用，對全部頁面通用，以下，局部待完善。

項目效果圖

項目功能

• 圖表自適應
• 柱形圖增長移上去cross指針效果
• 自定義配置

所用語言

Jq + Ko.js + Echarts.js + bootstrap

項目地址

github.com/lirongrong/…

重要代碼以下:能夠直接看項目地址，有的UI配置二次更新過，下面爲首次代碼，有不對的地方請大神指正！

var ChartViewModel = function(){
    var that = this;
    //初始化頁面
    that.init = function(){
        //加載餅圖
        that.loadRound();
        //加載柱形
        that.loadColumn();
    },
    that.loadRound = function(){
        var data = [
            {
                value:10,
                name:'01',
                color:'#4285f4'
            },
            {
                value:20,
                name:'02',
                color:'#e94335'
            },
            {
                value:5,
                name:'03',
                color:'#fbbc05'
            }
        ];
        $('#chart_01').initRoundChart({
            title: "",
            legendData: $.initChartRoundData(data).legendData,
            seriesData: $.initChartRoundData(data).seriesData
        }); 
    },
    that.loadColumn = function(){
        var data = [
            {
                name:'01',
                type:'bar',
                color:'#4285f4',
                data:[12,22,33]
            },
            {
                name:'02',
                type:'line',
                color:'#e94335',
                data:[12,22,40]
            }
        ];
        $('#chart_02').initColumnChart({
            title: "",
            legendData: $.initChartColumnData(data).legendData,
            seriesData: $.initChartColumnData(data).seriesData
        }); 
    }
}
var vm = new ChartViewModel();
ko.applyBindings(vm);
vm.init();
複製代碼

//擴展dom方法
$.fn.extend({
    //圓餅圖表方法
    initRoundChart: function (options) {
        var defaults = {
            title: '',
            number: '',
            legendData: [],
            seriesData: []
        };
        var opts = $.extend(defaults, options);
        if (!$(this)[0]) {
            return false;
        }
        // 基於準備好的dom，初始化echarts實例   
        var myChart = echarts.init($(this)[0]);

        // 指定圖表的配置項和數據
        var option = {
            //標題
            title: {
                //text: opts.title + '：' + opts.number,
                // subtext: '純屬虛構',//副標題
                x: 'center',
                textStyle: {
                    color: "#333",
                    fontSize: 16,
                    fontWeight: 'normal'
                },
                bottom: '90'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} ({d}%)",//{a} <br/>{b} : {c} ({d}%) 
            },
            //圖例
            legend: {
                orient: 'horizontal',
                left: 'center',
                data: opts.legendData,
                textStyle: {
                    fontSize: 12,
                    color: '#666'
                },
                itemWidth: 15,
                itemHeight: 12,
                top: '240'
            },
            series: [
                {
                    name: opts.title,
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '35%'],
                    data: opts.seriesData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option); 
    },
    //柱形圖表
    initColumnChart: function (options) {
        var defaults = {
            title: '',
            subText: '',
            xAxisData: [],
            rotate: 0,
            seriesData: [],
            legendData: []//圖例
        };
        var opts = $.extend(defaults, options);
        if (!$(this)[0]) {
            return false;
        }

        // 基於準備好的dom，初始化echarts實例
        var myChart = echarts.init($(this)[0]);

        // 指定圖表的配置項和數據
        var option = {
            title: {
                text: opts.title,
                subtext: opts.subText,//副標題
                //x: 'center',
                textStyle: {
                    color: "#333",
                    fontSize: 16,
                    fontWeight: 'normal'
                }
            },
            color: ['#ff6633'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 座標軸指示器，座標軸觸發有效
                    type: 'cross',        // 默認爲直線，可選爲：'line' | 'shadow' | 'cross'//橫縱指示
                    color: '#f5f5f5'
                }
            },
            //canvas的位置
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                splitLine: {
                    show: false
                },
                borderWidth: 0,
                borderColor: '#f5f5f5',
                axisLabel: {
                    interval: 0,//橫軸信息所有顯示
                    rotate: opts.rotate
                },
                data: opts.xAxisData
            },
            yAxis: [
                {
                    type: 'value'
                }
            ],
            legend: {
                data: opts.legendData
            },
            series: opts.seriesData
        };

        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    }

});

//擴展$元素方法
$.extend({
    //遍歷月份
    monthData: function () {
        var data = [];
        for (var i = 1; i <= 12; i++) {
            data.push(i + '月');
        }
        return data;
    },
    //封裝圓餅圖輸出data的方法
    initChartRoundData: function (arr) {
        if (!arr)
            return false;
        var legendData = [];
        var seriesData = [];
        for (var i = 0; i < arr.length; i++) {
            legendData.push(arr[i].name);
            seriesData.push({
                value: arr[i].value,
                name: arr[i].name,
                itemStyle: {
                    color: arr[i].color
                }
            });
        };
        return {
            legendData,
            seriesData
        };
    },
    //封裝柱形圖輸出data的方法
    initChartColumnData: function (arr) {
        if (!arr)
            return false;
        var defaults = {
            name: '',
            type: 'line',
            stack: '',
            data: [],
            barWidth: 30,//默認柱子寬度30px
            color: ''
        };
        var legendData = [];
        var seriesData = [];
        var ops = [];
        for (var i = 0; i < arr.length; i++) {
            ops = $.extend(defaults, arr[i]);
            legendData.push(ops.name);
            seriesData.push({
                name: ops.name,
                type: ops.type,
                stack: ops.stack,
                data: ops.data,
                barWidth: ops.barWidth,
                itemStyle: {
                    color: ops.color
                }
            });
        }
        return {
            legendData,
            seriesData
        };
    },
    //遍歷13年至今的年份
    initYearData: function () {
        var date = new Date;
        var nowYear = date.getFullYear();
        var yearList = [];
        for (var i = 2013; i < nowYear + 1; i++) {
            yearList.push(i);
        }
        return yearList;
    },
    //圖表自適應
    initChartResize: function (id) {
        var chart = echarts.init($('#' + id + '')[0]);
        $(window).resize(function () {
            chart.resize();
        });
    },

})

$(function () {
    //圖表自適應,凡有chartSize命名的圖表都自適應
    var dom = $('.chartSize'); 
    for (var i = 0; i < dom.length; i++) { 
        $.initChartResize(dom[i].id);
    }
});

複製代碼