Echarts是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。

本文内容为讲解使用ECharts3.x版本绘制中国地图统计信息。

  基本步骤:

1.下载echarts.min.js核心脚本库以及还要单独下载china.js中国地图脚本,页面中添加对脚本的引用。

[说明:除了china.js中国地图脚本库外,还有各省份地图脚本,世界地图脚本word.js,按照自己需求来下]。

  1. <!DOCTYPE html>
  2. <html>
  3. <header>
  4. <meta charset="utf-8">
  5. <script src="echarts.min.js"></script> <!--echarts核心脚本库-->
  6. <script src="china.js"></script> <!--中国地图脚本-->
  7. </header>
  8. </html>

2.在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

  1. <body>
  2. <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
  3. <div id="main" style="width: 600px;height:400px;"></div>
  4. </body>

3.然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个中国地图,下面是完整代码。

  1. <!DOCTYPE html>
  2. <html>
  3. <header>
  4. <meta charset="utf-8">
  5. <script src="echarts.min.js"></script> <!--echarts核心脚本库-->
  6. <script src="china.js"></script> <!--中国地图脚本-->
  7. </header>
  8. <body>
  9. <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
  10. <div id="mainMap" style="width: 600px;height:400px;"></div>
  11.  
  12. <script type="text/javascript">
  13. var myMap = echarts.init(document.getElementById('mainMap')); //初始化图表
  14. var option = {
  15. tooltip: {
  16. trigger: 'item'
  17. },
  18. legend: { //图例: ['第一季度销售量', '第二季度销售量']
  19. orient: 'vertical',
  20. x: 'left',
  21. itemGap: 1,
  22. itemWidth: 20,
  23. itemHeight: 12,
  24. textStyle: {
  25. fontSize: '12px',
  26. },
  27. data: ['第一季度销售量', '第二季度销售量'],
  28. },
  29. dataRange: { //图例范围
  30. x: 'left',
  31. y: 'bottom',
  32. itemGap: 1,
  33. itemWidth: 20,
  34. itemHeight: 12,
  35. splitList: [
  36. {start: 50},
  37. {start: 41, end: 50},
  38. {start: 31, end: 40},
  39. {start: 21, end: 30, label: '21 到 30(自定义label)'},
  40. {start: 10, end: 20, label: '11 到 20(自定义特殊颜色)', color: 'black'},
  41. {end: 10}
  42. ],
  43. color: ['#E0022B', '#E09107', '#A3E00B'],
  44. textStyle: {
  45. fontSize: '12px',
  46. },
  47. },
  48. series: [
  49. {
  50. name: '第一季度销售量',
  51. type: 'map',
  52. mapType: 'china',
  53. roam: false,
  54. itemStyle: {
  55. normal: {
  56. label: {
  57. show: false, //是否显示省名称
  58. textStyle: {
  59. color: "rgb(249, 249, 249)"
  60. }
  61. }
  62. },
  63. emphasis: { label: { show: true } }
  64. },
  65. data: [ //省份数据1
  66. {name: '北京',value: 11 },
  67. {name: '天津',value: 22 },
  68. {name: '四川',value: 33 },
  69. {name: '青海',value: 14 },
  70. {name: '新疆',value: 3 },
  71. {name: '西藏',value: 1 },
  72. //...
  73. ],
  74. zoom: 1.1, //地图放大比例
  75. },
  76. {
  77. name: '第二季度销售量',
  78. type: 'map',
  79. mapType: 'china',
  80. roam: false,
  81. itemStyle: {
  82. normal: {
  83. label: {
  84. show: false, //是否显示省名称
  85. textStyle: {
  86. color: "rgb(249, 249, 249)"
  87. }
  88. }
  89. },
  90. emphasis: { label: { show: true } }
  91. },
  92. data: [ //省份数据2
  93. {name: '北京',value: 10 },
  94. {name: '天津',value: 20 },
  95. {name: '四川',value: 30 },
  96. {name: '青海',value: 40 },
  97. {name: '新疆',value: 32 },
  98. {name: '西藏',value: 23 },
  99. //...
  100. ],
  101. zoom: 1.1, //地图放大比例
  102. }
  103. ], //地图省份数据
  104. }; //end option
  105. //点击省份跳转
  106. myMap.on('click', function (params) {
  107. var name = params.name;
  108. var value = params.value;
  109. if (value > 0) {
  110. alert(name + ':' + value);
  111. }
  112. });
  113. myMap.setOption(option);
  114. </script>
  115. </body>
  116. </html>

4.效果图如下:

5.补充

地图点击事件处理:

  1. myMap.on('click', function (params) {
  2. var name = params.name;
  3. var value = params.value;
  4. if (value > 0) {
  5. alert(name + ':' + value); //如:"新疆:40"
  6. }
  7. });

地图主题theme:

在初始化图表的时候指定主题名称

