一：柱状图改变颜色
图片.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后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
