收藏
回答

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

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


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

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

回答关注问题邀请回答
收藏

2 个回答

  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    2019-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

            })()

        }]

    };


    2019-09-26
    有用 2
    回复 4
    • PG.
      PG.
      2019-09-27
      谢谢 很棒 很有用。。
      2019-09-27
      回复
    • PG.
      PG.
      2019-09-27
      老哥 我问个问题 我通过动态传值进去给data了 data里面的方法没有计算 这是什么情况??
      2019-09-27
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      2019-09-28回复PG.
      你弄个代码片段呗
      2019-09-28
      回复
    • 涟漪
      涟漪
      2020-06-18
      请问echarts柱状图是横着的。怎么改成竖着的呢
      2020-06-18
      回复
  • PG.
    PG.
    2019-09-27




    2019-09-27
    有用
    回复
登录 后发表内容
问题标签