該折線圖有幾個特性：有資料平均線、有占位背景、X(Y)軸軸線以及軸線刻度不顯示。 圖表效果如下:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>折線圖案例</title>
<!-- 引入 ECharts 檔案 -->
<script src="js/echarts4.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 為 ECharts 準備一個具備大小（寬高）的 容器 -->
<div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #FF0000;"></div>
</body>
</html>
<script type="text/javascript">
// 基于準備好的容器(這裡的容器是id為chart1的div)，初始化echarts執行個體
var chart1 = echarts.init(document.getElementById("chart1"));
// 指定圖表的配置項和資料
var dataX = ['18~30歲', '31~40歲', '41~50歲', '51~60歲', '61~70歲'];
var dataY = ['200', '102', '422', '189', '12'];
var dataZ = [500, 500, 500, 500, 500];
var option = {
title: {
text: '折線圖示題',
link: 'https://blog.csdn.net/gray_key',
target: 'blank',
left: '5%',
textStyle: {
color: '#fff',
fontSize: 15,
bottom: 20
}
},
grid: {
left: 40,
right: 40,
top: 30,
bottom: 25,
},
backgroundColor: 'rgba(0,0,0,0.8)', // 背景顔色
tooltip: {
trigger: 'item',
formatter: "{a}<br/>{b} : {c}人"
},
xAxis: {
type: 'category',
position: 'bottom',
// 等同于 axisLine: true 開始
axisLine: {
show: false
},
axisTick: {
show: false
},
// 等同于 axisLine: true 結束
axisLabel: {
color: '#fff',
fontSize: 12
},
data: dataX,
},
yAxis: {
splitNumber: 5, // 坐标軸的分割段數，需要注意的是這個分割段數隻是個預估值，最後實際顯示的段數會在這個基礎上根據分割後坐标軸刻度顯示的易讀程度作調整。在類目軸中無效。
// 等同于 axisLine: true 開始
axisLine: {
show: false
},
axisTick: {
show: false
},
// 等同于 axisLine: true 結束
splitLine: {
show: true,
lineStyle: {
color: '#fff',
opacity: 0.2
}
},
axisLabel: {
color: '#fff',
fontSize: 12
}
},
series: [{
name: '各年齡段人數',
type: 'line',
data: dataY,
smooth: true,
symbol: 'emptyCircle',
symbolSize: 5,
itemStyle: {
normal: {
color: '#fff'
}
},
lineStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(255,0,0,0.8)' // 0% 處的顔色
}, {
offset: 1, color: 'rgba(0,0,238,0.8)' // 100% 處的顔色
}],
globalCoord: false // 預設為 false
},
width: 3
}
},
areaStyle: {
normal: {
color: "rgba(51,255,255,0.3)",
}
},
markLine: { // 圖表标線。
silent: false, // 圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
symbol: ["", "arrow"], // 标線兩端的标記類型，可以是一個數組分别指定兩端，也可以是單個統一指定，具體格式見 data.symbol。
// 标線的資料數組。每個數組項可以是一個兩個值的數組，分别表示線的起點和終點，每一項是一個對象，有下面幾種方式指定起點或終點的位置。
data: [{ // 直接用 type 屬性标注系列中的最大值，最小值。這時候可以使用 valueIndex 或者 valueDim 指定是在哪個次元上的最大值、最小值、平均值。
name: '平均數',
type: 'average' // 支援 'average', 'min', 'max'
}],
precision: 0, // 标線數值的精度，在顯示平均值線的時候有用。
label: { // 标線的文本。
normal: {
formatter: '平均數:\n{c}人'
}
},
lineStyle: { // 标線的樣式
normal: {
color: '#fff',
}
}
}
}, {
name: '占位背景',
type: 'bar',
itemStyle: {
normal: {
show: true,
color: '#fff',
opacity: 0
}
},
silent: true, // 圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
barWidth: '50%', // 柱條寬度
data: dataZ, // 占位背景在y軸上的值(高度)
animation: false // 是否開啟動畫
}, {
name: '占位背景',
type: 'bar',
itemStyle: {
normal: {
show: true,
color: '#fff',
opacity: 0.1
}
},
silent: true,
barWidth: '50%',
barGap: 0, // 柱間距離
data: dataZ,
animation: false
}],
};
// 使用剛指定的配置項和資料顯示圖表
chart1.setOption(option)
</script>
想要使用該圖表,隻需要 複制以上代碼 ,再下載下傳 echarts.js 在頁面檔案中引入即可.
echarts.js 下載下傳連結: http://echarts.baidu.com/download.html
