最近需求中用到折線圖，單線條，多線交錯，之前是散點圖，用的是另一個 amcharts.js，這個文檔也能找的到，回歸早本次重點：ECharts
一、首先引入echarts.common.min.js文件，當然開發狀態下使用echarts.js可以更便於調試，傳送門
二、為圖表准備一個dom容器，寬高可以自行定義，
<body> <!-- 為 ECharts 准備一個具備大小（寬高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </body>
三、使用 echarts.init 方法初始化一個echart是實例，並通過setOption方法生成一個簡單的折線圖，如下：
// 1 單獨一個
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
tooltip: { //跟隨鼠標顯示數值
trigger: 'axis'
},
//保存圖片
toolbox: {
feature: {
saveAsImage: {
name:'熱度監控', //圖片名
pixelRatio:2
}
}
},
/* grid: { //canvas距離邊界位置
left: '3%',
bottom:'25%'
},*/
// 聲明一個 X 軸，類目軸（category）。默認情況下，類目軸對應到 dataset 第一列。
xAxis: {
type: 'category',
boundaryGap: false,//坐標軸不留白
data: dataX.slice(0,10),
axisLabel: { //x坐標展示偏移
interval:0,
rotate:60
},
/* axisLabel: { //刻度偏移
interval: 0,
rotate:0,
fontWeight:'400',
formatter:function(value)
{
return value.split("").join("\n");
}
},
axisTick:{ //隔幾個空格顯示刻度
interval:1,
}*/
},
// 聲明一個 Y 軸，數值軸。
yAxis: {
type: 'value'
},
// 聲明多個 bar 系列，默認情況下，每個系列會自動對應到 dataset 的每一列。
series: [{
data: [820, 932, 901, 934, 932, 901, 934],
type: 'line'
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
其中部分屬性都附上了注釋，實際中會常用的是 saveAsImage ，用於圖片的保存，
三、對於多個折線，跟上面的方法大同小異，區別於聲明圖例組件legend和系列列表賦值，demo如下：
//2 多個折線
/*2*/
var myChart3 = echarts.init(document.getElementById('main3'));
var option3 = {
tooltip: {
trigger: 'axis'
},
legend: {
data:['總池','用戶池','馬甲池']
},
toolbox: {
feature: {
saveAsImage: {
name:'獎池監控',
pixelRatio:2
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: dataX2,
},
yAxis: {
type: 'value'
},
series: [
{
name:'總池',
type:'line',
stack: '總量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'用戶池',
type:'line',
stack: '總量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'馬甲池',
type:'line',
stack: '總量',
data:[150, 232, 201, 154, 190, 330, 410]
}
]
};
myChart3.setOption(option3);
四、當然我們經常用的過程中 值是需要動態配置的，用setOption給echarts實例動態賦值：
/*1先聲明*/
var myChart1 = echarts.init(document.getElementById('main'));
myChart1.setOption({
legend: {
data:['銷量']
},
tooltip: {
trigger: 'axis'
},
toolbox: {
feature: {
saveAsImage: {
name:'熱度監控',
pixelRatio:2
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: [{
name: '銷量',
type: 'line',
data: []
}]
});
// 2異步加載數據
$.get('/admin/js/data1.json').done(function (data) {
// 填入數據
myChart1.setOption({
xAxis: {
type: 'category',
boundaryGap: false,
data: data.dataX2
},
series: [{
name: '銷量',
data: data.data1
}]
});
});
具體參數就不在解釋，可以參考API中配置的說明，自己嘗試幾下就知道對應的意思了，
五、動態加載的時候，請求需要時間，這個過程中可以顯示loading動畫，也是有提供的，
myChart1.showLoading();
這個方法我在聲明myChart1，初始化之后直接調用，動態配置獲得請求后，在調用
myChart1.hideLoading();
隱藏動畫，舉個栗子吧：
$.ajax({
type: "get",
url: 'demo.json',
async: true,
dataType: 'json',
success: function(res) {
if(res.status == 1 && res.data){
var data = res.data;
myChart3.setOption({
xAxis: {
type: 'category',
boundaryGap: false,
data: data.dataX1
},
series: [{
name:'總池',
type:'line',
stack: '總量',
data:data.dataY1
}]
});
}else if(!data){
messager('danger','暫無數據')
}else{
messager('danger',res.msg)
}
},
error: function(error) {
messager('danger',error.statusText)
},
complete:function () {
myChart3.hideLoading();
}
});
叨逼叨：這里series里有參數項stack，多個線條時有用，如果設置相同的stack值，后一個系列的值會在前一個系列的值上相加。
當然，這只是冰山一角，只是自己剛好需要這點而已，更多強大的功能暫時沒有用到~~~~ ^_^