图表Echarts的使用
Echarts是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。
本文内容为讲解使用ECharts3.x版本绘制中国地图统计信息。
基本步骤:
1.下载echarts.min.js核心脚本库以及还要单独下载china.js中国地图脚本,页面中添加对脚本的引用。
[说明:除了china.js中国地图脚本库外,还有各省份地图脚本,世界地图脚本word.js,按照自己需求来下]。
- <!DOCTYPE html>
- <html>
- <header>
- <meta charset="utf-8">
- <script src="echarts.min.js"></script> <!--echarts核心脚本库-->
- <script src="china.js"></script> <!--中国地图脚本-->
- </header>
- </html>
2.在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
- <body>
- <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
- <div id="main" style="width: 600px;height:400px;"></div>
- </body>
3.然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个中国地图,下面是完整代码。
- <!DOCTYPE html>
- <html>
- <header>
- <meta charset="utf-8">
- <script src="echarts.min.js"></script> <!--echarts核心脚本库-->
- <script src="china.js"></script> <!--中国地图脚本-->
- </header>
- <body>
- <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
- <div id="mainMap" style="width: 600px;height:400px;"></div>
- <script type="text/javascript">
- var myMap = echarts.init(document.getElementById('mainMap')); //初始化图表
- var option = {
- tooltip: {
- trigger: 'item'
- },
- legend: { //图例: ['第一季度销售量', '第二季度销售量']
- orient: 'vertical',
- x: 'left',
- itemGap: 1,
- itemWidth: 20,
- itemHeight: 12,
- textStyle: {
- fontSize: '12px',
- },
- data: ['第一季度销售量', '第二季度销售量'],
- },
- dataRange: { //图例范围
- x: 'left',
- y: 'bottom',
- itemGap: 1,
- itemWidth: 20,
- itemHeight: 12,
- splitList: [
- {start: 50},
- {start: 41, end: 50},
- {start: 31, end: 40},
- {start: 21, end: 30, label: '21 到 30(自定义label)'},
- {start: 10, end: 20, label: '11 到 20(自定义特殊颜色)', color: 'black'},
- {end: 10}
- ],
- color: ['#E0022B', '#E09107', '#A3E00B'],
- textStyle: {
- fontSize: '12px',
- },
- },
- series: [
- {
- name: '第一季度销售量',
- type: 'map',
- mapType: 'china',
- roam: false,
- itemStyle: {
- normal: {
- label: {
- show: false, //是否显示省名称
- textStyle: {
- color: "rgb(249, 249, 249)"
- }
- }
- },
- emphasis: { label: { show: true } }
- },
- data: [ //省份数据1
- {name: '北京',value: 11 },
- {name: '天津',value: 22 },
- {name: '四川',value: 33 },
- {name: '青海',value: 14 },
- {name: '新疆',value: 3 },
- {name: '西藏',value: 1 },
- //...
- ],
- zoom: 1.1, //地图放大比例
- },
- {
- name: '第二季度销售量',
- type: 'map',
- mapType: 'china',
- roam: false,
- itemStyle: {
- normal: {
- label: {
- show: false, //是否显示省名称
- textStyle: {
- color: "rgb(249, 249, 249)"
- }
- }
- },
- emphasis: { label: { show: true } }
- },
- data: [ //省份数据2
- {name: '北京',value: 10 },
- {name: '天津',value: 20 },
- {name: '四川',value: 30 },
- {name: '青海',value: 40 },
- {name: '新疆',value: 32 },
- {name: '西藏',value: 23 },
- //...
- ],
- zoom: 1.1, //地图放大比例
- }
- ], //地图省份数据
- }; //end option
- //点击省份跳转
- myMap.on('click', function (params) {
- var name = params.name;
- var value = params.value;
- if (value > 0) {
- alert(name + ':' + value);
- }
- });
- myMap.setOption(option);
- </script>
- </body>
- </html>
4.效果图如下:
5.补充
地图点击事件处理:
- myMap.on('click', function (params) {
- var name = params.name;
- var value = params.value;
- if (value > 0) {
- alert(name + ':' + value); //如:"新疆:40"
- }
- });
地图主题theme:
在初始化图表的时候指定主题名称
将
var myMap = echarts.init(document.getElementById('mainMap')); //初始化图表
改为
var myMap = echarts.init(document.getElementById('mainMap'), theme); //初始化图表,theme为主题名称。
可从官网下载主题:http://echarts.baidu.com/download-theme.html,
主题使用示例:
- <script src="echarts.min.js"></script>
- <!-- 引入 vintage 主题 -->
- <script src="theme/vintage.js"></script>
- <script>
- // 第二个参数可以指定前面引入的主题
- var chart = echarts.init(document.getElementById('main'), 'vintage');
- chart.setOption({
- ...
- });
- </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的使用的更多相关文章
- 开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts
开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts 本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可 ...
- 一个比较实用的商业级图表Echarts
了解了解 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼 ...
- 【推荐】开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts
本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可以参考下面两个网址:ECharts官方网址:http://ecomfe ...
- 一个手机图表(echarts)折线图的封装
//定义一组颜色值,按顺序取出 var colorGroup = ["#6ca3c4","#76bfa3","#ea8f7a"," ...
- 数据可视化图表ECharts
介绍: ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互.个性化的数据可视化图表. ECharts提供了折线图.柱状图.散点图.饼图.K线图, ...
- 图表echarts折线图,柱状图,饼状图
总体就是有折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置.饼状图如何默认显示几个数据中的某个数据 折线图:legend(小标题)中间默认是圆圈 改变成直线 在legend设置的时 ...
- 图表制作工具之ECharts
简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...
- 利用echarts做图表统计
以项目中的扇形统计图为例: 首先,第一步: 引入外部echarts.js文件 其次,第二步: HTML代码块 <div class="count-body-con count-tj&q ...
- ECharts开始
为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的) //from echarts example <body> <div id="main" ...
随机推荐
- [hdu 3376]Matrix Again
这题就是真正的费用流了,用 大屁 就算不超时,你也有个 CE :数组 so large 拆点,费用取反,最大费用最大流即可了喵~ 不过似乎这题很不兼容 dijkstra 的样子 就算用 spfa 重赋 ...
- How do you build a database?
在reddit上看到的一篇讲解数据库实现的文章,非常有意思,在这里记录一下. 回答者technical_guy: Its a great question, and deserves a long a ...
- 如何做好APP测试?
测试一个App具体包括哪些方面,以及每个方面有什么关键点呢? 测试人员常被看作bug寻找者,但你曾想过他们实际是如何开展测试的吗? 你是否好奇他们究竟都做些什么,以及他们如何在一个典型的技术项目中体现 ...
- 【转载】芯片级拆解51、AVR、MSP430、凌阳61、PIC,5种单片机,多张显微照片
先秀一张解剖照,放大裁剪,小米1S微距拍摄,800万像素摄像头很给力!今天等待被拆的是5个单片机芯片:(1)凌阳16位单片机SPCE061A ,这是我接触的第一个单片机,最高主频49MHz,32KB的 ...
- 在Label中显示一段文字
Let’s create a new Xamarin.Forms PCL solution, named Greetings, using the same process described abo ...
- 用wamp配置的环境,想用CMD连接mysql怎么连
签:用wamp配置的环境 想用cmd连接mysql怎么连 进到d盘该目录 (cd切不了盘,就输入盘符加冒号回车,再cd到目录) WAMP装好后,mysql数据库运行时没有 mysql 和 ...
- xml中的非法字符
今使用Jdom生成xml文件的时候,总是出现0x0,0x8为非法字符,经过搜索,问题原因及解决方法如下: 原因:xml中需要过滤的字符分为两类,一类是不允许出现在xml中的字符,这些字符不在xml的定 ...
- ThinkPHP 3.2.3 Pager分页
不是很喜欢TP的分页类,因为生成的分页url感觉有点不好理解,例如访问路径xxxx/home/show.html,在模板输出分页后,例如产生了页码,页码链接的路径会变成xxxx/home/show/p ...
- Java正则表达式详解
转自http://edu.yesky.com/edupxpt/18/2143018.shtml
- ios实现程序切入后台,实现后台任务 (转自)
,项目需求,是程序home键切入后台,3分钟后退出登陆, 首先,iOS 会再持续切入后台,给我们5秒钟的时间去处理相关数据,5秒后,程序不会再执行任何代码,处于挂起状态. - (void)applic ...