使用echarts畫折線圖

摘要： 前言： echarts是百度出品一款報表外掛，圖表展示十分的豐富，在我們的開發中使用也比較廣泛，但是官方的樣例都是十分簡單的，好在他們的api文件提供了特別多的配置項，這就為我們畫更豐富的圖表提供了可能性。 使用echarts遇到過的坑： 一定要給圖表容器新增寬度與...

前言：

echarts是百度出品一款報表外掛，圖表展示十分的豐富，在我們的開發中使用也比較廣泛，但是官方的樣例都是十分簡單的，好在他們的api文件提供了特別多的配置項，這就為我們畫更豐富的圖表提供了可能性。

使用echarts遇到過的坑：

• 一定要給圖表容器新增寬度與高度。
• 圖表在容器中可以調整位置，讓圖表顯示的更完整。

今日分享重點：畫折線圖。

1.引入相關js

<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="../echarts-4.2.0/echarts.min.js"></script>

2.確定容器

<div id="line" style="width: 450px;height: 325px;">
</div>

3.定義畫折線圖是方法，配置圖表引數

/**
* 畫折線圖
* @param container 容器
* @param titleName 標題
* @param xData x軸資料
* @param seriesName 圖表名稱
* @param seriesData 圖表資料
*/
function drawLine(container, titleName, xData, seriesName, seriesData) {
var myChart = echarts.init(document.getElementById(container));
myOption = {
color : [ '#6a7985' ],
//標題樣式
title : {
text : titleName,
textStyle : {
color : 'white',
},
left : 'center'
},
//選單
legend : {
show : false
},
//提示框
tooltip : {
trigger : 'axis',
position : 'top',
axisPointer : {
type : 'cross',
label : {
backgroundColor : '#6a7985'
}
}
},
//圖形位置
grid : {
left : '4%',
right : '6%',
bottom : '4%',
top : 80,
containLabel : true
},
//x軸
xAxis : [ {
type : 'category',
//座標軸兩邊留白策略，即x軸座標點開始與結束點位置都不在最邊緣
boundaryGap : true,
axisLine : {
show : true,
//x軸線樣式
lineStyle : {
color : '#17273B',
width : 1,
type : 'solid'
}
},
//x軸字型設定
axisLabel : {
show : true,
fontSize : 12,
color : 'white'
},
data : xData
} ],
//y軸
yAxis : [ {
type : 'value',
//y軸字型設定
axisLabel : {
show : true,
color : 'white',
fontSize : 12
},
//y軸線設定不顯示
axisLine : {
show : false
},
//與x軸平行的線樣式
splitLine : {
show : true,
lineStyle : {
color : '#17273B',
width : 1,
type : 'solid',
}
}
} ],
series : [ {
name : seriesName,
type : 'line',
//折線平滑
smooth : true,
symbol : 'circle',
symbolSize : 6,
//線條樣式
lineStyle : {
color : {
type : 'linear',
x : 0,
y : 0,
x2 : 0,
y2 : 1,
colorStops : [ {
offset : 0,
// 0% 處的顏色
color : '#6ae6dd'
}, {
offset : 1,
// 100% 處的顏色
color : 'red'
} ],
globalCoord : false
},
width : 2,
type : 'solid',
},
//折線連線點樣式
itemStyle : {
color : '#00E5DE'
},
//折線堆積區域樣式
areaStyle : {
color : '#004c5E'
},
data : seriesData
} ]
};
myChart.setOption(myOption);
}

4.呼叫方法，傳遞引數

drawLine('line', '年卡銷售額', [ '一季度', '二季度', '三季度', '四季度' ], '銷售額', [ 120, 232, 471, 83 ]);

5.劃重點

• 在定義的方法中，一些需要動態變化展示的樣式、資料等定義成了方法的引數，可以根據不同的展示需求傳遞不同的引數，其它的樣式根據頁面風格已經寫成固定樣式。
• 固定樣式只是api中的一部分，如果還想圖表展示的更豐富、更動態化，可以參考官方api，配置方式大同小異。

6.上圖