【前端统计图】echarts改变颜色属性的demo
生活随笔
收集整理的這篇文章主要介紹了
【前端统计图】echarts改变颜色属性的demo
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一：柱狀圖改變顏色
圖片.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
福利二：微信小程序入門與實戰全套詳細視頻教程
原文作者：祈澈姑娘
原文鏈接：https://www.jianshu.com/u/05f416aefbe1
創作不易，轉載請告知
90后前端妹子，愛編程，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。
轉載于:https://www.cnblogs.com/wangting888/p/9701858.html
總結
以上是生活随笔為你收集整理的【前端统计图】echarts改变颜色属性的demo的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2018最新银联借记卡境外取现手续费（收
- 下一篇： 广发银行信用卡邮购分期是什么？怎么办理？