<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>echarts增量设备贯通率图表代码 - 更多源码【www.96flw.com】</title>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="js/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
// dom.style.height=window.innerHeight+'px';
var myChart = echarts.init(dom,"westeros");
var app = {};
option = null;
// Generate data
var category = ['市区','万州','江北','南岸','北碚','綦南','长寿','永川','璧山','江津','城口','大足','垫江','丰都','奉节','合川','江津区','开州','南川','彭水','黔江','石柱','铜梁','潼南','巫山','巫溪','武隆','秀山','酉阳','云阳','忠县','川东','检修'];
var dottedBase = [];
var lineData = [18092,20728,24045,28348,32808
,36097,39867,44715,48444,50415
,56061,62677,59521,67560,18092,20728,24045,28348,32808
,36097,39867,44715,48444,50415,36097,39867,44715,48444,50415
,50061,32677,49521,32808];
var barData = [4600,5000,5500,6500,7500
,8500,9900,12500,14000,21500
,23200,24450,25250,33300,4600,5000,5500,6500,7500
,8500,9900,22500,14000,21500,8500,9900,12500,14000,21500
,23200,24450,25250,7500];
var rateData = [];
32808
for (var i = 0; i < 33; i++) {
// var date = i+2001;
// category.push(date)
var rate=barData[i]/lineData[i];
rateData[i] = rate.toFixed(2);
}
// option
option = {
backgroundColor: '#191E40',
title: {
text: '增量设备贯通情况-单位',
x: 'center',
y: 0,
textStyle:{
color:'#B4B4B4',
fontSize:16,
fontWeight:'normal',
},
},
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,0.1)',
axisPointer: {
type: 'shadow',
label: {
show: true,
backgroundColor: '#7B7DDC'
}
}
},
legend: {
data: ['已贯通', '计划贯通','贯通率',],
textStyle: {
color: '#B4B4B4'
},
top:'7%',
},
grid:{
x:'12%',
width:'82%',
y:'12%',
},
xAxis: {
data: category,
axisLine: {
lineStyle: {
color: '#B4B4B4'
}
},
axisTick:{
show:false,
},
},
yAxis: [{
splitLine: {show: false},
axisLine: {
lineStyle: {
color: '#B4B4B4',
}
},
axisLabel:{
formatter:'{value} ',
}
},
{
splitLine: {show: false},
axisLine: {
lineStyle: {
color: '#B4B4B4',
}
},
axisLabel:{
formatter:'{value} ',
}
}],
series: [{
name: '贯通率',
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 8,
yAxisIndex: 1,
itemStyle: {
normal: {
color:'#F02FC2'},
},
data: rateData
},
{
name: '已贯通',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#956FD4'},
{offset: 1, color: '#3EACE5'}
]
)
}
},
data: barData
},
{
name: '计划贯通',
type: 'bar',
barGap: '-100%',
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(156,107,211,0.5)'},
{offset: 0.2, color: 'rgba(156,107,211,0.3)'},
{offset: 1, color: 'rgba(156,107,211,0)'}
]
)
}
},
z: -12,
data: lineData
},
]
};
var app = {
currentIndex: -1,
};
setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
//console.log(app.currentIndex);
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: app.currentIndex,
});
// 显示 tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: app.currentIndex
});
}, 3000);
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
window.onresize = function(){
myChart.resize();
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
