dev_echarts
本次开发依赖于第三方插件--ECharts(一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器 (IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视 化图表。)
###具体使用方法 ####1.下载需引用的js
从官网 http://echarts.baidu.com/download.html 下载界面选择你需要的版本下载,有精简版，常用版，还有完整版，还可以根据自己的项目需要自定义选择下载，具体详情见官网，本次在iuap mobile平台上绑定的是精简版本，仅包含基础图表。
####2.引用js
引入Echart.js，只需要像普通的 JavaScript 库一样用 script 标签引入
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</header>
</html>
####3.在html中定义图表区域 在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。如下
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
####4.初始化echart 在js中基于准备好的dom通过 echarts.init 方法,初始化一个 echarts 实例,并通过 setOption 方法生成一个图表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
####5.配置图表数据 其中option包含图表的配置项和数据，里面会定义很多配置项，官网也有较为详细的说明，若想了解的更为全面和具体可参考官网配置项手册 http://echarts.baidu.com/option.html#title 本次就以iuap mobile图表控件的折线图表里面的option做详细说明
var option={
title:{ //图表名字，可以定义位置，内容
text:"2016年8月相关数据统计",
x:"center",
y:10
},
legend:{ //图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
data: ["新增用户", "活跃用户", "新增vip用户", "活跃vip用户"],
x:'center',
y:'450',
itemGap: 10, //legend元素间隔
itemWidth: 60, //图标宽度
itemHeight: 20, //图标高度
textStyle: {
color: 'auto',
fontSize: 14
}
},
tooltip: { // 气泡提示配置
trigger: 'item' // 触发类型，默认数据触发，可选为：'axis'
},
xAxis: [{ //x坐标轴内容设置
type: 'category',
boundaryGap: true, //两边留出空白策略
axisLine: { //坐标线
lineStyle: {
color: '#464646',
width: 2
}
},
axisLabel: { //x、y坐标轴数据显示风格设置
interval: 'auto',
rotate: -45, //x轴文字旋转角度
clickable: true,
textStyle: {
color: '#767676',
fontSize: 16
}
},
axisTick: { //坐标刻度设置
interval: 'auto',
onGap: false
},
splitLine: { //分割线
show: true,
onGap: false,
lineStyle: {
type: 'dashed'
}
},
data: ['8-1', '8-2', '8-3', '8-4', '8-5', '8-6', '8-7'] //x轴刻度数据
}],
yAxis: [{ //y坐标轴设置
type: 'value',
name: '(万)',
nameTextStyle:{
align: 'right',
fontSize: 16
},
axisLine: { //y坐标轴轴线颜色粗细设置
lineStyle: {
color: '#333',
width: 2
}
},
axisLabel: { //y坐标轴分度值字体设置
textStyle: {
color: '#333',
fontSize: 14
}
},
splitLine: { // y轴分割线设置
show: true,
onGap: false,
lineStyle: {
type: 'dashed'
}
},
splitNumber: 10
}],
grid: { //控制坐标的四周间距（距离绘制好的dom边界距离）
x: 60,
y: 70,
x2: 40,
y2: 100
},
series: [{ //配置4条折线数据
name: '新增用户',type: 'line',symbol: 'emptyCircle',symbolSize: 4,
itemStyle: {
normal: {
lineStyle:{
width: 3
}
}
},
data:[50, 234, 450, 580, 760,780,900]
},{
name: '活跃用户',type: 'line',symbol: 'emptyCircle',symbolSize: 4,
itemStyle: {
normal: {
lineStyle:{
width: 3
}
}
},
data: [10, 160, 346, 370, 420,470,530]
},{
name: '新增vip用户',type: 'line',symbol: 'emptyCircle',symbolSize: 4,
itemStyle: {
normal: {
lineStyle:{
width: 3
}
}
},
data: [2, 40, 50, 130, 210,200,149]
},{
name: '活跃vip用户',type: 'line',symbol: 'emptyCircle',symbolSize: 4,
itemStyle: {
normal: {
lineStyle:{
width: 3
}
}
},
data: [10, 30, 38, 120, 310,380,680]
}]
};
####6.绑定事件 配置完成后图表就能渲染出来了，除此以外，Echart还可以绑定事件和行为，具体可参考官网： http://echarts.baidu.com/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA 下面以图表的每一个配置数据绑定一个点击事件为例，如下：
myChart.on('click', function (params) {
// 控制台打印数据的名称
console.log(params.name);
});
