echarts chart

define([
    'jquery',
    'echarts'
], function($, echarts) {

    var chartModel = {

        Chartarr: []

        // XY axis reversed chart default configuration items 
        chartReverseOpt: {
            tooltip : {
                trigger: 'axis',
                confine: true,
                Axis pointer: {
                    type : 'shadow'
                }
            },
            legend: {
                bottom: 0,
                left: 'center',
                data: []
            },
            grid: {
                top: '3%',
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLine: { // horizontal axis styles 
                    Show: false ,
                    lineStyle: {
                        Color: '#acbccf' // border color 
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: { // horizontal axis text styles 
                        fontSize: 12 ,
                        color: '#666'
                    }
                },
                splitLine: {
                    the lineStyle: { // vertical line style 
                        Color: '# a4adb8' // horizontal color 
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: [],
                axisLine: { // longitudinal axis of styles 
                    Show: to true ,
                    lineStyle: {
                        Color: '#bfbfbf' // bottom border color 
                    }
                },
                axisLabel: {
                    textStyle: { // longitudinal axis of the text style 
                        fontSize: 12 ,
                        color: '#666'
                    }
                },
                splitLine: {
                    show: false,
                    the lineStyle: { // horizontal line style 
                        type: 'Solid' ,
                        Color: '# a4adb8' // horizontal color 
                    }
                }
            },
            series: []
        },

        // XY axis normal chart default configuration items 
        chartNormalOpt: {
            tooltip : {
                trigger: 'axis',
                confine: true,
                Axis pointer: {
                    type: 'Shadow', // Cross identified by a broken line y-axis value for the 
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                bottom: 0,
                left: 'center',
                data: []
            },
            grid: {
                top: '3%',
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: [],
                Axis pointer: {
                    type: 'shadow'
                },
                axisLine: { // horizontal axis styles 
                    Show: to true ,
                    lineStyle: {
                        // type: 'dotted', 
                        Color: '#acbccf' // border color 
                    }
                },
                axisLabel: {
                    rotate: 0,
                    interval: 0,
                    textStyle: { // horizontal axis text styles 
                        fontSize: 12 ,
                        color: '#666'
                    }
                },
                splitLine: {
                    the lineStyle: { // vertical line style 
                        Color: '# a4adb8' // horizontal color 
                    }
                }
            },
            yAxis: [{
                type: 'value',
                axisLine: { // longitudinal axis of styles 
                    Show: to true ,
                    lineStyle: {
                        Color: '#bfbfbf' // bottom border color 
                    }
                },
                axisLabel: {
                    textStyle: { // longitudinal axis of the text style 
                        fontSize: 12 ,
                        color: '#666'
                    }
                },
                splitLine: {
                    show: false,
                    the lineStyle: { // horizontal line style 
                        Color: '# a4adb8' // horizontal color 
                    }
                }
            }],
            series: []
        },

        // right vertical axis disposed 
        yAxisRight: {
            type: 'value',
            position: 'right',
            axisLine: { // longitudinal axis of styles 
                Show: to true ,
                lineStyle: {
                    Color: '#bfbfbf' // bottom border color 
                }
            },
            axisLabel: {
                formatter: '{value}%',
                textStyle: { // longitudinal axis of the text style 
                    fontSize: 12 ,
                    color: '#666'
                }
            },
            splitLine: {
                show: false
            }
        },

        /**
         * Initializes the chart xy axis reversed
         * @param  {[type]} params [description]
         * @return [description]
         */
        initChartReverse: function (id, keyMap, data, opt) {
            var chart = echarts.init(document.getElementById(id)),
                option = JSON.parse(JSON.stringify(chartModel.chartReverseOpt));
            if ($('#' + id).find('canvas').length == 0) {
                chartModel.chartArr.push(chart);
            }
            option.legend.data = chartModel.getLegendData(keyMap);
            option.yAxis.data = chartModel.getAxisData(data, opt.keyAxis);
            option.series = chartModel.getSeries(data, keyMap);
            chart.setOption(option);
            chart.resize();
        },

        /**
         * Initializes the chart normal chart
         * @param  {[type]} params [description]
         * @return [description]
         */
        initChartNormal: function (id, keyMap, data, opt) {
            var chart = echarts.init(document.getElementById(id)),
                option = JSON.parse(JSON.stringify(chartModel.chartNormalOpt));
            if ($('#' + id).find('canvas').length == 0) {
                chartModel.chartArr.push(chart);
            }
            IF (opt.showRightYaxis) {
                 // add the right Y-axis 
                option.yAxis.push (chartModel.yAxisRight);
            }
            option.xAxis.axisLabel.rotate = opt.rotate ? opt.rotate : 0;
            option.legend.data = chartModel.getLegendData(keyMap);
            option.xAxis.data = chartModel.getAxisData(data, opt.keyAxis);
            option.series = chartModel.getSeries(data, keyMap);
            chart.setOption(option);
            chart.resize();
        },

        /**
         * Get the chart legend
         * @param  {[type]} params [description]
         * @return [description]
         */
        getLegendData: function (keyMap) {
            var legendData = keyMap.map(function (item) {
                return item.name;
            });
            return legendData;
        },

        /**
         * Get the name of the axis scale
         * @param  {[type]} params [description]
         * @return [description]
         */
        getAxisData: function (data, keyAxis) {
            var axisData = data.map(function (item) {
                return item[keyAxis];
            });
            return axisData;
        },

        /**
         * Get chart data
         * @param  {[type]} params [description]
         * @return [description]
         */
        getSeries: function (data, keyMap) {
            var seriesData = [];
            for (var i = 0; i < keyMap.length; i++) {
                var obj = {
                    name: keyMap[i].name,
                    type: KEYMAP [I] .Type, // chart type 
                    stack: keyMap [i] .stack 'total':? to false , // show stacked 
                    Data: [] // chart data 
                };
                 IF (KEYMAP [I]. yAxisIndex) {
                     // piece of data using the right y-axis coordinate of the scale display 
                    obj.yAxisIndex = KEYMAP [I] .yAxisIndex;
                }
                IF (KEYMAP [I] .showLabel) {
                     // display value above the value of the stack 
                    obj.label = {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    };
                }
                var key = keyMap[i].key;
                for (var j = 0; j < data.length; j++) {
                    obj.data.push(data[j][key]);
                }
                seriesData.push(obj);
            }
            return seriesData;
        }
    };

    // the window is resized to redraw the graph 
    window.onresize = function () {
         for ( var I = 0; I <chartModel.chartArr.length; I ++ ) {
            chartModel.chartArr[i].resize();
        }
    };

    return chartModel;
});

 

use

Rendering a reversed graph xy axis

was Keymaps = [{
                    name: 'accumulated' ,
                    key: 'ljwc',
                    type: 'bar',
                    Stack: to true , // whether to superimpose 
                    showLabel: to true  // whether to display the corresponding position value 
                }, {
                    name: 'Prediction completed' ,
                    key: 'ycwc',
                    type: 'bar',
                    stack: true,
                    show label: true 
                } ];
                was data = [{
                    yname: 'gross income' ,
                    ljwc: 320 ,
                    ycwc: 120
                }, {
                    yname: 'payment' ,
                    ljwc: 302 ,
                    ycwc: 132
                }];
                var opt = {
                    keyAxis: 'yname' // coordinate axis corresponding to the scale name 
                };
                chartModel.initChartReverse('chart1', keyMap, data, opt);

Xy axis normal rendering chart data

was keyMap2 = [{
                    name: 'target' ,
                    key: 'mb',
                    type: 'bar'
                }{
                    name: 'Prediction completion rate' ,
                    key: 'ycwcl',
                    type: 'line',
                    yAxisIndex: . 1 // piece of data using the right y-axis coordinate of the scale display 
                }];
                 var DATA2 = [{
                    XName: 'CHINA' , 
                    ycwcl: 80 ,
                    mb: 220
                }, {
                    XName: 'Guizhou Yu' , 
                    ycwcl: 182 ,
                    mb: 182
                }];
                was opt2 = {
                    keyAxis: 'XName', // coordinate axis corresponding to the scale name 
                    showRightYaxis: to true , // display the right longitudinal 
                    rotate: 30
                };
                chartModel.initChartNormal('chart2', keyMap2, data2, opt2);

 

Renderings