echarts更改x和y軸的顏色
阿新 • • 發佈:2021-08-19
作者:明月人倚樓<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一個 ECharts 例項</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body> <!-- 為ECharts準備一個具備大小(寬高)的Dom --> <div id="main" style="width: 800px;height:400px; background: #fff;"></div> <script type="text/javascript"> // 基於準備好的dom,初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和資料 var option = { title: { text: '第一個 ECharts 例項' }, tooltip: {}, legend: { data: ['銷量'] }, xAxis: { data: ["土地、房屋及建築物", "遇用裝置", "遇用裝置", "褲子", "傢俱、用具、裝具及動植物", "襪子"], axisLabel : {//座標軸刻度標籤的相關設定。 interval:0, rotate:"45", //表示的角度傾斜45度 // 更改x軸文字顏色的配置 textStyle: { color: '#ffb6c1 ',//處理x軸的文字顏色【粉色】 } }, // 更改x軸線的顏色 axisLine:{ lineStyle:{ color:'#d9d9d9', width:1, //x軸線的寬度 } } }, yAxis: { // 更改y軸線的顏色 // axisLine:{ // lineStyle:{ // color:'#d9d9d9', // width:1, //x軸線的寬度 // } // } // 將y軸的線去除掉 // axisLine:{ // show:false // }, }, series: [{ name: '銷量', type: 'bar', itemStyle: { normal: { // 這裡就可以實現,配置柱狀圖的顏色 color: function (params) { var colorList = [ '#ccc', '#c101c1', '#FCCE10', '#E87C25', '#27727B', '#D7504B']; return colorList[params.dataIndex] }, } }, data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> </body> </html>
出處:https://www.cnblogs.com/IwishIcould/
想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯絡你;(っ•̀ω•́)っ✎⁾⁾!
如果覺得這篇文章對你有小小的幫助的話,記得在右下角點個“推薦”哦,或者關注博主,在此感謝!
萬水千山總是情,打賞5毛買辣條行不行,所以如果你心情還比較高興,也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾!
想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯絡你;(っ•̀ω•́)っ✎⁾⁾!
如果文中有什麼錯誤,歡迎指出。以免更多的人被誤導。