這篇文章帶給大家的內容是關於echart中如何實現使用自訂單一柱狀顏色(附程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
專案實務上遇到一個根據需要,當X軸等於某個值是,柱狀變成特殊顏色的需求,大致上有兩個方案實現:
1、在前台遍歷資料對象,判斷設定;
2、在後台拼裝資料是,依照格式要求拼裝好;
具體程式碼如下:
方法一:
option = { title: { text: 'ECharts 示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], axisLabel: {color: 'green'} }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20], itemStyle: { color: function(params){ var c =''; if(params.value>20){ c='red' }else{ c='green' } return c; } } }] };
方法二:
option = { title: { text: 'ECharts 示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], axisLabel: {color: 'green'} }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, { value:'35', itemStyle: { color: 'orange' } }, 10, 10, 20] }] };
也可以二者結合使用,實現自己的特殊需求,如果讓後台實作則依照這個格式拼裝資料回到前台即可。希望對有類似需求的小夥伴,有幫助。
#以上是echart中如何實作使用自訂單一柱狀顏色(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!