Echarts实战案例代码(6):不设区的地级市行政区划3D工作进度五色图

简介: Echarts实战案例代码(6):不设区的地级市行政区划3D工作进度五色图

20200706084826533.png


不设区的市,即不设立市辖区的市。广东省中山市、东莞市,甘肃省嘉峪关市,海南省儋州市、就是没有设立市辖区的地级市,这部分地级市下辖行政区建制为乡级行政区,也为“不设区的市”。


一、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();
        });


Done!

相关文章
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
436 2
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
967 0
|
XML 前端开发 数据格式
echarts柱图前后端代码SpringCloud+Vue3
echarts柱图前后端代码SpringCloud+Vue3
292 1
echarts迁徙图
前段时间在echarts社区,看见别人写的echarts迁徙图,学习并也写了一个
|
开发者 容器
Echarts饼图实现-今日进度-动态图
构建一个动态旋转的ECharts饼图,包括渐变色和动画效果。初始化ECharts实例,设置图表尺寸和背景,配置标题、颜色、系列数据及自定义渲染。利用`renderItem`绘制弧线和圆点,`getCirlPoint`计算坐标。通过`setInterval`和`draw`函数实现旋转动画。完整代码可在链接下载。
1225 0
Echarts饼图实现-今日进度-动态图
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
1181 0
 ECharts 雷达图案例001-自定义节点动画
|
数据可视化 黑灰产治理
📊 ECharts 雷达图案例002 - 诈骗性质分析
**ECharts 案例展示了诈骗性质的雷达图分析,以创新可视化揭示诈骗模式。定制化雷达图配色鲜明,多维度剖析不同诈骗手段,如网络刷单、冒充公检法。交互式设计允许用户深入探究细节。[点击这里](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454384)查看完整案例。#ECharts #数据可视化 #雷达图 #诈骗分析**
268 0
📊 ECharts 雷达图案例002 - 诈骗性质分析
|
前端开发 数据可视化 JavaScript
【揭秘神器】如何用Pyecharts轻松召唤出Echarts?只需几行Python代码,让你的数据瞬间生动起来!
【8月更文挑战第21天】Pyecharts是一款基于Python的图表生成库,利用Echarts强大的JavaScript可视化能力,让开发者无需编写前端代码即可在Python环境中创建美观图表。本文通过实例演示如何安装Pyecharts并生成一个展示城市气温分布的柱状图,包括基本图表生成及自定义样式设置,如颜色调整、图例显示等,最终将图表嵌入HTML文件展示,适合各水平开发者快速掌握数据可视化技能。
517 0
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
1672 0
|
数据可视化 JavaScript 前端开发
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
使用 ECharts 绘制3D饼图,立体效果华丽渲染!