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