ECharts官网标准地图实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>echart学习</title>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px"></div><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript" src="dataJson.js"></script><script type="text/javascript">// 路径配置require.config({paths: {echarts: 'http://echarts.baidu.com/build/dist'}});//使用require(['echarts','echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载'echarts/chart/line','echarts/chart/map','echarts/chart/scatter','echarts/chart/k','echarts/chart/pie','echarts/chart/radar','echarts/chart/chord','echarts/chart/force',],function(ec){// 基于准备好的dom，初始化echarts图表var myChart = ec.init(document.getElementById('main')); // 过渡---------------------/* myChart.showLoading({text: '正在努力的读取数据中...',    //loading话术});var dataJ = new Array;var dataH = new Array;var dataL = new Array; for (var i = 0; i < data.dj.length; i++) {dataJ.push(data.dj[i].month);dataH.push(data.dj[i].high);dataL.push(data.dj[i].low);};myChart.hideLoading();*/var  option = {title : {text: 'iphone销量',subtext: '纯属虚构',x:'center'},tooltip : {trigger: 'item'},legend: {orient: 'vertical',x:'left',data:['iphone3','iphone4','iphone5']},dataRange: {min: 0,max: 2500,x: 'left',y: 'bottom',text:['高','低'],           // 文本，默认为数值文本calculable : true},toolbox: {show: true,orient : 'vertical',x: 'right',y: 'center',feature : {mark : {show: true},dataView : {show: true, readOnly: false},restore : {show: true},saveAsImage : {show: true}}},roamController: {show: true,x: 'right',mapTypeControl: {'china': true}},series : [{name: 'iphone3',type: 'map',mapType: 'china',roam: false,itemStyle:{normal:{label:{show:true}},emphasis:{label:{show:true}}},data:[{name: '北京',value: Math.round(Math.random()*1000)},{name: '天津',value: Math.round(Math.random()*1000)},{name: '上海',value: Math.round(Math.random()*1000)},{name: '重庆',value: Math.round(Math.random()*1000)},{name: '河北',value: Math.round(Math.random()*1000)},{name: '河南',value: Math.round(Math.random()*1000)},{name: '云南',value: Math.round(Math.random()*1000)},{name: '辽宁',value: Math.round(Math.random()*1000)},{name: '黑龙江',value: Math.round(Math.random()*1000)},{name: '湖南',value: Math.round(Math.random()*1000)},{name: '安徽',value: Math.round(Math.random()*1000)},{name: '山东',value: Math.round(Math.random()*1000)},{name: '新疆',value: Math.round(Math.random()*1000)},{name: '江苏',value: Math.round(Math.random()*1000)},{name: '浙江',value: Math.round(Math.random()*1000)},{name: '江西',value: Math.round(Math.random()*1000)},{name: '湖北',value: Math.round(Math.random()*1000)},{name: '广西',value: Math.round(Math.random()*1000)},{name: '甘肃',value: Math.round(Math.random()*1000)},{name: '山西',value: Math.round(Math.random()*1000)},{name: '内蒙古',value: Math.round(Math.random()*1000)},{name: '陕西',value: Math.round(Math.random()*1000)},{name: '吉林',value: Math.round(Math.random()*1000)},{name: '福建',value: Math.round(Math.random()*1000)},{name: '贵州',value: Math.round(Math.random()*1000)},{name: '广东',value: Math.round(Math.random()*1000)},{name: '青海',value: Math.round(Math.random()*1000)},{name: '西藏',value: Math.round(Math.random()*1000)},{name: '四川',value: Math.round(Math.random()*1000)},{name: '宁夏',value: Math.round(Math.random()*1000)},{name: '海南',value: Math.round(Math.random()*1000)},{name: '台湾',value: Math.round(Math.random()*1000)},{name: '香港',value: Math.round(Math.random()*1000)},{name: '澳门',value: Math.round(Math.random()*1000)}]},{name: 'iphone4',type: 'map',mapType: 'china',itemStyle:{normal:{label:{show:true}},emphasis:{label:{show:true}}},data:[{name: '北京',value: Math.round(Math.random()*1000)},{name: '天津',value: Math.round(Math.random()*1000)},{name: '上海',value: Math.round(Math.random()*1000)},{name: '重庆',value: Math.round(Math.random()*1000)},{name: '河北',value: Math.round(Math.random()*1000)},{name: '安徽',value: Math.round(Math.random()*1000)},{name: '新疆',value: Math.round(Math.random()*1000)},{name: '浙江',value: Math.round(Math.random()*1000)},{name: '江西',value: Math.round(Math.random()*1000)},{name: '山西',value: Math.round(Math.random()*1000)},{name: '内蒙古',value: Math.round(Math.random()*1000)},{name: '吉林',value: Math.round(Math.random()*1000)},{name: '福建',value: Math.round(Math.random()*1000)},{name: '广东',value: Math.round(Math.random()*1000)},{name: '西藏',value: Math.round(Math.random()*1000)},{name: '四川',value: Math.round(Math.random()*1000)},{name: '宁夏',value: Math.round(Math.random()*1000)},{name: '香港',value: Math.round(Math.random()*1000)},{name: '澳门',value: Math.round(Math.random()*1000)}]},{name: 'iphone5',type: 'map',mapType: 'china',itemStyle:{normal:{label:{show:true}},emphasis:{label:{show:true}}},data:[{name: '北京',value: Math.round(Math.random()*1000)},{name: '天津',value: Math.round(Math.random()*1000)},{name: '上海',value: Math.round(Math.random()*1000)},{name: '广东',value: Math.round(Math.random()*1000)},{name: '台湾',value: Math.round(Math.random()*1000)},{name: '香港',value: Math.round(Math.random()*1000)},{name: '澳门',value: Math.round(Math.random()*1000)}]}]};// 为echarts对象加载数据 myChart.setOption(option); });    // }</script>
</body>
</html>

