ECharts
簡介
ECharts是基於Canvas的純Javascript圖表庫 ,類似HighChart.
（特點baidu 開源項目資料純中文,支持圖表混搭 拖拽等功能。
支持的圖表類型：折線圖，堆積折線圖，區域圖，堆積區域圖 柱形圖 堆積柱狀圖 散點圖，氣泡圖，大規模散點圖 K線圖，蠟燭圖 餅圖，圓環圖
雷達圖，填充雷達圖 和弦圖 力導布局圖 地圖（支持中國及全國34個省市自治區地圖）。
文檔地址：http://echarts.baidu.com/doc/doc.html
使用
1、需要的JS依賴庫:
模塊加載器：esl.js 或者require.js
繪圖庫: zrender
ECharts: ECharts
2、引入
require.config({
packages:[{
name:'echarts',
location:'./echarts/src',
main:'echarts'
},{
name:'zrender',
location:'./zrender/src',
main:'zrender'
}]
});
3、配置選項和數據
series :{} 表示圖表數據，不同圖表格式不同
var option = {
title:{},legend{},toolbox:{},tooltip{},series:{}...
}
4、呈現圖表
require(
[
'echarts',
'echarts/chart/kforce',
],
function(ec) {
var myChart = ec.init(document.getElementById('demo'));
myChart.setOption(option);
})
5、個性化設置
series.data
[
12, 34,
{
value : 56,
tooltip:{}, //自定義特殊tooltip，僅對該item有效，詳見tooltip
itemStyle:{ //自定義特殊itemStyle，僅對該item有效，詳見itemStyle
normal:{
strokeColor:'#8B1A1A', //normal 默認樣式 emphasis 強調樣式（懸浮時樣式）
},
emphasis:{
strokeColor:'#8B1A1B',
}
},
..., 10, 23
]
個別圖表數據保存在單獨選項中
如: 力導向圖
series[{nodes[...],links[...]}]
6、動態增加數據
myChart.setOption(option);
......
......
option.series.push({...});
myChart.setOption(option);
// 圖表清空-------------------
myChart.clear();
// 圖表釋放-------------------
myChart.dispose();