Echarts legend控制分页功能

最新推荐文章于 2024-09-27 16:12:53 发布

二十五岁的我

最新推荐文章于 2024-09-27 16:12:53 发布

阅读量1.2k

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/weixin_44133711/article/details/109208629

版权

php 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

在这里插入图片描述

 	var classEcharts = echarts.init(document.getElementById('transcation_echarts'));
 
            var selected = {};
            var merchant_transaction_ranking_top5Key ={$merchant_transaction_ranking_top5Key};//echarts的key值
            for(let i=0;i<merchant_transaction_ranking_top5Key.length;i++){
            if(i<6){
                selected[merchant_transaction_ranking_top5Key[i]] = true;
            }else{
                 selected[merchant_transaction_ranking_top5Key[i]] = false;
             }
            }
                    var classpeOption ={
                    title: {
                    text: 'Top5 商户交易排行',
                    left: 'center',
                    bottom: 30,
                    textStyle: {
                        color: '#333',
                        fontSize:'16',
                        fontWeight:'400',
                    }
                    },
                    tooltip: {
                        trigger: 'item',
                        position: ['50%', '50%'],
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                        color:['#21c835','#c51d1d','#5ec2f0','#e49a36','#86BF8F'],
                        legend: {//控制分页的功能
                            width:'100%',
                            type: 'scroll',
                            orient: 'vertical',
                            left:0,
                            top:20,
                            bottom:10,
                            data:merchant_transaction_ranking_top5Key,
                            selected:selected,
                            icon:'circle',
                            itemWidth:10,

                            formatter: function (name) {
                                return echarts.format.truncateText(name, 50, '12px Microsoft Yahei', '…');
                            },
                            tooltip: {
                                show: false
                            }
                    },
                    series: [
                    {
                    name: '所属占比',
                    type: 'pie',
                    radius: ['25%', '35%'],
                    center:['50%','60%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,

                    },
                    emphasis: {
                    label: {
                        show: true,
                        fontSize: '5',
                        fontWeight: 'bold'
                    }
                    },
                    labelLine: {
                        show: true,
                        length:0
                    },
                    data: {$merchant_transaction_ranking_top5Value}
                    }
                    ]
                    };
                    classEcharts.setOption(classpeOption);