百度ECharts 3.0 多坐标轴统计图一般配置详解（实例）

本文链接：https://blog.csdn.net/JathamJ/article/details/52729210

ECharts 是百度出品的jquery图表插件。相对于Chartist，拥有更加强大的功能，以及更加详细的文档（ECharts的文档形式非常优秀，简明易懂）。ECharts支持的图表种类非常多，同时兼容性也十分优良，故而在网站建设动态统计图表时，是一个非常优秀的选择。

配置

首先，配置echart首先需要在前台模板建立一个div容器，同时必须给容器指定一个宽度或高度，因而在响应式页面中发挥并不出色。

<div id="chart"></div>

然后便可开始正式的配置：

function createChartz(obj){     //以函数来说明，向函数中传入创建图表所需数据
        var myChart = echarts.init(document.getElementById('chart')); //获取容器
        window.onresize = myChart.resize;    //主要用于网页响应，可省略
        myChart.setOption({

            tooltip: {             //提示框
                trigger: 'axis'    //触发类型
            },
            legend: {        //图例
                left: 40,    //图例位置
                bottom:0,
                data: ['销售金额（元）', '使用金额（元）','购买总数（张）','使用总数（张）']     //数据
            },
            xAxis: {
                data: obj.labelvalue,   //横轴数据，本例为动态传入本月天数
                splitLine:{
                        show:true,     //网格线
                        lineStyle:{
                            color: ['#eee', '#eee']
                        }
                    }
            },
            grid: {
                show:true,
                left:40,
                right:40,
                top:10,
                bottom:60

            },
             yAxis : [  //纵轴，多个轴写入数组[]中
                    {
                        type : 'value',
                        position: 'left',
                        splitNumber: 5,
                        boundaryGap: [0,0.1],
                        axisTick : {    // 轴标记
                            show:true,
                            length: 10,
                            lineStyle: {
                                color: 'green',
                                type: 'solid',
                                width: 2
                            },

                        },
                        splitLine:{
                            show:true,
                            lineStyle:{
                                color: ['#eee', '#eee']
                                }
                            }

                    },
                {
                    type : 'value',
                    splitNumber: 5,
                    position: 'right',
                    splitLine:{
                        show:false,
                    }

                }
            ],
            series: [{
                name: '销售金额（元）',
                type: 'bar',   //bar为柱状图，其他type还有line,pie等等
                data: obj.data1,   //为横轴对应数组
                yAxisIndex: 0     //数据对应轴,从0开始
            },{
                name: '使用金额（元）',
                type: 'bar',
                data: obj.data2,
                yAxisIndex: 0
            },{
                name: '购买总数（张）',
                type: 'bar',
                yAxisIndex: 1,
                data: obj.data3
            },{
                name: '使用总数（张）',
                type: 'bar',
                yAxisIndex: 1,
                data: obj.data4
            },

            ],
            color:['rgb(26, 179, 148)','rgb(28, 132, 198)','rgb(178, 247, 142)','rgb(237, 173, 173)']  //自定义颜色

        });