效果图
源代码
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.showLoading();
$.get('data/asset/data/confidence-band.json', function (data) {
myChart.hideLoading();
var base = -data.reduce(function (min, val) {
return Math.floor(Math.min(min, val.l));
}, Infinity);
myChart.setOption(option = {
title: {
text: 'Confidence Band',
subtext: 'Example in MetricsGraphics.js',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#ccc',
borderColor: '#aaa',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
textStyle: {
color: '#222'
}
}
},
formatter: function (params) {
return params[2].name + '<br />' + params[2].value;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: data.map(function (item) {
return item.date;
}),
axisLabel: {
formatter: function (value, idx) {
var date = new Date(value);
return idx === 0 ? value : [date.getMonth() + 1, date.getDate()].join('-');
}
},
splitLine: {
show: false
},
boundaryGap: false
},
yAxis: {
axisLabel: {
formatter: function (val) {
return (val - base) * 100 + '%';
}
},
axisPointer: {
label: {
formatter: function (params) {
return ((params.value - base) * 100).toFixed(1) + '%';
}
}
},
splitNumber: 3,
splitLine: {
show: false
}
},
series: [{
name: 'L',
type: 'line',
data: data.map(function (item) {
return item.l + base;
}),
lineStyle: {
normal: {
opacity: 0
}
},
stack: 'confidence-band',
symbol: 'none'
}, {
name: 'U',
type: 'line',
data: data.map(function (item) {
return item.u - item.l;
}),
lineStyle: {
normal: {
opacity: 0
}
},
areaStyle: {
normal: {
color: '#ccc'
}
},
stack: 'confidence-band',
symbol: 'none'
}, {
type: 'line',
data: data.map(function (item) {
return item.value + base;
}),
hoverAnimation: false,
symbolSize: 6,
itemStyle: {
normal: {
color: '#c23531'
}
},
showSymbol: false
}]
});
});;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
