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
                }
            }
        },