資訊專欄INFORMATION COLUMN
項目實踐中遇到一個根據需要，當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]
? ? }]
};
也可以二者結合使用，實現自己的特殊需求，如果讓后臺實現則按照這個格式拼裝數據返回到前臺即可。希望對有類似需求的小伙伴，有所幫助。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114053.html
項目實踐中遇到一個根據需要，當X軸等于某個值是，柱狀變成特殊顏色的需求，大致有兩個方案實現： 1、在前臺遍歷數據對象，判斷設置； 2、在后臺拼裝數據是，按照格式要求拼裝好； 具體代碼如下： 方法一： option = { ? ? title: { ? ? ? ? text: ECharts 示例 ? ? }, ? ? tooltip: {}, ? ? legend: { ? ? ? ? data:...
項目實踐中遇到一個根據需要，當X軸等于某個值是，柱狀變成特殊顏色的需求，大致有兩個方案實現： 1、在前臺遍歷數據對象，判斷設置； 2、在后臺拼裝數據是，按照格式要求拼裝好； 具體代碼如下： 方法一： option = { ? ? title: { ? ? ? ? text: ECharts 示例 ? ? }, ? ? tooltip: {}, ? ? legend: { ? ? ? ? data:...
摘要：我們在開發應用的時候經常美工會設計一些樣式比較特殊的圖表，這對于前端開發人員來說會增加開發量，如下圖就是筆者開發過程中要求制作的帶漸變色效果的柱狀圖今天在這里教大家如何用原生和如何用圖表開發工具來實現。 我們在開發web應用的時候經常美工會設計一些樣式比較特殊的圖表，這對于前端開發人員來說會...
摘要：深夜學姐問我在中柱狀圖如何自定義頂部亮點先看效果圖我們可以看到圖中圖表不僅有漸變色，同時柱狀圖頂部位置有一個不相同的頂部亮點圖片接下來，我們一起來實現一下這個效果部分部分獲取元素左側名稱列表號 ...
閱讀 3242·2021-10-21 17:50
閱讀 3254·2021-10-08 10:05
閱讀 3380·2021-09-22 15:04
閱讀 581·2019-08-30 14:00
閱讀 1939·2019-08-29 17:01
閱讀 1508·2019-08-29 15:16
閱讀 3219·2019-08-26 13:25
閱讀 852·2019-08-26 11:44
