echarts 横向柱状图

发布于:2024-06-03 ⋅ 阅读:(76) ⋅ 点赞:(0)

var option_1 = {

  title: {

    show: true,

    text: '车间前一天单件用电量',

    subtext: nameArr,

    x: 'center',

    textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}

      color: '#FFFFFF',

      "fontFamily": 'Microsoft YaHei',

    },

    subtextStyle: {

      color: '#FFFFFF',

      fontFamily: 'Microsoft YaHei',

      fontSize: 16

    }

  },

  tooltip: {

    trigger: 'axis',

    axisPointer: {

      type: 'shadow'

    }

  },

  grid: {

    top: '16%',

    left: '3%',

    right: '4%',

    bottom: '6%',

    containLabel: true

  },

  xAxis: {

    type: 'value',

    name: '',

    nameTextStyle: {

      padding: [0, 0, -80, -270]    // 四个数字分别为上右下左与原位置距离

    },

    axisLabel: {

      formatter: '{value}'

    },

    splitLine: {

      show: false

    },

    axisLine: {

      show: true,

      lineStyle: {

        width: 2,

        color: 'rgb(34,144,231)',//y轴的轴线的宽度和颜色

      }

    }

  },

  yAxis: {

    type: 'category',

    data: d.n3,

    splitLine: {

      show: false

    },

    axisLine: {

      show: true,

      lineStyle: {

        width: 2,

        color: 'rgb(34,144,231)',//y轴的轴线的宽度和颜色

      }

    },

    axisLabel: {

      color: 'rgb(251,240,50)',  //y轴上的字体颜色

      fontSize: 17

    },

  },

  series: [

    {

      name: '单件用电量',

      type: 'bar',

      barWidth: '50%',

      data: numArr.map(item => {

        if (item * 1.00 > 2) {

          console.log('item====', item)

          return {

            value: item,

            itemStyle: {

              color: '#F33'

            }

          }

        }

        return item

      }), markLine: {

        symbol: ['none', 'none'], // 去掉箭头

        label: {

          show: false,

          position: 'start',

          formatter: '{b}'

        },

        data: [

          {

            name: '阈值',

            xAxis: 2

          }

        ],

        lineStyle: {

          color: 'red'

        }

      },




 

      itemStyle: {

        normal: {

          label: {

            show: true,  //开启显示

            position: 'right',  //在上方显示

            textStyle: {  //数值样式

              color: '#fff',

            }

          },

          color: function (params) {

            if (params.value > 2) {

              return 'red'

            } else {

              return '#00A3E0'

            }

          }

        }

      },

    }

  ]

};

var e_1 = echarts.init(document.getElementById("div_c1_r3"), "walden");

e_1.setOption(option_1);