标签：10 12 name color align fontSize 设置 整理 echarts

1.图例展示两列

legend可以写成数组，里面有两个对象，data: legendData.slice(0, 4)分割

        legend: [{
            type: "scroll",  //可滚动
            orient: 'vertical',
            icon: 'rect',
            left: '0%',
            align: 'left',
            top: '65%',
            itemWidth: 10,
            itemHeight: 10,
            formatter: function (name) {
                return `{a|${name}：}{percent|${objData[name].value}%}`
            },
            textStyle: {
                rich: {
                    a: {
                        fontSize: 12,
                        color: '#8fbfef',
                    },
                    percent: {
                        color: '#82baff',
                        fontSize: 12,
                        align: 'right',
                        // padding: [0, 0, 0, 20]
                    }
                }
            },

            data: legendData.slice(0, 4)
        }, {
            type: "scroll",
            orient: 'vertical',
            icon: 'rect',
            left: '50%',
            align: 'left',
            top: '65%',
            itemWidth: 10,
            itemHeight: 10,
            formatter: function (name) {
                return `{a|${name}：}{percent|${objData[name].value}%}`
            },
            textStyle: {
                rich: {
                    a: {
                        fontSize: 12,
                        color: '#8fbfef',
                    },
                    percent: {
                        color: '#82baff',
                        fontSize: 12,
                        align: 'right',
                        // padding: [0, 0, 0, 20]
                    }
                }
            },
            data: legendData.slice(4, 8)
        },],

2.地图隐藏南海

修改属性 “geo.regions”

        geo: {
            map: 'china',
            zoom: 1, //当前视角的缩放比例
            roam: true, //是否开启平游或缩放
            scaleLimit: { //滚轮缩放的极限控制
                min: 1,
                max: 3
            },
            // 这里是重点！！！
            regions: [
                {
                    name: "南海诸岛",
                    itemStyle: {
                        // 隐藏地图
                        normal: {
                            opacity: 0, // 为 0 时不绘制该图形
                        }
                    },
                    label: {
                        show: false // 隐藏文字
                    }
                }
            ],

            show: true,
            label: {
                emphasis: {
                    show: false
                }
            },
            layoutSize: "100%",
            itemStyle: {
                normal: {
                    borderColor: 'rgba(147, 235, 248, 1)',
                    borderWidth: 1,
                    areaColor: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                },
                emphasis: {
                    areaColor: '#389BB7',
                    borderWidth: 0
                }
            }
        },

标签：10,12,name,color,align,fontSize,设置,整理,echarts
来源： https://blog.csdn.net/liuy_1314/article/details/112647163

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。