qq_34471916
锋芒神话霜
采纳率11.6%
2019-08-01 14:45

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

10

要求做成这样的图片说明目前已经做到这样了图片说明,导入的是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写的有问题,我真的是被难住了,跪求大佬帮助

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • bealing xSeeker~ 2年前

    问题 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
            }
        ]
    };
    

    图片说明

    点赞 3 评论 复制链接分享

相关推荐