地域分布省份销售数据排行榜 for auxreproecharts top配置项内容和展示

地域分布省份销售数据排行榜 可用于axure 设计

      var citydata = [{
        name: "北京",
        value: 974
    },
    {
        name: "天津",
        value: 532
    },
    {
        name: "上海",
        value: 834
    },
    {
        name: "重庆",
        value: 683
    },
    {
        name: "河北",
        value: 283
    },
    {
        name: "河南",
        value: 345
    },
    {
        name: "云南",
        value: 72
    },
    {
        name: "辽宁",
        value: 194
    },
    {
        name: "黑龙江",
        value: 342
    },
    {
        name: "湖南",
        value: 389
    },
    {
        name: "安徽",
        value: 267
    },
    {
        name: "山东",
        value: 675
    },
    {
        name: "新疆",
        value: 14
    },
    {
        name: "江苏",
        value: 974
    },
    {
        name: "浙江",
        value: 978
    },
    {
        name: "江西",
        value: 528
    },
    {
        name: "湖北",
        value: 144
    },
    {
        name: "广西",
        value: 448
    },
    {
        name: "甘肃",
        value: 197
    },
    {
        name: "山西",
        value: 203
    },
    {
        name: "内蒙古",
        value: 73
    },
    {
        name: "陕西",
        value: 563
    },
    {
        name: "吉林",
        value: 147
    },
    {
        name: "福建",
        value: 112
    },
    {
        name: "贵州",
        value: 373
    },
    {
        name: "广东",
        value: 2747
    },
    {
        name: "青海",
        value: 38
    },
    {
        name: "西藏",
        value: 12
    },
    {
        name: "四川",
        value: 215
    },
    {
        name: "宁夏",
        value: 172
    },
    {
        name: "海南",
        value: 77
    },
    {
        name: "台湾",
        value: 123
    },
    {
        name: "香港",
        value: 32
    },
    {
        name: "澳门",
        value: 43
    },
    {
        name: "南海诸岛",
        value: 53
    }
];

var yMax = 1000;
var dataShadow = [];

var resultdata0 = [];
var titledata = [];
var bartop10 = [];


function NumDescSort(a, b) {
    return b.value - a.value;
}

function NumAsceSort(a, b) {
    return a.value - b.value;
}

// 先进行一次降序排序，找出最大的前十个
citydata.sort(NumDescSort);

for (var i = 0; i < 20; i++) {
    var top10 = {
        name: citydata[i].name,
        value: citydata[i].value
    };
    bartop10.push(top10);
    dataShadow.push(yMax);
}

bartop10.sort(NumAsceSort);
for (var i = 0; i < bartop10.length; i++) {
    titledata.push(bartop10[i].name);
}

// console.log(citydata);
// console.log(bartop10);
// console.log(titledata);

var option = {
    title: [{
            show: false,
            text: '地域分布',
        },
        {
            show: true,
            text: '省份/直辖市TOP20',
            right: '20',
            textStyle: {
                color: '#666666',
                fontSize: 12
            }
        }
    ],
    tooltip: {
        trigger: "item"
    },
    legend: {
        show: false
    },
    grid: {
        // 仅仅控制条形图的位置
        show: true,
        containLabel: false,
        right: 40,
        top: 50,
        bottom: 30,
        width: '20%'
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 1000,
        text: ['多', '少'],
        seriesIndex: [0, 2],
        dimension: 0,
        realtime: false,
        left: 0,
        itemWidth: 18,
        itemHeight: 100,
        calculable: true,
        inRange: {
            color: ['rgba(159,205,253,0.50)', '#60ACFC'],
            symbolSize: [100, 100]
        },
        outOfRange: {
            color: ['#eeeeee'],
            symbolSize: [100, 100]
        },
    },
    toolbox: {
        show: false
    },

    xAxis: [{
        type: "value",
        position: 'top',
        inside: false,
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false
        },
        margin: 10
    }],
    yAxis: [{
        type: "category",
        boundaryGap: true,
        axisLine: {
            show: false
        },
        axisLabel: {
            align: "right",
            margin: 10,
            showMaxLabel: true,
        },
        data: titledata
    }],

    series: [{
            name: "占比",
            type: "map",
            mapType: "china",
            left: '100',
            width: '60%',
            roam: 'move',
            mapValueCalculation: "sum",
            zoom: 1,
            selectedMode: false,
            showLegendSymbol: false,
            label: {
                normal: {
                    textStyle: {
                        color: '#666'
                    }
                },
                emphasis: {
                    textStyle: {
                        color: '#234EA5'
                    }
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#EEEEEE',
                    borderColor: '#FFFFFF'
                },
                emphasis: {
                    areaColor: '#E5F39B'
                }
            },
            data: citydata
        },
        {
            name: "背景",
            type: "bar",
            roam: false,
            visualMap: false,
            itemStyle: {
                color: "#eeeeee",
                opacity: 0.5
            },
            label: {
                show: false
            },
            emphasis: {
                itemStyle: {
                    color: "#eeeeee",
                    opacity: 0.5
                },
                label: {
                    show: false
                },
            },
            silent: true,
            barWidth: 18,
            barGap: '-100%',
            data: dataShadow,
            animation: false
        },
        {
            name: "占比",
            type: "bar",
            roam: false,
            visualMap: false,
            // itemStyle: {
            //   color: "#60ACFC"
            // },
            barWidth: 18,
            label: {
                normal: {
                    show: true,
                    fontSize: 12,
                    position: 'insideLeft'
                },
                emphasis: {
                    show: true
                }
            },
            data: bartop10
        }

    ]
};