Echarts柱状图折线图混合使用
前面用到的更多的是单个统计图，有些统计图里面，使用柱状图折线图混合使用的，下面写的是用ajax+json本地模拟数据，发送请求，渲染出一个柱状图折线图混合图表。javascript
一个练手的小demo，仅供参考：css
<!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);
},
});
// 基于准备好的dom，初始化echarts实例
var dChart = echarts.init(document.getElementById('main3'));
// 指定图表的配置项和数据
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', // 设置显示单一图例的图形，点击可切换
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
},
},
// 设置两个y轴，左边显示数量，右边显示几率
yAxis: [{
splitLine: { show: false },
type: 'value',
name: '数量',
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} %'
}
}
],
// 每一个设备分数量、几率2个指标，只要让他们的name一致，便可经过，legeng进行统一的切换
series: [{
name: '',
type: 'bar',
symbol: 'circle', // 折线点设置为实心点
symbolSize: 6, // 折线点的大小
data: y_data,
barWidth: '50%',
},
{
//折线
name: '',
type: 'line',
symbol: 'circle', // 折线点设置为实心点
symbolSize: 6, // 折线点的大小
yAxisIndex: 1, // 这里要设置哪一个y轴，默认是最左边的是0，而后1，2顺序来。
data: y2_data,
symbolSize: 10,
itemStyle: {
normal: {
color: "#DDA0DD"
}
}
},
]
});
}
</script>
</html>
本身写的一个test.json模拟数据：html
{
"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":[]
}
原文做者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。前端