echarts图表

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

    var chartModel = {

        chartArr: [],

        // x y轴颠倒图表默认配置项
        chartReverseOpt: {
            tooltip : {
                trigger: 'axis',
                confine: true,
                axisPointer : {
                    type : 'shadow'
                }
            },
            legend: {
                bottom: 0,
                left: 'center',
                data: []
            },
            grid: {
                top: '3%',
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            xAxis:  {
                type: 'value',
                axisLine: { // 横轴样式
                    show: false,
                    lineStyle: {
                        color: '#acbccf' //边框颜色
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: { // 横轴文本样式
                        fontSize: 12,
                        color: '#666'
                    }
                },
                splitLine: {
                    lineStyle: { // 竖直方向线条样式
                        color: '#a4adb8' //横线颜色
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: [],
                axisLine: { // 纵轴样式
                    show: true,
                    lineStyle: {
                        color: '#bfbfbf' //底部边框颜色
                    }
                },
                axisLabel: {
                    textStyle: { // 纵轴文本样式
                        fontSize: 12,
                        color: '#666'
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: { // 水平方向线条样式
                        type: 'solid',
                        color: '#a4adb8' //横线颜色
                    }
                }
            },
            series: []
        },

        // x y轴正常图表默认配置项
        chartNormalOpt: {
            tooltip : {
                trigger: 'axis',
                confine: true,
                axisPointer : {
                    type: 'shadow', // cross 通过虚线标识出y轴对于的值
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                bottom: 0,
                left: 'center',
                data: []
            },
            grid: {
                top: '3%',
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            xAxis:  {
                type: 'category',
                data: [],
                axisPointer: {
                    type: 'shadow'
                },
                axisLine: { // 横轴样式
                    show: true,
                    lineStyle: {
                        // type:'dotted',
                        color: '#acbccf' //边框颜色
                    }
                },
                axisLabel: {
                    rotate: 0,
                    interval: 0,
                    textStyle: { // 横轴文本样式
                        fontSize: 12,
                        color: '#666'
                    }
                },
                splitLine: {
                    lineStyle: { // 竖直方向线条样式
                        color: '#a4adb8' //横线颜色
                    }
                }
            },
            yAxis: [{
                type: 'value',
                axisLine: { // 纵轴样式
                    show: true,
                    lineStyle: {
                        color: '#bfbfbf' //底部边框颜色
                    }
                },
                axisLabel: {
                    textStyle: { // 纵轴文本样式
                        fontSize: 12,
                        color: '#666'
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: { // 水平方向线条样式
                        color: '#a4adb8' //横线颜色
                    }
                }
            }],
            series: []
        },

        // 右侧纵轴配置
        yAxisRight: {
            type: 'value',
            position: 'right',
            axisLine: { // 纵轴样式
                show: true,
                lineStyle: {
                    color: '#bfbfbf' //底部边框颜色
                }
            },
            axisLabel: {
                formatter: '{value}%',
                textStyle: { // 纵轴文本样式
                    fontSize: 12,
                    color: '#666'
                }
            },
            splitLine: {
                show: false
            }
        },

        /**
         * 初始化图表x y轴颠倒
         * @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();
        },

        /**
         * 初始化图表 正常图表
         * @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) {
                // 添加右侧Y轴
                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();
        },

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

        /**
         * 获取坐标轴刻度名称
         * @param  {[type]} params [description]
         * @return [description]
         */
        getAxisData: function (data, keyAxis) {
            var axisData = data.map(function (item) {
                return item[keyAxis];
            });
            return axisData;
        },

        /**
         * 获取图表数据
         * @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, // 图表类型
                    stack: keyMap[i].stack ? true : false, // 显示堆叠
                    data: [] // 图表数据
                };
                if (keyMap[i].yAxisIndex) {
                    // 该条数据使用右侧y轴坐标刻度展示
                    obj.yAxisIndex = keyMap[i].yAxisIndex;
                }
                if (keyMap[i].showLabel) {
                    // 显示堆叠上面的value值
                    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;
        }
    };

    // 窗口大小改变 重绘图表
    window.onresize = function () {
        for (var i = 0; i < chartModel.chartArr.length; i++) {
            chartModel.chartArr[i].resize();
        }
    };

    return chartModel;
});

使用

渲染x y轴颠倒的图表

var keyMap = [{
                    name: '累计完成',
                    key: 'ljwc',
                    type: 'bar',
                    stack: true, // 是否叠加
                    showLabel: true // 是否在对应位置显示value
                }, {
                    name: '预测完成',
                    key: 'ycwc',
                    type: 'bar',
                    stack: true,
                    showLabel: true
                }];
                var data = [{
                    yname: '收入毛利',
                    ljwc: 320,
                    ycwc: 120
                }, {
                    yname: '回款',
                    ljwc: 302,
                    ycwc: 132
                }];
                var opt = {
                    keyAxis: 'yname' // 坐标轴对应刻度名称
                };
                chartModel.initChartReverse('chart1', keyMap, data, opt);

渲染正常x y轴图表数据

var keyMap2 = [{
                    name: '目标',
                    key: 'mb',
                    type: 'bar'
                }{
                    name: '预测完成率',
                    key: 'ycwcl',
                    type: 'line',
                    yAxisIndex: 1 // 该条数据使用右侧y轴坐标刻度展示
                }];
                var data2 = [{
                    xname: '华南',
                    ycwcl: 80,
                    mb: 220
                }, {
                    xname: '云贵渝',
                    ycwcl: 182,
                    mb: 182
                }];
                var opt2 = {
                    keyAxis: 'xname', // 坐标轴对应刻度名称
                    showRightYaxis: true, // 显示右侧纵轴
                    rotate: 30
                };
                chartModel.initChartNormal('chart2', keyMap2, data2, opt2);

效果图