求教如何用echart做出如图所示的图表

Question

要求做成这样的目前已经做到这样了，导入的是json格式的文件
，json里面那个catego'ries没有用到，但其他的都导入进来了，目前代码如下

echartmix: function(opts){
                 var option= {
                      title: {
                    text: '最近一年用户新增趋势'

                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    type: scroll,
                    data:['月环比增长率','用户月新增量']
                },
                toolbox: {
                    show: false,
                    feature: {
                        magicType: {show: true, type: ['stack', 'tiled']},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: {
                    type: 'category',
                    splitLine: {
                        show: false
                    },
                    data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
                },
                yAxis: [{
                         type: 'value',
                         name: '用户量',
                         axisTick: {
                            show: false
                         }
                           },
                           {
                            type: 'value',
                            name: '月环比增长率',

                            axisLabel: {
                                formatter: '{value} %'
                            },
                            axisTick: {
                            show: false
                            }
                            }
                        ],
                series: [{
                    name: '月环比增长率',
                    type: '',
                    data: [],
                    itemStyle: {
                        normal: {
                            color: '#66b7ef'
                        }
                    }
                },
                {
                    name: '用户月新增量',
                    type: '',
                    data: [],
                    itemStyle: {
                        normal: {
                            lineStyle: {
                            color: '#66b7ef'
                          }
                        }
                    }
                }]
               };
                $.each(opts.columnSeries, function(index, item){
                    item.type = 'bar';
                    option.series.push(item)
                });
                $.each(opts.splineSeries, function(index, item){
                    item.type = 'line';
                    item.smooth = true;

                    option.series.push(item)
                });
                return option;
            }

主要难点一是第二个y轴，刻度要从-100%到200%，关键是高度要和那个柱状的月环比增长率对应，就是json里的columnseries，二是整个图表最外侧的那个边框如何删掉，三是上面那个蓝色和橙色的legend，我点蓝色的有反应，legend变灰后下面的柱状消失，但是红色那个点了只是单纯他自己变灰，图表本身没任何变化，是不是我上面legend写的有问题，我真的是被难住了，跪求大佬帮助

Answer 1

问题 1， 月环比增长率 和 用户月新增量 两个数据的量纲不一样，放到同一个坐标轴里面肯定别扭，解决办法是，创建两个y轴，设置 yAxisIndex让两个series映射到不同的y轴上;
问题2，边框是坐标轴在 grid 区域中的分隔，有个选项 splitLine 可以指定
问题3，检查legend.data 里的name 和 series 的 name是否一致？'用户月新增量' or '住户月新增量'?

---

option = {
    title: {
        text: '最近一年用户新增趋势'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        type: 'scroll',
        data: ['月环比增长率', '用户月新增量']
    },
    toolbox: {
        show: false,
        feature: {
            magicType: {
                show: true,
                type: ['stack', 'tiled']
            },
            saveAsImage: {
                show: true
            }
        }
    },
    xAxis: {
        type: 'category',
        splitLine: {
            show: false
        },
        axisLine:{
            onZero:true,
            onZeroAxisIndex:1
        },
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    },
    yAxis: [{
            type: 'value',
            name: '用户量',
            axisTick: {
                show: false
            },
            position:'left',
            offset:70,
            splitLine:{
                show:false
            },
            axisLine:{
                show:false,
            },
            axisLabel:{
                formatter:function (value, index) {
                    if(value == -100){
                        return 0;
                    }
                    if (value > 0 && (value-300) % 200 === 0){
                        return value;
                    }else{
                        return ''
                    }
                }
            },
            min:-900,
            max:1500,
            interval:100,
        },
        {
            type: 'value',
            name: '月环比增长率',
            axisLabel: {
                formatter: '{value} %'
            },
            axisTick: {
                show: false
            },
            position:'left',
            splitLine:{
                show:false
            },
            min:-100,
            max:200,
            interval:25
        }
    ],
    series: [{
            name: '月环比增长率',
            type: 'bar',
            data: [175,-30,-28,100,-75,150,-25,-5,75,10,-50,25],
            itemStyle: {
                normal: {
                    color: '#66b7ef'
                }
            },
            yAxisIndex:1
        },
        {
            name: '用户月新增量',
            type: 'line',
            smooth:true,
            data: [400,1000,700,500,900,300,600,500,400,800,1000,500],
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: '#66b7ef'
                    }
                }
            },
            yAxisIndex:0
        }
    ]
};