<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>行业态势</title>
<style>
#main1{
border: 1px solid red;
width: 90%;
height: 600px;
text-align: center;
padding-left: 1% !important;
padding-right: 1% !important;
}
</style>
</head>
<body>
<div class="box_con" id="main1">
</div>
<script type="text/javascript" src="../js/echarts.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.scrollbox.js"></script>
<script type="text/javascript">
/* 1、https://blog.csdn.net/David_jiahuan/article/details/80096922?utm_source=blogxgwz1
修改Echarts图表legend的排列问题 title问题--orient: ‘horizontal‘,
*/
var data11 = [‘中标金额（万）‘, ‘中标数（个）‘];
var data12 = [‘西安‘, ‘铜川‘, ‘咸阳‘, ‘宝鸡‘,‘西安‘, ‘铜川‘, ‘咸阳‘, ‘宝鸡‘];
var data13 = [40, 80, 20, 56,40, 80, 20, 56];
var data14 = [48, 95, 20, 56,48, 95, 60, 56];
var data15 = {text: ‘loading‘,color: ‘blue‘,textColor: ‘red‘,maskColor: ‘rgba(0, 0, 0, 0.1‘,zlevel: 0}
var myChart = echarts.init(document.getElementById(‘main1‘));
myChart.showLoading(data15);
setTimeout(function(){loadChart1(data11,data12,data13,data14)}, 1000);
function loadChart1(data11,data12,data13,data14){
option = {
legend: {
data:data11 ,
textStyle: {
color: "#999"
},
itemWidth: 12,
itemHeight: 10,
// itemGap: 35
},
grid: {
top: ‘20%‘,
right: ‘5%‘,
left: ‘5%‘,
bottom: ‘12%‘
},
xAxis: [{
type: ‘category‘,
color: ‘#59588D‘,
data:data12 ,
axisLabel: {
color: ‘#999‘,
textStyle: {
fontSize: 12
},
},
axisLine: {
lineStyle: {
color: ‘rgba(107,107,107,0.37)‘,
}
},
axisTick: {
show: false
},
}],
yAxis: [{
min: 0,
max: 100,
axisLabel: {
formatter: ‘{value}‘,
color: ‘#999‘,
textStyle: {
fontSize: 10
},
},
axisLine: {
lineStyle: {
color: ‘rgba(107,107,107,0.37)‘,
}
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: ‘rgba(131,101,101,0.2)‘,
type: ‘dashed‘,
}
}
}],
series: [{
name: ‘中标金额（万）‘,
type: ‘bar‘,
data: data13,
min: 0,
max: 1000000,
interval:500,
barWidth: ‘12‘,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: ‘#ff347c‘ // 0% 处的颜色
}, {
offset:0.5,
color: ‘#017cee‘ // 100% 处的颜色
}, {
offset: 1,
color: ‘#1ed584‘ // 100% 处的颜色
}], false),
barBorderRadius: [50, 50, 50, 50],
}
},
label: {
normal: {
show: true,
fontSize: 10,
color: ‘#333‘,
position: ‘top‘,
}
}
},{
data: data14,
type: ‘line‘,
smooth: true,
name: ‘中标数（个）‘,
symbol: ‘none‘,
lineStyle: {
color: ‘#ff6262‘,
width: 4,
shadowColor: ‘rgba(0, 0, 0, 0.3)‘,//设置折线阴影
shadowBlur: 15,
shadowOffsetY: 5,
}
}
]
};
myChart.setOption(option);
myChart.hideLoading(data15);
}
</script>
</body>
</html>
原文：https://www.cnblogs.com/xiedashi/p/15202101.html