使用echarts配置中国地图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>中国地图</title><!-- 先引入 echarts js --><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script><!-- 再引入china.js --><script src="./china.js"></script>
</head><body><!-- 地图的使用：1：先引入 echarts.js 然后在引入 china.js--><div id="china_chart" style="width: 1000px;height:560px;border:1px solid #999;"></div><script>var china_chart = echarts.init(document.getElementById('china_chart'));//静态的数据，数据的格式和饼图的一致。var data = [{name: '江苏',value: 100},{name: '北京',value: 86},{name: '上海',value: 68},{name: '重庆',value: 123},{name: '河北',value: 34},{name: '河南',value: 32},{name: '云南',value: 160},{name: '辽宁',value: 43},{name: '黑龙江',value: 181},{name: '湖南',value: 24},{name: '安徽',value: 33},{name: '山东',value: 54},{name: '新疆',value: 118},{name: '浙江',value: 44},{name: '江西',value: 220},{name: '湖北',value: 21},{name: '广西',value: 30},{name: '甘肃',value: 12},{name: '山西',value: 32},{name: '内蒙古',value: 35},{name: '陕西',value: 25},{name: '吉林',value: 45},{name: '福建',value: 28},{name: '贵州',value: 18},{name: '广东',value: 37},{name: '青海',value: 62},{name: '西藏',value: 43},{name: '四川',value: 33},{name: '宁夏',value: 8},{name: '海南',value: 19},{name: '台湾',value: 190},{name: '香港',value: 11},{name: '澳门',value: 10}];var option = {title: {text: '中国地图',},tooltip: {// 自定义弹窗// formatter: '{a}<br>{b}：{c}',//{a}: 系列中的name的属性值。{b}系列中具体的数据的内容。{c}：内容对应的值,如果存在多个系列。//使用函数  将系列中的// 鼠标引入省份,不断触发.params 对象.当前省份的信息.formatter: function (params) {// console.log(params);return params.seriesName + "<br>" + params.name + ":" + params.value;}},// 视觉映射组件，负责地图的颜色的配置。visualMap: [{// 组件的类型，连续的// type:"continuous",// 不连续的type: "piecewise",// 自定义颜色块区间// pieces: [//     { min: 201,label:">200",color:"#222" }, //     { min: 101, max: 200, label: '101-200',color:"#666" },//     { min: 51, max: 100, label: '51-100',color:"#999" },//     { min: 11, max: 50, label: '11-50',color:"#aaa" },//     { min: 1, max: 10, label: '1-10',color:"#ccc" },//     // 单独的一个值。//     { value:0,label:"0",color:"#eee"}    // ]// 取值的最小值min: 0,//最大值。max: 250,itemWidth: 25,itemHeight: 15,// 组件两端的文本。// text:["高","低"],// 指定取哪个系列的数据，即哪个系列的 series.data。seriesIndex: [0],// 组件的颜色的范围。inRange: {color: ['orange', 'red']},// 组件的排列方式// orient:"horizontal",// 默认垂直布局orient: "vertical",}],//地图的核心区域geo: {//地图的类型map: 'china',//缩放比例 zoom: 1,//地图上的文字label: {show: true},//高亮选中emphasis: {label: {show: true},itemStyle: {areaColor: 'pink'}}},//系列series: [{name: '中国',type: 'map',geoIndex: 0,data: data}]};//渲染视图china_chart.setOption(option);</script>
</body></html>

使用echarts配置中国地图相关推荐

echarts实现中国地图和各省市地图
echarts实现中国地图我会把china.js和各省市的js以及json上传资源,有需要的可以下载首先引入echarts.js和china.js <!DOCTYPE html> &l ...
echarts实现中国地图各省背景根据数值大小变化的方法
很多人不清楚中国地图要怎么实现,其实 echarts 已经为我们封装好了,只要我们配置好各省数据就可以快捷实现了. 首先我们先来实现中国地图: 中国地图的实现 (1)引入 echarts 及中国地图 ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
vue项目使用ECharts的中国地图，设置地图不同板块的颜色以及动态显示效果
本篇讲述在vue中使用echarts的中国地图,以及对不同板块进行渐变色的设置. 效果图如下: 实现上图效果步骤如下: 确保项目中下载了echarts,然后在main.js中引用echarts imp ...
使用 echarts实现中国地图
效果图: 实现思路首先打开自己的 package.json 看看自己配置里面有: 如果没有的话手动输入然后 npm i 或者cnpm i 一键安装安装完成后需要到 main.js 里配置以下 ...
Echarts实现——中国地图
Echarts实现--中国地图如下图: 使用Echarts进行地图绘制展示的时候,需要china.json: 举例在vue的项目中可以通过cnpm install echarts --save安装E ...
Echarts关于中国地图的china.js文件下载
原文出处:https://blog.csdn.net/weixin_36413887/article/details/80019625 早上用到Echarts的中国地图map时,需要用到china.j ...
echarts：中国地图实现
安装 npm install echarts --save 把chinaMap对应的js文件放到echarts目录下面,保证引用路径的正确性. 直接用npm install的map文件似乎用不了,可以 ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...

使用echarts配置中国地图

使用echarts配置中国地图相关推荐

最新文章

热门文章