前面用到的更多的是單個統(tǒng)計圖忿族，有些統(tǒng)計圖里面谅将，使用柱狀圖折線圖混合使用的逮走，下面寫的是用ajax+json本地模擬數(shù)據(jù)鸠蚪，發(fā)送請求，渲染出一個柱狀圖折線圖混合圖表师溅。
一個練手的小demo茅信，僅供參考：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱狀圖折線圖混合使用</title>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<style>
.charts6 {
background: #0d1c2e;
}
</style>
<body>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 charts6">
<div id="main3" style="height: 200px;"></div>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
// 折線圖
$.ajax({
url: "test.json",
data: {},
type: 'GET',
success: function(data) {
console.log(JSON.stringify(data))
dFun(data.echatX, data.echatY, data.echatY2);
},
});
// 基于準(zhǔn)備好的dom，初始化echarts實例
var dChart = echarts.init(document.getElementById('main3'));
// 指定圖表的配置項和數(shù)據(jù)
function dFun(x_data, y_data, y2_data) {
dChart.setOption({
title: {
left: 'left',
text: '概率',
show: false
},
tooltip: {
trigger: 'axis',
formatter: '{a}:{c}',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {
show: false,
top: '30',
bottom: '60',
right: '60',
left: '60'
},
legend: {
show: true,
selectedMode: 'single', // 設(shè)置顯示單一圖例的圖形墓臭，點擊可切換
bottom: 10,
left: 50,
textStyle: {
color: '#666',
fontSize: 12
},
itemGap: 20,
inactiveColor: '#ccc'
},
xAxis: {
splitLine: { show: false },
type: 'category',
data: x_data,
axisPointer: {
type: 'shadow'
},
// 改變x軸顏色
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 這里是為了突出顯示加上的
}
},
axisTick: {
show: true,
interval: 0
},
},
// 設(shè)置兩個y軸蘸鲸，左邊顯示數(shù)量，右邊顯示概率
yAxis: [{
splitLine: { show: false },
type: 'value',
name: '數(shù)量',
max: 1000,
min: 0,
show: true,
interval: 500,
// 改變y軸顏色
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 這里是為了突出顯示加上的
}
},
},
// 右邊顯示概率
{
splitLine: { show: false },
type: 'value',
name: '概率',
min: 0,
max: 100,
interval: 10,
// 改變y軸顏色
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 這里是為了突出顯示加上的
}
},
axisLabel: {
formatter: '{value} %'
}
}
],
// 每個設(shè)備分?jǐn)?shù)量窿锉、概率2個指標(biāo)酌摇，只要讓他們的name一致膝舅，即可通過，legeng進(jìn)行統(tǒng)一的切換
series: [{
name: '',
type: 'bar',
symbol: 'circle', // 折線點設(shè)置為實心點
symbolSize: 6, // 折線點的大小
data: y_data,
barWidth: '50%',
},
{
//折線
name: '',
type: 'line',
symbol: 'circle', // 折線點設(shè)置為實心點
symbolSize: 6, // 折線點的大小
yAxisIndex: 1, // 這里要設(shè)置哪個y軸窑多，默認(rèn)是最左邊的是0仍稀，然后1，2順序來埂息。
data: y2_data,
symbolSize: 10,
itemStyle: {
normal: {
color: "#DDA0DD"
}
}
},
]
});
}
</script>
</html>
自己寫的一個test.json模擬數(shù)據(jù)：
{
"echatX": [
"2019-07-02",
"2019-07-03",
"2019-07-04",
"2019-07-05",
"2019-07-06",
"2019-07-07",
"2019-07-08",
"2019-07-09",
"2019-07-10",
"2019-07-11",
"2019-07-12",
"2019-07-13",
"2019-07-14",
"2019-07-15"
],
"echatY": [
501,210,123,333,445,157,151,369,101,101,350,435,153,100
],
"echatY2": [
80,40,13,36,57,77,41,39,61,31,60,73,33,50
],
"peopleTotal":15,"peopleOnline":4,"peopleOutline":12,"ranges":[]
}
原文作者：祈澈姑娘 技術(shù)博客：http://www.reibang.com/u/05f416aefbe1
90后前端妹子技潘，愛編程，愛運營千康，文藝與代碼齊飛享幽，魅力與智慧共存的程序媛一枚。
