【echarts】 柱状图,最后带“竖线”

在这里插入图片描述

在这里插入图片描述

具体:

https://echarts.zhangmuchen.top/#/detail?cid=28ea6-0601-e9f5-9cc29-c022b758

let data = [
      {value: 0,name: '数据格式一'},
      {value: 55,name: '数据格式二'},
      {value: 66,name: '数据格式三'},
      {value: 75,name: '数据格式四'},
      {value: 20,name: '数据格式五'}
  ];

  getArrByKey = (data, k) => {
      let key = k || 'value';
      let res = [];
      if (data) {
          data.forEach(function (t) {
              res.push(t[key]);
          });
      }
      return res;
  };
  getSymbolData = (data) => {
      let arr = [];
      for (var i = 0; i < data.length; i++) {
          arr.push({
              value: data[i].value,
              symbolPosition: 'end',
          });
      }
      return arr;
  };

  option = {
      backgroundColor:"",
      grid: {
          top:'2%',
          bottom:'2%',
          right:'2%',
          left:'2%',
          containLabel: true,
      },
      xAxis: {
          show: false,
      },
      yAxis: [
          {
              triggerEvent: true,
              show: true,
              inverse: true,
              data: getArrByKey(data, 'name'),
              axisLine: {
                  show: false,
              },
              splitLine: {
                  show: false,
              },
              axisTick: {
                  show: false,
              },
              axisLabel: {
                  interval: 0,
                  inside: true,
                  color: '#000',
                  margin:0,
                  padding: [0, 0, 15, 0],
                  align: 'left',
                  verticalAlign:'bottom',
                  formatter: function (value, index) {
                      return '{title|' + value + '}';
                  },
                  rich: {
                      title: {
                          width: 50,
                          fontSize: 14,
                      },
                  },
              },
          },
          {
              triggerEvent: true,
              show: true,
              inverse: true,
              data: getArrByKey(data, 'name'),
              axisLine: {
                  show: false,
              },
              splitLine: {
                  show: false,
              },
              axisTick: {
                  show: false,
              },
              axisLabel: {
                  margin: 0,
                  interval: 0,
                  inside: true,
                  padding: [0, 0, 15, 0],
                  color: '#000',
                  fontSize: 14,
                  align: 'right',
                  verticalAlign: 'bottom',
                  formatter: function (value, index) {
                      return data[index].value+"个";
                  },
              },
          },
      ],
      series: [
          {
              type: 'bar',
              showBackground: true,
              barMinWidth:'10',
              backgroundStyle: {
                  opacity: 1,
                  color: '#1f4365',
              },
              yAxisIndex: 0,
              data: data,
              barWidth: 20,
              // align: left,
              stack: "2",
              itemStyle: {
                  normal: {
                      //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                          {
                              offset: 0,
                              color: "#00d5fc",
                          },
                          {
                              offset: 1,
                              color:  "#1280eb",
                          },
                      ]),
                  },
              }
          },
          {
              type: 'pictorialBar',
              symbol: 'rect',
              symbolSize: [4, 30],
              symbolOffset: [3, 0],
              zlevel: 13,
              barMinHeight:1,
              symbolPosition: 'end',
              itemStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                          offset: 0,
                          color: '#FBDD9E'
                      }, {
                          offset: 1,
                          color: '#FFFFFF'
                      }]),
                      shadowBlur: 5,
                      shadowOffsetY: 2,
                      shadowColor: 'rgba(0, 0, 0, 0.72)'
                  }
              },
              data: data,
          },
      ],
  };

参考:
https://echarts.zhangmuchen.top/#/detail?cid=28ea6-0601-e9f5-9cc29-c022b758

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值