2019年31省份的GDP(亿元)echarts category配置项内容和展示

配置项如下
      var province = ['广东', '江苏', '山东', '浙江', '河南', '四川', '湖北', '福建', '湖南', '上海', '安徽', '北京', '河北', '陕西', '辽宁', '江西', '重庆', '云南', '广西', '内蒙古', '山西', '贵州', '天津', '黑龙江', '新疆', '吉林', '甘肃', '海南', '宁夏', '青海', '西藏'];
var data = [107671.07, 99631.52, 71067.5, 62352, 54259.2,46615.82 , 45828.31, 42395, 39752.12, 38155.32, 37114, 35371.3, 35104.5, 25793.17, 24909.5, 24757.5, 23605.77, 23223.75, 21237.14, 17212.5,17026.68, 16769.34, 14104.28, 13612.7, 13597.11, 11726.8, 8718.3, 5308.94, 3748.48, 2965.95, 1697.82]
var res = [];
for (var j = 0; j < data.length; j++) {
    res.push({
        name: province[j],
        value: data[j]
    });
}
res.sort(function(a, b) {
    return a.value - b.value;
});
var res1 = [];
var res2 = [];
for (var t = 0; t < 10; t++) {
    res1[t] = res[res.length - 1 - t].name;
    res2[t] = res[res.length - 1 - t].value;
}

var option = {
    tooltip: {
        show: true,
        formatter: function(params) {
            return params.name + ':' + params.value
        },
    },
    visualMap: {
        type: 'piecewise',
        text: ['高', '低'],
        pieces: [{
                min: 100000,
                color: '#CC3333'
            },
            {
                min: 40000,
                max: 99999,
                color: '#ff9999'
            },
            {
                min: 20000,
                max: 40000,
                color: '#FFFF99'
            },
            {
                min: 10000,
                max: 20000,
                color: '#CCCCFF'
            },
            {
                min: 5000,
                max: 10000,
                color: '#CCFFFF'
            },
            {
                min: 1697.83,
                max: 5000,
                color: '#FFCCFF'
            },
            {
                value: 1697.82,
                color: 'white'
            }
        ],
        orient: 'vertical',
        itemSymbol: 'circle',
        itemWidth: 20,
        itemHeight: 20,
        showLabel: true,
        seriesIndex: [0],
        textStyle: {
            color: '#7B93A7'
        },
        bottom: '10%',
        left: "5%",
    },
    grid: {
        right: '20%',
        top: '50%',
        bottom: '10%',
        width: '10%'
    },
    xAxis: {
        min: 1600,
        max: 110000,
        show: false
    },
    yAxis: {
        inverse: true,
        offset: '2',
        'type': 'category',
        data: res1,
        nameTextStyle: {
            color: '#fff'
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            textStyle: {
                fontSize: 14,
                color: '#000000',
            },
            interval: 0
        },
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        },
    },
    geo: {
        map: 'china',
        right: '35%',
        left: '15%',
        label: {
            emphasis: {
                show: false,
            }
        },
        itemStyle: {
            emphasis: {
                areaColor: '#99FF99'
            }
        }
    },
    series: [{
            name: 'mapSer',
            type: 'map',
            map: 'china',
            roam: false,
            geoIndex: 0,
            label: {
                show: false,
            },
            data: res
        },
        {
            'name': 'barSer',
            'type': 'bar',
            zlevel: 2,
            barWidth: '40%',
            label: {
                normal: {
                    show: true,
                    fontSize: 14,
                    position: 'right',
                    formatter: '{c}'
                }
            },
            data: res2,
            itemStyle: {
                normal: {
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [{
                                colorStops: [{
                                    offset: 0,
                                    color: '#9999FF' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#3333FF' // 100% 处的颜色
                                }]
                            },
                            {
                                colorStops: [{
                                    offset: 0,
                                    color: '#CCCCFF' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#9999FF' // 100% 处的颜色
                                }]
                            }
                        ];
                        if (params.dataIndex < 3) {
                            return colorList[0]
                        } else {
                            return colorList[1]
                        }
                    },
                }
            }
        }
    ]
};

    
截图如下