title: {
text: '健康人数统计',
// subtext:'',
x: 'center',
y: '7px',
textStyle: {
color: '#3A7BD5',
fontSize: 16
},
textAlign: 'left'
},
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" class="col-md-12 col-sm-12 col-xs-12" style="height: 400px;"></div>
<script>
// 叠堆折线图数据请求
$.ajax({
url: "data.json",
data: {},
type: 'GET',
success: function(data) {
aFun(data.echatX, data.echatY, data.echatY2);
},
});
// 基于准备好的dom，初始化echarts实例
var aChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
function aFun(x_data, y_data, y2_data) {
aChart.setOption({
title: {
text: '健康人数统计',
// subtext:'',
x: 'center',
y: '7px',
textStyle: {
color: '#3A7BD5',
fontSize: 16
},
textAlign: 'left'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
x: '450px',
y: 'right',
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 16
},
data: ['正常', '异常']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
splitLine: {
show: false
},
/* 改变x轴颜色 */
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 这里是为了突出显示加上的
}
},
data: x_data,
},
yAxis: {
splitLine: {
show: false
},
type: 'value',
scale: true,
name: '',
max: 150,
min: 0,
splitNumber: 5,
// 改变y轴颜色
axisLine: {
lineStyle: {
color: '#00a2e2',
width: 1, // 这里是为了突出显示加上的
}
},
},
series: [{
name: '正常',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#1362f2" // 0% 处的颜色
}, {
offset: 0.6,
color: "#3278f8" // 60% 处的颜色
}, {
offset: 1,
color: "#5490ff" // 100% 处的颜色
}], false)
}
},
data: y_data
},
{
name: '异常',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#e67726" // 0% 处的颜色
}, {
offset: 0.6,
color: "#f48c47" // 60% 处的颜色
}, {
offset: 1,
color: "#fe9d62" // 100% 处的颜色
}], false)
}
},
data: y2_data
}
]
});
}
</script>
</body>
</html>
json
{
"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-15"
],
"echatY": [
120,121,123,123,125,127,128,129,122
],
"echatY2": [
60,64,63,63,65,67,68,69,65
]
}
网友评论