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!