Echarts實戰案例代碼(6)：不設區的地級市行政區劃3D工作進度五色圖

不設區的市，即不設立市轄區的市。廣東省中山市、東莞市，甘肅省嘉峪關市，海南省儋州市、就是沒有設立市轄區的地級市，這部分地級市下轄行政區建制爲鄉級行政區，也爲“不設區的市”。

一、Echarts核心庫的外部調用引入；

    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/echarts-gl.min.js"></script>
    <script type="text/javascript" src="js/zhongshan.js"></script>

二、Echarts核心Option；

 function randomData() {
            return Math.round(Math.random() * 200);
        }

        var cityData = [
            {name: '石岐街道', value: randomData()},
            {name: '東區街道', value: randomData()},
            {name: '西區街道', value: randomData()},
            {name: '南區街道', value: randomData()},
            {name: '五桂山街道', value: randomData()},
            {name: '火炬開發區街道', value: randomData()},
            {name: '黃圃鎮', value: randomData()},
            {name: '南頭鎮', value: randomData()},
            {name: '東鳳鎮', value: randomData()},
            {name: '阜沙鎮', value: randomData()},
            {name: '小欖鎮', value: randomData()},
            {name: '東昇鎮', value: randomData()},
            {name: '古鎮鎮', value: randomData()},
            {name: '橫欄鎮', value: randomData()},
            {name: '三角鎮', value: randomData()},
            {name: '民衆鎮', value: randomData()},
            {name: '南朗鎮', value: randomData()},
            {name: '港口鎮', value: randomData()},
            {name: '大涌鎮', value: randomData()},
            {name: '沙溪鎮', value: randomData()},
            {name: '三鄉鎮', value: randomData()},
            {name: '板芙鎮', value: randomData()},
            {name: '神灣鎮', value: randomData()},
            {name: '坦洲鎮', value: randomData()}
        ];

        var chart = echarts.init(document.getElementById('main'));
        chart.setOption({
            backgroundColor: '#404a59',
            visualMap: {
                type: "piecewise",
                splitNumber: 5,
                left: '10%',
                top: '10%',
                textStyle: {
                    color: "rgba(255,255,255,0.8)"
                },
                inRange: {
                    color: ['#ea0a0a', '#ff9505', '#fffb0f', '#0003ff', '#08fa10']
                }
            },
            title: {
                text: '中山市3D工作進度五色圖',
                x: "center",
                textStyle: {
                    color: 'rgba(255,255,255,1)',
                    fontSize: 16
                },
            },
            tooltip: {
                show: false,
                formatter: '{b} <br/> {c}'
            },
            series: [{
                type: 'map3D',
                name: 'map3D',
                map: '中山市',
                roam: true,
                zoom: 0.8,
                label: {
                    show: true,
                    formatter: function (params) {
                        return params.name;
                    },
                    textStyle: {
                        color: 'rgba(255,255,255,1)',
                        fontSize: 12,
                        opacity: 1,
                        backgroundColor: 'rgba(0,23,11,0.8)'
                    },
                },
                viewControl: {
                    alpha: 35,
                    beta: 80,//水平旋轉角度;
                    center: [10, -10, 0]
                },
                itemStyle: {
                    borderWidth: 1,
                    borderColor: 'rgba(255,255,255,1)'
                },
                data: cityData,
            }]
        })

        window.addEventListener("resize", function () {
            chart.resize();
        });

附件：中山市geoJSON轉JS下載地址
Done!