效果图

ECharts官网标准地图实现相关推荐

php echarts官网,Echarts用法详细介绍
这篇文章主要介绍了Echarts基本用法,详解的介绍了Echarts的基本用法和实例,有兴趣的可以了解一下 echarts太完美了: 1,开源软件,无私的为我们提供漂亮的图形界面: 2,使用简单,默默 ...
echarts 官网访问慢
echarts官网访问特别慢,有的时候干脆访问不了,尝试在host文件加入ip地址也不可以,后来发现了以下地址,访问真的速度很快,还有很多demo样例 echarts文档地址: ISQQW.COM x ...
解决ECharts官网打开缓慢的问题
本章我们将解决在Windows系统中打开ECharts官网缓慢的问题. 1.问题描述正常情况下,我们在Windows环境中打开ECharts官网可能会遇到非常缓慢的情况,一直处于加载中,甚至打不开, ...
echarts官网进不去,处理DNS了还是进不去
最近我的谷歌浏览器进不去echarts官网,按照网上的方法处理了DNS缓存,也还是进不去,这时候只需要把电脑连接的网络从WiFi换成手机热点即可,具体啥原因还不太明白!
阿里云建站云企业官网标准版、高级版和尊贵版区别对比表
阿里云建站云·企业官网标准版.高级版和尊贵版有什么区别?新手站长网分享阿里云建站定制云企业官网版本功能区别亮点及选择方法: 云企业官网标准版/高级版/尊贵版对比阿里云建站云·企业官网定制分为标准版. ...
【Echarts官网进不去】
[问题] 试过其他文章的改IP方式依然进不去. Echarts官网:https://echarts.apache.org/zh/index.html [解决方法] 连接VPN再进入,就可以看到页面内容 ...
Apache ECharts 官网布局排版错乱的解决办法
echarts图库官网:Apache ECharts 像上图中,有时候打开可能样式错乱,解决办法是强制刷新缓存就行了,连续点击刷新 ok了
数据可视化-Echarts官网及社区整理
官网示例图表 Echarts是一个基于 JavaScript 的开源可视化图表库,官方提供很多基础图表,社区提供用户自己探索的变体. https://echarts.apache.org/exampl ...
Echarts官网展示
1.参考实例 http://echarts.baidu.com/examples/ 点击去的效果: 2.配置项手册 http://echarts.baidu.com/option.html#title ...
centos7使用yum安装mysql5.7(官网标准安装方式)
1.获取yum repo wget https://dev.mysql.com/get/mysql80-community-release-el7-5.noarch.rpm 2.localinstal ...

ECharts官网标准地图实现

ECharts官网标准地图实现相关推荐

最新文章

热门文章

ECharts官网 标准地图实现

ECharts官网 标准地图实现相关推荐

最新文章

热门文章

ECharts官网标准地图实现

ECharts官网标准地图实现相关推荐