【ECharts学习】—实现中国地图

使用Echarts进行地图绘制展示的时候，需要china.js的引入，我把它放在百度网盘里了，需要的自取

点我跳转到百度网盘

提取码：clby

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src='js/echarts.min.js'></script><script src='js/china.js'></script><style>#china_chart {width: 1000px;height: 800px;border: 1px solid #999;}</style>
</head><body><div id="china_chart"></div><script>var china_chart = echarts.init(document.getElementById('china_chart'));//数据纯属虚构  [{城市:数据,...}]var data = [{name: '江苏',value: 1}, {name: '北京',value: 34}, {name: '上海',value: 68}, {name: '重庆',value: 23}, {name: '河北',value: 34}, {name: '河南',value: 3.2}, {name: '云南',value: 1.6}, {name: '辽宁',value: 4.3}, {name: '黑龙江',value: 4.1}, {name: '湖南',value: 2.4}, {name: '安徽',value: 33}, {name: '山东',value: 54}, {name: '新疆',value: 1}, {name: '浙江',value: 44}, {name: '江西',value: 22}, {name: '湖北',value: 2.1}, {name: '广西',value: 3.0}, {name: '甘肃',value: 1.2}, {name: '山西',value: 3.2}, {name: '内蒙古',value: 3.5}, {name: '陕西',value: 2.5}, {name: '吉林',value: 4.5}, {name: '福建',value: 2.8}, {name: '贵州',value: 1.8}, {name: '广东',value: 3.7}, {name: '青海',value: 0.6}, {name: '西藏',value: 0.4}, {name: '四川',value: 3.3}, {name: '宁夏',value: 0.8}, {name: '海南',value: 1.9}, {name: '台湾',value: 0.1}, {name: '香港',value: 0.1}, {name: '澳门',value: 0.1}];var option = {title: {show: true,text: '排名情况',},tooltip: { //悬浮弹框show: true,// formatter: function(params) {//data series里面数据 =[{name:'',value:''},{}] //     return params.name + '：' + params.value + '人';// },formatter: '{a}-{b}:{c}人',},visualMap: [{ //visualMap 是视觉映射组件，用于进行『视觉编码 visualMap：图注样式定制，其中包括color范围，文字提示// type:'continuous',//连续型视觉映射组件 type: 'piecewise',//类型为连续型type: 'piecewise', //分段型视觉映射组件// orient: 'horizontal',//如何放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）。// itemWidth: 40,// itemHeight: 20,// text: ['高', '低'],// min: 1,//最小值区域  小于1  显示的green// max: 60,//大于4显示 red       剩余是中间区域blue 左右叠色// inRange: {//     color: ['green','red','yellow']// },// bottom: 30,// left: 'left',}],geo: { //地理坐标系组件 geo:定义地图为china 常用zoommap: 'china', //地图类型。ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积 map/js/china.js// zoom:1,//视角缩放比例  label: {show: true},emphasis: { //高亮label: { //地图的标签名字show: true},itemStyle: { //区域样式 hover样式areaColor: 'pink'}}},series: [{name: '地图',type: 'map', //地图geoIndex: 0, //映射visualMap 颜色配置data: data}]};china_chart.setOption(option);</script>
</body></html>

【ECharts学习】—实现中国地图相关推荐

Echarts中引入中国地图
摘要:最近公司要求开发大屏大数据展示界面,其中有个需求是迁徙图,以下是自己的相关总结,如有些的不好的地方请大家多多指教,我会虚心学习并修改不足的地方. 思考:1.迁徙图实现的第一步是引入中国地图,那如 ...
使用Echarts完成对中国地图的绘制
目录前言 1.什么是Echarts插件 2.如何在vue中使用Echarts 3.中国地图的具体样式 4.如何使用Echarts来完成中国地图的绘制 5.总结前言我们在使用代码绘画地图的时候通常 ...
关于echarts自定义合并中国地图分区展示的问题
其实为了自己能够记住所遇到的问题,然后也是为了以后方便查找,开始决定尝试第一次写自己的博客.当然很多东西也是自己查找借鉴他人才最终解决的问题,所以在此也非常感谢他人的分享.本人前端小白一个,半路转行从 ...
vue中用echarts 绘制geo 中国地图
前言由于5.X版本的echarts没有了map包,因此我先安装了5.1.1版本,再安装了4.9版本,并将4.9版本中的map包复制到了5.1.1版本里. 绘制效果如下: 1.省份根据数据值,展示不同 ...
ECharts在线编辑中国地图数据可视化展示
1.打开ECharts网站输入网址:https://echarts.apache.org/examples/zh/editor.html?c=map-china&theme=light 2. ...
【微信小程序+echarts点亮中国地图】微信小程序echarts中国地图点亮功能
0 小程序开发背景 1 下载官方Github项目 2 按照Echarts官网的map示例使用 3 点击事件的函数效果图 0 小程序开发背景前段时间在上学校的软件开发与实践B课程因为赶上了工大百年 ...
【echarts实现】中国地图世界地图
打开一个用 vue 创建的新项目安装 npm install --save echarts@4.x echars实现中国和世界地图需要引入地图资源需引入地图的话下载的echarts版本就要低于5. ...
使用 Echarts 插件完成中国地图
目录前言: 什么是 Echarts 插件中国地图成品展示步骤: 完成中国地图代码总结: 前言: 大家都知道,一般情况下,想要使用前端设置一个中国地图需要使用 canvas 画布进行编写,不 ...
echarts，map中国地图点击各省，跳转展示，从省返回到中国地图【china.js】
效果图: 1.点击省,跳转到河北省 2.返回,从省返回到中国地图话不多说,直接上代码,1.复制粘贴,2.在引入对应js即可注:全部各省地图,下载地址:** <!DOCTYPE html> ...
vue使用echarts来绘制中国地图下钻省市区县级地图
文章目录前言一.echarts 二.使用步骤 1.vue安装.引入echarts 2.使用echarts 总结前言公司需要一个中国地图点击可进入省市区县级,但是在我使用echarts绘制中国地 ...

【ECharts学习】—实现中国地图

【ECharts学习】—实现中国地图

使用Echarts进行地图绘制展示的时候，需要china.js的引入，我把它放在百度网盘里了，需要的自取

点我跳转到百度网盘

提取码：clby

【ECharts学习】—实现中国地图相关推荐

最新文章

热门文章