一：柱狀圖改變顏色
圖片.png
代碼：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!-- 柱狀統計圖 --><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">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據myChart.setOption({title: {text: '平均耗時（分鐘）',},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服務', '洗車', '總檢', '噴漆', '鈑金', '機修', '等號']},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><!-- 柱狀統計圖 --><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">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據myChart.setOption({title: {text: '平均耗時（分鐘）',},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服務', '洗車', '總檢', '噴漆', '鈑金', '機修', '等號']},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，產品經理，微信小程序，Python等10G資源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入門與實戰全套詳細視頻教程
image
原文作者：祈澈姑娘
原文鏈接：https://www.jianshu.com/u/05f416aefbe1
創作不易，轉載請告知
90后前端妹子，愛編程，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。
密鑰加密系統、數字簽名、數字證書的一些概念)
)
)