echart使用自定義單個(gè)柱狀顏色實(shí)現(xiàn)

魏明發(fā)布于2019-08-02 11:45 / 1935人閱讀

項(xiàng)目實(shí)踐中遇到一個(gè)根據(jù)需要，當(dāng)X軸等于某個(gè)值是，柱狀變成特殊顏色的需求，大致有兩個(gè)方案實(shí)現(xiàn)：

1、在前臺(tái)遍歷數(shù)據(jù)對(duì)象，判斷設(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)即可。希望對(duì)有類似需求的小伙伴，有所幫助。