图表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" ...
随机推荐
- Linux 安装 node
在 Linux 上安装 node,使用 Linux 编译后的版本最佳. 1.进入 node 官网,找到 Linux 版本下载,这里我们右键复制下载地址即可. 2.在 Linux 上,使用命令 curl ...
- javaScript DOM JQuery AJAX
http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...
- 基于MVC4+EasyUI的Web开发框架形成之旅--总体介绍
最近花了很多时间在重构和进一步提炼Winform开发框架的工作上,加上时不时有一些项目的开发工作,我博客里面介绍Web开发框架的文章比较少,其实以前在单位工作,80%的时间是做Web开发的,很早就形成 ...
- Visual Studio 启动修复命令
今天VS启动不了了,连命令行的 devenv.exe /? 都执行不了,看不到帮助命令了,记性不好,以前看过但没记住呀,还好我装了两个不同版本的VS, 另一个VS的帮助命令还是可以看到的.虽然修复了, ...
- mysql主从复制问题之主从两端binlog日志不同步解决方案
主操作: 进入主的数据库查看状态: mysql> show master statusG; *************************** 1. row **************** ...
- ubuntu12.04+proftpd1.3.4a的系统用户+虚拟用户权限应用实践
目录: 一.什么是Proftpd? 二.Proftpd的官方网站在哪里? 三.在哪里下载? 四.如何安装? 1)系统用户的配置+权限控制 2)虚拟用户的配置+权限控制 一.什么是Proftpd? ...
- python 模块openpyxl读excel文件
使用openpyxl模块来读取excel.要注意openpyxl读不再支持旧的xls格式. 先看一下操作前的excel是什么样子吧.对了,现在只支持xlsx格式的excel读取 我现在想在第三行插入3 ...
- SilverlightERP&CRM源码（可用于开发基于Silverlight的CRM，OA，HR，进销存等）
SilverlightERP系统源代码(支持创建OA.SilverlightCRM.HR.进销存.财务等系统之用) 可用于开发以下系统 SilverlightERP SilverlightCRM Si ...
- 【uTenux实验】内存池管理（固定内存池和可变内存池）
1.固定内存池管理实验 内存管理是操作系统的一个基础功能.uTenux的内存池管理函数提供了基于软件的内存池管理和内存块分配管理.uTenux的内存池有固定大小的内存池和大小可变的内存池之分,它们被看 ...
- Git服务器、http协议及XCode
本来费了老鼻子牛劲搭好了SVN,可以通过web进行访问,也弄好了eclipse和XCode,结果几个开发的同事说要上git,悲了个催,又开始折腾git. 因为公司只有一个公网的http出口,因此开始了 ...