一：柱狀圖改變顏色
圖片.png
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 柱狀統(tǒng)計(jì)圖 -->
<div class="row">
<div id="main" style="width: 900px; height: 350px; margin-top:80px;"></div>
</div>
</body>
<script src="../../js/echarts/echarts.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
myChart.setOption({
title: {
text: '平均耗時(shí)（分鐘）',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
/* data: [ '2012年']*/
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['SA服務(wù)', '洗車', '總檢', '噴漆', '鈑金', '機(jī)修', '等號(hào)']
},
series: [{
name: '2012年',
type: 'bar',
itemStyle: {
normal: {
color: '#a8bcd4'
}
},
data: [10, 20, 31, 14, 11, 67]
}
]
});
</script>
</html>
二：橫向柱狀圖漸變
圖片.png
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 柱狀統(tǒng)計(jì)圖 -->
<div class="row">
<div id="main" style="width: 900px; height: 350px; margin-top:80px;"></div>
</div>
</body>
<script src="../../js/echarts/echarts.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
myChart.setOption({
title: {
text: '平均耗時(shí)（分鐘）',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
/* data: [ '2012年']*/
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['SA服務(wù)', '洗車', '總檢', '噴漆', '鈑金', '機(jī)修', '等號(hào)']
},
series: [{
name: '2012年',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#fff'
}, {
offset: 1,
color: '#3fa7dc'
}]),
}
},
data: [10, 20, 31, 14, 11, 67]
}
]
});
</script>
</html>
文末福利：
福利一：前端，Java，產(chǎn)品經(jīng)理，微信小程序，Python等10G資源合集大放送：http://www.itdecent.cn/p/e8197d4d9880
福利二：微信小程序入門與實(shí)戰(zhàn)全套詳細(xì)視頻教程
image
原文作者：祈澈姑娘
原文鏈接：http://www.itdecent.cn/u/05f416aefbe1
創(chuàng)作不易，轉(zhuǎn)載請(qǐng)告知
90后前端妹子，愛編程，愛運(yùn)營(yíng)，愛折騰。
堅(jiān)持總結(jié)工作中遇到的技術(shù)問題，堅(jiān)持記錄工作中所所思所見，歡迎大家一起探討交流。
