安装
1、npm install echarts --save
2、引入echarts的两种方式
页面直接引入文件: <script src="echarts.min.js"></script>
webpack: import echarts from 'echarts'
3、页面创建DOM的容器
<div id="main" style="width: 600px;height:400px;"></div> 必须要一个高度值
异步数据加载和更新
1、数据异步
将数据通过ajax异步取到后，在通过setOption()方式直接加到载插件中
2、loading动画
showLoading()来显示、hideLoading()隐藏
Exampole
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
$.ajax({
success:function(data){
myChart.hideLoading();
}
})
3、数据的动态更新
只需要加单个数据，先data.push(vlaue), 在通过setOption()将数据渲染出来
var data = []; // 存储数据
// 创建图表将data数据加入
....
// 添加数据
function addData(){
data.push(Math.random()*100);
}
setInterval(function(){
addData();
myChart.setOption({
数据
})
},1000)
数据区缩放组件 dataZoom
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
dataZoom: [
{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 10, // 左边在 10% 的位置。
end: 60 // 右边在 60% 的位置。
}
],
series: [
{
type: 'scatter', // 这是个『散点图』
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
}
]
}
事件和行为
Echarts中有两种事件，1、用户的鼠标事件 2、交互组件后触发的行为事件
一、鼠标事件
鼠标事件: 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'
myChart.on('click', function(params){
console.log(params.name)
})
二、交互组件
myChart.dispatchAction({ type: '' }) // 通过dispatchAction触发
1、legendselectchanged: 切换图例开关时触发
2、datazoom: 数据区域缩放触发
二、params 对象
{
// 当前点击的图形元素所属的组件名称，
// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
componentType: string,
// 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
seriesType: string,
// 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
seriesIndex: number,
// 系列名称。当 componentType 为 'series' 时有意义。
seriesName: string,
// 数据名，类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
// dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
// 其他大部分图表中只有一种 data，dataType 无意义。
dataType: string,
// 传入的数据值
value: number|Array
// 数据图形的颜色。当 componentType 为 'series' 时有意义。
color: string
}
配置选项
1、title: 标题（包括主副标题、链接、样式）
2、legend: 标记的区域 （对legend的显隐、宽高、位置、横纵向排列）
3、grid: 图表的网格区域 （是否显示网格、位标、宽高、背景色、边线色）
4、xAxis、yAxis: x、y坐标轴
{
splitLine:{
show: false, // 去掉网格线
lineStyle: {
color: '#48484a' // 设置网络线颜色
}
},
splitArea : {show : true} //保留网格区域
}
5、dataZoom: 数据缩放 （）
6、toolTip: 提示信息，鼠标移到数据点浮现的提示信息（）
7、axisPointer:
8、toolBox: 工具栏 （导出图表、数据视图、动态类型切换、缩放、重置）
9、series: 系列列表（来决定图表的类型、图表的数据）
10、color: 图表每一项的颜色
11、background: 图表背景色
12、textStyle: 文本样式
13、animate: 是否开启动画
----- 组件 -------
14、timeline: 时间轴组件
15、graphic: 原生图形元素组件
16、calendar: 日历坐标组件
17、brush: 区域选择组件
18、geo: 地理坐标系组件
19、parallel: 平行坐标系
20、parallelAxis: 这个组件是平行坐标系中的坐标轴
21、singleAxis: 单轴。可以被应用到散点图中展现一维数据
series对象
type: 展示图表的类型
name: 名称
label: 图形上文本标签的控制（show、position、offset、formatter、）
formatter可以是字符串也可以是函数
字符串模板，模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。
formatter: '{b}: {c}'
label:{
normal:{
formatter: function(data){ // callback
return data.percent + '%';
}
}
},
params:
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名，类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
// 百分比
percent: number,
}
labelLine: 图形上图形与文本之间连接线的控制
data: 数据
center: 饼图中心坐标
radius: 半径
收集
1、x、y轴文字的颜色和角度
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: { // 这里控制颜色
show: true,
textStyle: {
color: '#fff'
},
rotate: 45
}
},
参考资料
http://echarts.baidu.com/echarts2/doc/doc.html#Title
http://echarts.baidu.com/gallery/editor.html 在线编辑