Echarts在线免费图表

 
            const arrnew = [
   { mj: 1, zbx: '2016' },
   { mj: 2, zbx: '2017' },
   { mj: 3, zbx: '2018' },
   { mj: 4, zbx: '2019' },
   { mj: 5, zbx: '2020' }
]
let maxNum = 0
option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: '#F5F6F8',
          opacity: 0
        },
        label: {
          show: false
        }
      },
      className: 'my-tooltip-box',
      formatter: function (params) {
        var str = '<div class="my-tooltip">'
        params.forEach((el) => {
          if (el.value == 100 || el.seriesName == 'maxdata') return
          str += `${el.name}：${el.value}m²`
        })
        str += '</div>'
        return str
      }
    },
    xAxis: [
      {
        type: 'category',
        data: arrnew.map((item) => item.zbx),
        axisPointer: {
          type: 'shadow'
        },
        axisLabel: {
          fontFamily: 'PingFangSC, PingFang SC',
          fontSize: 16,
          color: '#6B6B6B'
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位：m²',
        splitLine: {
          show: false
        },
        axisLabel: {
          fontFamily: 'PingFangSC, PingFang SC',
          fontSize: 16,
          color: '#6B6B6B'
        },
        nameTextStyle: {
          fontFamily: 'PingFangSC, PingFang SC',
          fontSize: 16,
          padding: maxNum < 100 ? [0, 0, 0, 7] : maxNum < 801 ? [0, 8, 0, 0] : [0, 25, 0, 0],
          color: '#6B6B6B'
        }
      }
    ],
    series: [
      {
        // 背景色
        type: 'pictorialBar',
        name: '',
        symbol: 'fixed',
        symbolSize: [18, 3],
        symbolMargin: 2,
        symbolRepeat: 'repeat',
        symbolBoundingData: 300,
        data: arrnew.map((item) => item.mj),
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#828DEB' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#C2C9FD' // 100% 处的颜色
              }
            ]
          }
        },
        emphasis: {
          itemStyle: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#828DEB' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#C2C9FD' // 100% 处的颜色
                }
              ]
            }
          }
        },
        zlevel: 1
      },
      {
        name: 'maxdata',
        type: 'custom',
        itemStyle: {
          color: 'rgba(216, 230, 255, .2)'
        },
        renderItem: function (params, api) {
          //获取对应类目的axisTick中心点坐标
          var start = api.coord([api.value(0)])

          //通过坐标系的宽度和类目数，计算单个类目的背景
          var width = (params.coordSys.width / 7) * 0.7

          return {
            type: 'rect',
            shape: {
              // 相对左上角坐标
              x: start[0] - width / 2,
              y: params.coordSys.y,
              width: width,
              height: params.coordSys.height
            },
            style: api.style()
          }
        },
        // data: arrnew.map(() => maxNum + 100)
        data: arrnew.map(() => 0)
      }
    ]
  }