ECharts 之一——入门
一、简介
ECharts是一个来自百度的开源的javascript图标库。通过ECharts我们可以呈现出多种类型的图表。ECharts底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现。
ECharts 下载地址为：http://echarts.baidu.com/index.html。
使用如下：
1、下载Echarts，示例版本为echarts-2.2.1,下载之后解压。目录结构如下：
doc目录下的是相关文档。extension是进行扩展的示例。src目录下是源码文件。test目录下是相关测试。build目录下有dist与source目录。使用的echarts只需要dist目录下的所有文件。将dist目录下的文件拷贝到我们的工作目录echarts中。
2、在网页中引入如下js即可使用。
<script src="js/jquery-1.10.2.min.js"></script>
<script src="echarts/echarts-all.js"></script>
二、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="ECharts">
<title>地图示例</title>
</head>
<body>
<div id="map" style="height: 400px; width:500px" ></div>
<script src="jquery.min.js"></script>
<script src="echarts-all.js"></script>
<script type="text/javascript">
var map = echarts.init(document.getElementById('map'));
$(function(){
var option = {
title : {
text: '年度异常统计地区图',//标题
x:'center'//位置
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',//位置水平或垂直
x:'left',//位置，left、center、right
data:['统计值']
},
dataRange: {//数据区间
min: 0,//最小值
max: 1000,//最大值
x: 'left',//位置
y: 'bottom',//位置
//show:false,//是否可见
orient:'horizontal',//位置水平或垂直
text:['高','低'],
color : ['#1e90ff','#f0ffff'], // 颜色
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}
}
},*/
series : [
{
name: '统计值',
type: 'map',//图表类型
mapType: 'china',//地图类型
roam: false,
itemStyle:{
normal:{
label:{show:true},
areaStyle:{color:'red'}
},
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)}
]
}
]
};
map.setOption(option); map.on("click", function(event){//点击事件
alert(event.name + event.value);
console.log(event);
});
});
</script>
</body>
</html>
效果如下：
ECharts 之一——入门的更多相关文章
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- ECharts简单入门
图1和图2是手机上显示的效果, 图3是电脑浏览器显示的效果. 如何使用ECharts? 1.下载echarts.js 2.引入echarts.js <script type="text ...
- ECharts快速入门
一.简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Saf ...
- ECharts简单入门demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Echarts轻松入门，内附踩坑秘籍
首先介绍一下我们的主角ECharts ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fir ...
- Echarts快速入门---------v客学院技术分享
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...
- 图表控件== 百度 echarts的入门学习
花了3天的时间 去学习跟试用之前两款的图表控件 hightcharts(商业,人性化,新手非常方便试用,图表少了点) 跟chartjs==>搭配vue更好 控件,整体而言都还可以. http:/ ...
- echarts -01 入门
1.效果图 2. code <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 百度echarts极速入门
1.http://echarts.baidu.com/ 进入官网 2.打开官方示例 3.随便打开一个列子并打开f12浏览器调试模式,找到例子的iframe地址 4.打开地址 5.下载例子,so eas ...
随机推荐
- 三、Authentication & sessionid
客户在访问Django的某些敏感资料时,被要求需要先登录,客户通过/admin/login进行登录,客户登录成功后,Django给客户分配一个sessionid,后续的访问过程,客户端只需在http头 ...
- C#函数式程序设计之代码即数据
自3.5版本以来,.NET以及微软的.NET语言开始支持表达式树.它们为这些语言的某个特定子集提供了eval形式的求值功能.考虑下面这个简单的Lambda表达式: Func<int, int, ...
- [C#] 可空类型的实现原理
int? 是可为null的值类型.只比int多一个值就是null. 思考: 同样的内存空间,怎么实现的多一个值的?都是4字节,32位,int?靠什么存在一个null值的. 发现: 分析一下内存,看看如 ...
- 软件工程——sprint 1回顾总结
主题:“我们在本次sprint中做了什么?接下来的打算?” sprint总结:在本次sprint里,这是我们团队的成员们第一次开始以团队的形式进行一次团队项目开发,早在第一次团队会议之时,我们便因团队 ...
- 双系统Ubuntu无法访问windows磁盘分区解决方法
为了更好的体验各种操作系统,在电脑中安装双系统是很好的选择,但在使用中难免会遇到这样或那样的问题. 最近总是遇到Ubuntu系统下无法访问windows磁盘分区问题,看了系统日志发现是挂载磁盘出问题了 ...
- ASP.NET MVC使用jQuery无刷新上传
昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...
- 雷军V5，米3横空出世
小米3 下午两点,小米CEO:雷军(也是一个传奇人物),虽然没购买门票,只是自己一个人看微博,看新闻,还是了解到了小米3的面貌,这次雷哥还给大家带来了MITV,售价￥2999!(无法相信)顶配.这次我 ...
- ActiveReports 9 新功能：可视化查询设计器(VQD)介绍
在最新发布的ActiveReports 9报表控件中添加了多项新功能,以帮助你在更短的时间里创建外观绚丽.功能强大的报表系统,本文将重点介绍可视化数据查询设计器,无需手动编写任何SQL语句,主要内容如 ...
- poi excel export 乱码
1. Question Description: ~前端是get方式提交的,参数含有中文“测试” ~导出的excel,文件名正常, 而标题乱码 2. Solution: ~断点发现, 参数接收就是乱码 ...
- Android笔记——什么是json?json如何使用?
什么是json 什么是json,json是什么,json如何使用 JSON是JavaScript Object Notation的缩写,可见JSON来源于JavaScript.JSON数据是一系列键值 ...