欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

echarts legend图例分页

程序员文章站 2022-03-20 18:04:11
...

效果:

echarts legend图例分页

方法:

echarts的legend里设置type: 'scroll',且一定要有data字段,且data与series里的data一一对应

代码:

this.myChart.setOption({
            color: ['#404C7E', '#4C4FC9', '#8D58E1', '#F05B72', '#FBCE38', '#1A8CFF', '#00B377'],
            legend: {
              type: 'scroll',
              itemGap: 20,
              // itemHeight: 15,
              padding: 0,
              x: 0,
              y: 'center',
              // bottom: -20,
              orient: 'vertical',
              data: this.ClassifyData
            },
            series: [
              {
                ...
                data: this.ClassifyData
              }
            ]

})

参考:

https://blog.csdn.net/yl640007010/article/details/79731604

https://blog.csdn.net/xxtnt/article/details/96114386

https://blog.csdn.net/qq_33769914/article/details/106720480

相关标签: 前端 echarts