关于小程序引入echarts生成图表柱状图问题?标签?
发布于 6 年前 作者 yong80 12490 次浏览 来自 官方Issues

实现了不同的数据展示不同的柱状图,如下:

也从网上查看了渐变柱状图,如下:

但是都不是我要的柱状图,我想问一下echarts渐变色怎么样加判断?数值低于1的显示蓝色,数值大于1的显示红色?像这个样子:

这是一个柱子,超过部分显示另一个颜色,求解!

2 回复

var mydata = [0.6, 1.01, 1.1, 2],

split = 1, // 超过多少显示另一种颜色

option = {

    backgroundColor: “#ffffff”,

    color: ["#37A2DA", “#FF9F7F”],

    tooltip: {

        trigger: ‘axis’,

        formatter: function (res) {

            return res[0].seriesName + “:” + mydata[res[0].dataIndex]

        },

        axisPointer: {

            type: ‘shadow’

        }

    },

    grid: {

        containLabel: true

    },

    xAxis: [{

        type: ‘category’,

        data: [‘篮球’, ‘排球’, ‘足球’, ‘羽毛球’],

        axisTick: {

            show: true,

            alignWithLabel: true

        },

        axisLine: {

            lineStyle: {

                color: ‘#132C57’

            }

        },

        axisLabel: {

            color: ‘#132C57’

        }

    }],

    yAxis: [{

        type: ‘value’

    }],

    series: [{

        tooltip: {

            show: false

        },

        type: ‘bar’,

        stack: ‘总量’,

        barWidth: ‘70%’,

        data: (function () {

            var _d = []

            mydata.forEach(function (v, i) {

                if (v > split ) {

                    _d.push(split)

                } else {

                    _d.push(v)

                }

            })

            return _d

        })()

    }, {

        name: ‘女生’,

        type: ‘bar’,

        stack: ‘总量’,

        barWidth: ‘70%’,

        label: {

            normal: {

                show: true,

                position: ‘top’,

                color: ‘red’,

                fontSize: 24,

                formatter: function (res) {

                    return mydata[res.dataIndex]

                }

            }

        },

        data: (function () {

            var _d = []

            mydata.forEach(function (v, i) {

                var t = v - split

                if (t > 0) {

                    _d.push(t)

                } else {

                   _d.push(0)

                }

            })

            return _d

        })()

    }]

};

回到顶部