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