Using the echarts bar (histogram) data gap is too large, so some data is not 0, but the column cannot be seen

I met a need today. A traditional bar chart. In my heart, I think that I can finish the whole thing with echarts.

First step

const xlist = ["clothing", "Dinner", "Cosmetics", "Shoe bag leather goods", "Accessories", "Home life", "Non dinner", "Special services", "Special sale", "Recreation & Entertainment", "Digital appliances", "other", "Integrated services"]
const ylist = ["1092362.60", "591414.83", "442196.25", "239245.20", "222208.90", "82971.02", "63806.34", "39702.00", "31236.00", "11843.00", "11296.00", "506.00", "0"]
const chartColor = [
    "#7884f2",
    "#fa7882",
    "#f5d76e",
    "#3fc380",
    "#64c1f4",
    "#ec7063",
    "#f7ca84",
    "#87d37c",
    "#bcb9ed",
    "#dcb6f2",
    "#ffc5a1",
    "#8acfc2",
    "#4183d7",
    "#663399",
    "#d2527f",
    "#d2d7d3"
];
option = {
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "none"
        },
    },
    xAxis: {
        type: 'category',
        data: xlist
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: ylist,
        type: 'bar',
        itemStyle: {
            color: params => {
                return chartColor[params.dataIndex]
            }
        }
    }]
};

It can be seen that due to the large data gap, the data that is not 0 can not be seen in the chart. It may be misunderstood that the data is 0

Therefore, the product puts forward new requirements. When the data is not 0, the default height that the human eye can see should be set. When the data is 0, the height is not displayed

This is my first thought. There must be a way to deal with this situation. It is certain that the default height can be set

Sure enough, there's a way to set the default height

   series: [{
        data: ylist,
        type: 'bar',
        itemStyle: {
            color: params => {
                return chartColor[params.dataIndex]
            }
        },
        barMinHeight: 2   // Set the default height to 2
    }]

With the default height, the data gap is too large. All of them have default height. There is no problem of invisible columns

But it doesn't seem to meet the needs of the product. When the data is 0, the height is displayed.

Go to the documentation first to see if barMinHeight can accept a function. , this problem can't be solved in the document... So this idea is not parallel, so go to Baidu to see the ideas of the big guys.

Baidu says it can yAxis:type = "log". It can solve the problem that the data gap is too large and the data is too small to see the column. Let's try.

  yAxis: {
        type: 'log'
   },

On the whole, the problem seems to have been solved. The column is not displayed when the data is 0. But the other pillars don't look very beautiful. It's not irregular that they are all the same height. If the type is log, the data cannot be 0.

The solution is to change the data to 0.1 and then change the displayed value. Let's have a try

First change 0 in the data to 0.1
const ylist = ["1092362.60", "591414.83", "442196.25", "239245.20", "222208.90", "82971.02", "63806.34", "39702.00", "31236.00", "11843.00", "11296.00", "506.00", "0.1"]

//Second, change 0.1 in toolip to 0
tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "none"
        },
        formatter:(res)=>{
            const item = res[0]
            const value = item.value == 0.1 ? 0 : item.value
            return `${item.name}<br/>${item.marker} ${value}`
        }
    }
//After that, set yAxis to
 yAxis: {
        type: 'log',
         axisLabel: {
             formatter: function(v){
                console.log(v)
                return v == 0.1 ? 0 : v
             }
        }
    }

According to this change, the data is 0 and the column is displayed again, which does not meet the product demand. Change to change, and it will reach the original origin.

It seems that I have to come up with my ultimate move, "I can't change the bug and the demand.".

Finally, I think again and again, or try the original solution, setting the default height of barMinHeight to 2.

Then I left the default height of data 0 to be removed, so I thought about the above scheme. Since I can set the data 0 to 0.1, can I set the field of data 0 to null? Let's have a new try

const xlist = ["clothing", "Dinner", "Cosmetics", "Shoe bag leather goods", "Accessories", "Home life", "Non dinner", "Special services", "Special sale", "Recreation & Entertainment", "Digital appliances", "other", "Integrated services"]
const ylist = ["1092362.60", "591414.83", "442196.25", "239245.20", "222208.90", "82971.02", "63806.34", "39702.00", "31236.00", "11843.00", "11296.00", "506.00", null]
const chartColor = [
    "#7884f2",
    "#fa7882",
    "#f5d76e",
    "#3fc380",
    "#64c1f4",
    "#ec7063",
    "#f7ca84",
    "#87d37c",
    "#bcb9ed",
    "#dcb6f2",
    "#ffc5a1",
    "#8acfc2",
    "#4183d7",
    "#663399",
    "#d2527f",
    "#d2d7d3"
];
option = {
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "none"
        },
        formatter:(res)=>{
            const item = res[0]
            const value = item.value == null ? 0 : item.value
            return `${item.name}<br/>${item.marker} ${value}`
        }
    },
    xAxis: {
        type: 'category',
        data: xlist
    },
    yAxis: {
        type: 'value',
    },
    series: [{
        data: ylist,
        type: 'bar',
        itemStyle: {
            color: params => {
                return chartColor[params.dataIndex]
            }
        },
        barMinHeight: 2,
    }]
};

Perfect solution to the needs of the product... Some excitement!!!!

Tags: Front-end

Posted on Thu, 04 Jun 2020 21:06:57 -0700 by Osiris Beato