echarts 柱状图,分别给每个柱子设置不同的颜色

效果如图:

中见竖直的点划线为,markLine ,当markLike超出设定的数值时,颜色变成红色

 代码如下:(复制代码,即可查看效果)

数据格式:
var hl_YData =[6,9,5,8,10,1,4,2,1,2,2,2]
var hl_XData = ["50-100","100-150","150-200","200-250","250-300","300-350","350-400","400-450","1450-1500","3750-3800","3800-3850","3850-3900"]
var option = {
            tooltip: {
                trigger: 'item',

            },
            label:{ // 标题的位置
                position:'top',
                show:false
            },

            xAxis: {
                type: 'category',
                data: hl_XData,
                name:'mΩ',
                nameTextStyle:{ // name的样式
                    color:"#fff"
                },
                axisLabel:{
                    interval:0,
                    rotate:60,
                    textStyle: {
                        color: "#fff",
                        fontSize:'10px',
                    },

                },
                axisTick: {
                    show: false
                },
                axisLine: {//x轴线的颜色以及宽度
                    show: true,
                    lineStyle: {
                        color: "#fff",
                        type: "solid",
                        width: 1
                    }
                },
            },
            yAxis: {
                type: "value",
                name: "区间数量",
                nameTextStyle:{ // name的样式
                    color:"#fff"
                },
                axisLabel: { // y轴的文字样式
                    textStyle: {
                        color: "#fff"
                    },
                }
            },
            series: [
                {
                    data: hl_YData,
                    type: 'bar',
                    minBarWidth: hl_XData.length>7?20:35, // 根据数组的长度展示不同的柱子的宽度,当数据太多时,柱子变窄
                    itemStyle: {
                        normal: {
                            color:(val) => {
                                if (val.dataIndex <= hl_XData.indexOf('150-200')) { // 当柱子的数据未超过阈值
                                    var colorList = ['#97D7DB', '#97D7DB', '#EAE88A', '#EAE88A',];
                                    return colorList[val.dataIndex % 4]
                                } else { // 当超过阈值时
                                    return '#F7782C'
                                }
                            },
                            barBorderRadius: [10, 10, 0, 0],
                        },
                    },
                },
                {
                    type: 'bar',
                    markLine: {
                        silent: true, // 鼠标移动到标记线上无操作
                        symbol: "none",
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#ff0000',
                                }
                            }
                        },
                        label: {
                                    position: 'end', // 表现内容展示的位置
                                    formatter: '',  // 标线展示的内容
                                    color: '#8C8C8C'  // 展示内容颜色
                                },
                        data: [
                            {
                                xAxis: '150-200'
                            }

                        ]
                    }
                }

            ]
        }

  • 0
    点赞
  • 3
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:终极编程指南 设计师:CSDN官方博客 返回首页
评论

打赏作者

逆风优雅

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值