收藏
回答

关于小程序引入echarts生成图表柱状图问题?标签?

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


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

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

最后一次编辑于  09-26  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    09-26

    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

            })()

        }]

    };


    09-26
    赞同 1
    回复 3
    • 思白
      思白
      09-27
      谢谢 很棒 很有用。。
      09-27
      回复
    • 思白
      思白
      09-27
      老哥 我问个问题 我通过动态传值进去给data了 data里面的方法没有计算 这是什么情况??
      09-27
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      09-28回复思白
      你弄个代码片段呗
      09-28
      回复
  • 思白
    思白
    09-27




    09-27
    赞同
    回复
问题标签