【前端统计图】echarts改变颜色属性的demo
生活随笔
收集整理的這篇文章主要介紹了
【前端统计图】echarts改变颜色属性的demo
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一：柱狀圖改變顏色
圖片.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資源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入門與實(shí)戰(zhàn)全套詳細(xì)視頻教程
原文作者：祈澈姑娘
原文鏈接：https://www.jianshu.com/u/05f416aefbe1
創(chuàng)作不易，轉(zhuǎn)載請(qǐng)告知
90后前端妹子，愛編程，愛運(yùn)營(yíng)，愛折騰。
堅(jiān)持總結(jié)工作中遇到的技術(shù)問題，堅(jiān)持記錄工作中所所思所見，歡迎大家一起探討交流。
轉(zhuǎn)載于:https://www.cnblogs.com/wangting888/p/9701858.html
總結(jié)
以上是生活随笔為你收集整理的【前端统计图】echarts改变颜色属性的demo的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2018最新银联借记卡境外取现手续费（收
- 下一篇： 初入HTML5