ECharts简单入门
图1和图2是手机上显示的效果，
图3是电脑浏览器显示的效果。
如何使用ECharts?
1.下载echarts.js
2.引入echarts.js
<script type="text/javascript" src="../../plugin/echarts/echarts.js"></script>
3.定义div区域
<div id="ec1" style="width: 100%;height:400px;"></div>
<div id="ec2" style="width: 100%;height:400px;"></div>
4.初始化并关联区域
// 基于准备好的dom，初始化echarts实例
var myEc1 = echarts.init(document.getElementById('ec1'));
5.配置数据与参数
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
6.填充区域
// 使用刚指定的配置项和数据显示图表。
myEc1.setOption(option);
tips:这里最核心的就是option这个参数了，配置不同的option，就会显示不同的图表内容。
完整案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
<title>echarts测试</title>
</head>
<body style="overflow: hidden;">
<header class="aui-bar aui-bar-nav">
echarts测试
</header>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="ec1" style="width: 100%;height:400px;"></div>
<div id="ec2" style="width: 100%;height:400px;"></div>
<script type="text/javascript" src="../../plugin/echarts/echarts.js"></script>
<script>
// 基于准备好的dom，初始化echarts实例
var myEc1 = echarts.init(document.getElementById('ec1'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myEc1.setOption(option);
var myEc2 = echarts.init(document.getElementById('ec2'));
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'line' // 默认为直线，可选为：'line' | 'shadow'
}
},
// label:{
// normal:{
// show: true,
// position: 'inside'}
// },
legend: {
data:['直接粉丝','间接粉丝']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['一月','二月','三月','四月','五月','六月','七月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接粉丝',
type:'bar',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'间接粉丝',
type:'bar',
stack: '广告',
data:[150, 232, 201, 154, 190, 330, 410]
}
]
};
myEc2.setOption(option);
</script>
</body>
</html>
具体使用，可以参考官方案例，http://echarts.baidu.com/examples.html
ECharts简单入门的更多相关文章
- ECharts简单入门demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- ECharts.js学习（一） 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- ECharts.js 超简单入门（本质canvas）
ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...
- HCharts随笔之简单入门
此处可以对比我的另一个Echars简单入门 直接上源码 <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...
- EChart.js 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- 用IntelliJ IDEA创建Gradle项目简单入门
Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...
- [原创]MYSQL的简单入门
MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...
- Okio 1.9简单入门
Okio 1.9简单入门 Okio库是由square公司开发的,补充了java.io和java.nio的不足,更加方便,快速的访问.存储和处理你的数据.而OkHttp的底层也使用该库作为支持. 该库极 ...
- emacs最简单入门，只要10分钟
macs最简单入门,只要10分钟 windwiny @2013 无聊的时候又看到鼓吹emacs的文章,以前也有几次想尝试,结果都是玩不到10分钟就退出删除了. 这次硬着头皮,打开几篇文章都看完 ...
随机推荐
- linux进程管理之概念（一）
一.进程和线程的概念 1.进程和线程的定义 进程并不只是一段可以运行的代码,也包含了运行代码所需要的资源. 在操作系统来看,进程是资源管理的最小单元,而我们又知道,线程是程序执行的最小单元. 话说回来 ...
- 低价购买 洛谷1108 codevs4748 dp
首先,,我相信第一问是可以做出来的,,,做不出来自行面壁思过,,, 第二问,我们可以发现,如果f[i]为1时应该将其g[i]初始化为1,当初就是因为这个wa了一个世纪,之后先考虑不需要判重时的情况,如 ...
- Windows下从源代码编译Skia
在PPAPI里面画图,能够结合第三方的图形库.比方Cairo.Skia. Google Chrome.Chromium和Android都使用Skia作为画图引擎.我也来试试Skia,先过编译关. fo ...
- Android控件篇
Android中提供了丰富的UI空间.为了最大限度地发挥平台的性能.每个开发人员必须熟练掌握UI控件尤其是经常使用的UI控件.并能依据须要呈现的内容选择最恰当的控件. Android提供了XML配置和 ...
- MySQL具体解释（9）----------索引具体解释
写在前面:索引对查询的速度有着至关重要的影响,理解索引也是进行数据库性能调优的起点. 考虑例如以下情况.假设数据库中一个表有10^6条记录,DBMS的页面大小为4K.并存储100条记录.假设没有索引, ...
- UI组件之AdapterView及其子类（四）Gallery画廊控件使用
听说 Gallery如今已经不使用了,API使用ViewPaper取代了,以后再学专研ViewPaper吧如今说说Gallery画廊,就是不停显示图片的意思 Gallery是用来水平滚动的显示一系列项 ...
- 如何在github的README.md中添加图片
如何在github的README.md中添加图片 总结: 链接引用: 简介: 1.在github上的仓库建立一个存放图片的文件夹,文件夹名字随意.如:img ...
- jquery的append/prepend和after/before有什么区别呢？
append <p> <span class="s1">s1</span> </p> <script> $(" ...
- SVN在vs2013中使用
http://download.csdn.net/download/show_594/9112963 内包含VisualSVN 5.0.1的官方原版安装包及破解文件VisualSVN.Core.L.d ...
- css 添加滚动条
代码: <template> <div class="w" style="scrollbar-arrow-color:yellow;scrollbar- ...