var myMap = echarts.init(document.getElementById('mainMap'));  //初始化图表

改为

var myMap = echarts.init(document.getElementById('mainMap'), theme);  //初始化图表,theme为主题名称。

可从官网下载主题:http://echarts.baidu.com/download-theme.html

主题使用示例:

  1. <script src="echarts.min.js"></script>
  2. <!-- 引入 vintage 主题 -->
  3. <script src="theme/vintage.js"></script>
  4. <script>
  5. // 第二个参数可以指定前面引入的主题
  6. var chart = echarts.init(document.getElementById('main'), 'vintage');
  7. chart.setOption({
  8. ...
  9. });
  10. </script>

官方参考资料:

1.JS API方法详解: http://echarts.baidu.com/api.html

2.图表配置项参考: http://echarts.baidu.com/option.html

3.地图脚本库下载: http://echarts.baidu.com/download-map.html

4.主题脚本库下载: http://echarts.baidu.com/download-theme.html

图表Echarts的使用的更多相关文章

  1. 开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts

    开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts 本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可 ...

  2. 一个比较实用的商业级图表Echarts

      了解了解                    ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼 ...

  3. 【推荐】开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts

    本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可以参考下面两个网址:ECharts官方网址:http://ecomfe ...

  4. 一个手机图表(echarts)折线图的封装

    //定义一组颜色值,按顺序取出 var colorGroup = ["#6ca3c4","#76bfa3","#ea8f7a"," ...

  5. 数据可视化图表ECharts

    介绍: ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互.个性化的数据可视化图表. ECharts提供了折线图.柱状图.散点图.饼图.K线图, ...

  6. 图表echarts折线图,柱状图,饼状图

    总体就是有折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置.饼状图如何默认显示几个数据中的某个数据 折线图:legend(小标题)中间默认是圆圈 改变成直线 在legend设置的时 ...

  7. 图表制作工具之ECharts

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

  8. 利用echarts做图表统计

    以项目中的扇形统计图为例: 首先,第一步: 引入外部echarts.js文件 其次,第二步: HTML代码块 <div class="count-body-con count-tj&q ...

  9. ECharts开始

    为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的) //from echarts example <body> <div id="main" ...

随机推荐

  1. [hdu 3376]Matrix Again

    这题就是真正的费用流了,用 大屁 就算不超时,你也有个 CE :数组 so large 拆点,费用取反,最大费用最大流即可了喵~ 不过似乎这题很不兼容 dijkstra 的样子 就算用 spfa 重赋 ...

  2. How do you build a database?

    在reddit上看到的一篇讲解数据库实现的文章,非常有意思,在这里记录一下. 回答者technical_guy: Its a great question, and deserves a long a ...

  3. 如何做好APP测试?

    测试一个App具体包括哪些方面,以及每个方面有什么关键点呢? 测试人员常被看作bug寻找者,但你曾想过他们实际是如何开展测试的吗? 你是否好奇他们究竟都做些什么,以及他们如何在一个典型的技术项目中体现 ...

  4. 【转载】芯片级拆解51、AVR、MSP430、凌阳61、PIC,5种单片机,多张显微照片

    先秀一张解剖照,放大裁剪,小米1S微距拍摄,800万像素摄像头很给力!今天等待被拆的是5个单片机芯片:(1)凌阳16位单片机SPCE061A ,这是我接触的第一个单片机,最高主频49MHz,32KB的 ...

  5. 在Label中显示一段文字

    Let’s create a new Xamarin.Forms PCL solution, named Greetings, using the same process described abo ...

  6. 用wamp配置的环境,想用CMD连接mysql怎么连

    签:用wamp配置的环境   想用cmd连接mysql怎么连 进到d盘该目录     (cd切不了盘,就输入盘符加冒号回车,再cd到目录) WAMP装好后,mysql数据库运行时没有 mysql 和 ...

  7. xml中的非法字符

    今使用Jdom生成xml文件的时候,总是出现0x0,0x8为非法字符,经过搜索,问题原因及解决方法如下: 原因:xml中需要过滤的字符分为两类,一类是不允许出现在xml中的字符,这些字符不在xml的定 ...

  8. ThinkPHP 3.2.3 Pager分页

    不是很喜欢TP的分页类,因为生成的分页url感觉有点不好理解,例如访问路径xxxx/home/show.html,在模板输出分页后,例如产生了页码,页码链接的路径会变成xxxx/home/show/p ...

  9. Java正则表达式详解

    转自http://edu.yesky.com/edupxpt/18/2143018.shtml

  10. ios实现程序切入后台,实现后台任务 (转自)

    ,项目需求,是程序home键切入后台,3分钟后退出登陆, 首先,iOS 会再持续切入后台,给我们5秒钟的时间去处理相关数据,5秒后,程序不会再执行任何代码,处于挂起状态. - (void)applic ...