echarts地图直接显示数值.rar_echarts地图上显示数值资源-CSDN文库

共1个文件

html：1个

版权申诉

5星 · 超过95%的资源 188 浏览量 2021-11-18 11:17:41 上传评论 1 收藏 1KB RAR 举报

在IT行业中，ECharts是一款非常流行的、基于JavaScript的数据可视化库，尤其适合于创建交互式的图表和地图。在本案例中，需求是将ECharts地图应用于公司投屏展示，并且需要地图上的各个区域直接显示对应的数值，而不是仅在鼠标悬停时才显示。这涉及到ECharts的自定义标记（MarkPoint）功能以及地图数据的处理。 ECharts地图的使用通常需要引入ECharts库的JavaScript文件，并在HTML页面中设置一个用于渲染地图的div容器。在提供的"echarts地图直接显示数值.html"文件中，可以看到这样的配置。ECharts地图的初始化代码可能如下： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title>  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script> </head> <body>  <div id="main" style="width: 800px;height:600px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { // ... }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 接下来，要实现地图上直接显示数值，我们需要在`option`对象中配置地图系列（series），并设置`mapType`为“china”来加载中国地图。然后，通过`data`属性指定各个省份的数值，同时利用`markPoint`来添加标记点并显示数值： ```javascript var option = { tooltip: { trigger: 'item' }, series: [{ name: '中国地图', type: 'map', mapType: 'china', roam: false, label: { normal: { show: true } }, data: [ {name: '北京', value: 1234}, // 其他省份的数据... ], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] } }] }; ``` 这里，`data`数组中的每个对象代表一个省份，`name`字段表示省份名，`value`字段则是对应数值。`markPoint`配置用于添加标记点，我们可以通过自定义`data`来实现每个省份的数值直接显示。为了使地图上每个省份都显示其数值，可以扩展`markPoint`的`data`，为每个省份添加一个标记点： ```javascript markPoint: { data: [ {name: '北京', coord: ['北京', 1234]}, // 其他省份的数据... ] } ``` 需要注意的是，`coord`属性用于指定标记点的位置，通常需要根据地图的坐标系统进行转换。在ECharts中，我们可以使用`coord`来自定义标记点的位置，使其与省份的几何中心对齐。将这个`option`对象传递给`myChart.setOption`，地图就会按照配置显示。如果需要进一步定制样式，可以调整`label`、`markPoint`等属性的样式选项。总结来说，实现ECharts中国地图上直接显示数值的关键步骤包括：设置地图系列类型、指定地图数据、添加自定义标记点以及调整样式。通过这种方式，不仅满足了公司投屏的需求，也能直观地展示出各区域的数据信息。

资源推荐

资源详情

资源评论

收起资源包目录

echarts地图直接显示数值.rar （1个子文件）

echarts地图直接显示数值.html 3KB

<!DOCTYPE html> <html style="height:100%;"> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js?_v_=1611323308745"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js?_v_=1611323308745"></script> </head> <body style="height:100%;"> <div id="main" style="width:100%;height:100%;"></div> <script> function randomData() { return Math.round(Math.random()*500); } var mydata = [ {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() }, {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 option = { backgroundColor: '#FFFFFF', title: { text: '全国地图', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item' }, visualMap: { show : false, x: 'left', y: 'bottom', splitList: [ {start: 500, end:600},{start: 400, end: 500}, {start: 300, end: 400},{start: 200, end: 300}, {start: 100, end: 200},{start: 0, end: 100}, ], color: ['#6F6532', '#E82634', '#3399FF','#339900', '#33CC00', '#EEEEEE'] }, series: [{ name: '随机数据', type: 'map', mapType: 'china', roam: true, label: { normal: { show: true, formatter: function (params) { return params.name+"\n"+ params.value; //地图上展示文字 + 数值 }, } }, data:mydata }] }; var chart = echarts.init(document.getElementById('main')); chart.setOption(option); </script> </body> </html>

评论收藏

内容反馈

版权申诉