echarts绘制中国版图

刚学习几天的echarts，觉得很好玩，很不错，工作中也经常会用到，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架

echarts官网：https://echarts.apache.org/zh/index.html
下面就是用echarts绘制的中国地图

先要引入Echarts

 <script src="echarts.js"></script>

准备一个DOM容器

 <div></div>

以下就是完整的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="jquery.js"></script><script src="echarts.js"></script><script src="china.js"></script><style>body,html,div{width: 100%;height: 100%;overflow: hidden;}</style>
</head>
<body><div></div><script>function random(){return Math.floor(Math.random()*1000)}var myechar=echarts.init($('div').get(0));myechar.setOption({visualMap:{type: 'piecewise',min:0,max:1000,show:true,text:["High","Low"],itemWidth : 50,itemHeight : 80,orient : 'horizontal',left : 'center',itemGap : 30,},series:{type:'map',map:'china',data:[{ name: '北京', value: random() },{ name: '天津', value: random() },{ name: '上海', value: random() },{ name: '重庆', value: random() },{ name: '河北', value: random() },{ name: '河南', value: random() },{ name: '云南', value: random() },{ name: '辽宁', value: random() },{ name: '黑龙江', value: random() },{ name: '湖南', value: random() },{ name: '安徽', value: random() },{ name: '山东', value: random() },{ name: '新疆', value: random() },{ name: '江苏', value: random() },{ name: '浙江', value: random() },{ name: '江西', value: random() },{ name: '湖北', value: random() },{ name: '广西', value: random() },{ name: '甘肃', value: random() },{ name: '山西', value: random() },{ name: '内蒙古', value: random() },{ name: '陕西', value: random() },{ name: '吉林', value: random() },{ name: '福建', value: random() },{ name: '贵州', value: random() },{ name: '广东', value: random() },{ name: '青海', value: random() },{ name: '西藏', value: random() },{ name: '四川', value: random() },{ name: '宁夏', value: random() },{ name: '海南', value: random() },{ name: '台湾', value: random() },{ name: '香港', value: random() },{ name: '澳门', value: random() }]}})</script>
</body>
</html>

echarts绘制中国版图相关推荐

echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
vue中使用echarts绘制中国地图
首先需要一个绘制中国地图的json文件(资源还在审核,审核过后会重新贴上来) 1.首先引入echarts和json文件,在需要的地方引即可 import echarts from 'echarts'; ...
广西地图html插件,ECharts绘制中国地图、广西地图
准备工作:导入ECharts依赖.和地图需要的.js文件. 文件获取方式: 官网:url github:url (下载完后 :incubator-echarts-4.8.0mapjsprovince目 ...
Vue环境下用ECharts绘制中国地图，并实现拖动、缩放与各省份自动轮播高亮显示
}, { name: "福建", value: 20, }, { name: "贵州", value: 74, }, { name: "广东" ...
echaer 地图_用echarts绘制中国地图
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
vue3+echarts绘制中国地图
最近接到一个需求是做一个中国地图样式大概是这样的需求是要去掉南海,但是由于csdn地图校验,图片如果没有南海会出现图片违规情况,要实现去掉南海,百度查阅相关资料都是说要这样,这个方法的大概意思就是 ...
vue集成echarts 绘制中国地图
最近项目遇见了需要以中国地图展示的需求了解到 echarts 是一个很好用的图表展示工具 ,但发现官网没有关于中国地图的组件,经过了解,echarts 5.0以上将中国地图去掉了,需要用到chi ...
使用Echarts绘制中国地图看这篇就够了（认真脸！）
世界那么大我画张地图看看! 一.效果图 1 二.代码具体编码参考官方Demo:echarts.baidu.com/echarts2/doc/example/map5.html 三.地图的扩展(值 ...

echarts绘制中国版图

echarts绘制中国版图

echarts绘制中国版图相关推荐

最新文章

热门文章