Echarts柱状图细线

echarts yekong

wanjunshijiecom 2021-08-31 at 08.17.36


drawLine () {
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var colorlist = ['rgba(0, 118, 178, 1)'
        , 'rgba(144, 0, 178, 1)',
        'rgba(0, 178, 83, 1)',
        'rgba(178, 0, 67, 1)',
        'rgba(178, 113, 0, 1)',
        'rgba(178, 0, 6, 1)',
        'rgba(0, 136, 85, 1)',
        'rgba(208, 63, 213, 1)',
        'rgba(255, 170, 0, 1)',
        'rgba(0, 106, 0, 1)',
        'rgba(0, 209, 242, 1)',
        'rgba(101, 93, 21, 1)',
        'rgba(178, 0, 125, 1)',
        'rgba(135, 163, 255, 1)',
        'rgba(130, 199, 61, 1)',
        'rgba(255, 119, 119, 1)',
        'rgba(21, 91, 232, 1)',
        'rgba(233, 195, 5, 1)',
      ]
      var datas = []
      var data1 = [5000, 2600, 1300, 1300, 1250, 1500, 5000, 2600, 1300, 1300]
      for (var i = 0; i < data1.length; i++) {
        var data = {
          value: data1[i],
          itemStyle: {
            normal: {
              color: colorlist[i]
            }
          },
          label: {
            normal: {
              show: true,
              lineHeight: 30,
              width: 60,
              height: 30,
              backgroundColor: colorlist[i],
              borderRadius: 200,
              position: ['-28', '-30'],
              distance: 1,
              formatter: [
                ' {a|{c}}'
              ].join(','),
              rich: {
                d: {
                  color: '#3CDDCF',
                },
                a: {
                  color: '#fff',
                  align: 'center',
                }
              }
            }
          }
        }
        datas.push(data)
      }
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '15%',
          right: '3%',
          left: '6%',
          bottom: '12%'
        },
        xAxis: [{
          type: 'category',
          data: ['2021-09-01', '2021-09-02', '2021-09-03', '2021-09-04', '2021-09-05', '2021-09-06', '2021-09-07', '2021-09-08', '2021-09-09', '2021-09-10'],
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            }
          },
          axisLabel: {
            margin: 10,
            color: '#e2e9ff',
            textStyle: {
              fontSize: 14
            },
          },
        }],
        yAxis: [{
          axisLabel: {
            formatter: '{value}',
            color: 'rgba(153, 210, 255, 1)',
            fontSize: 14,
          },
          axisTick: { //y轴刻度线
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,1)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            }
          }
        }],
        series: [
          {
            type: 'bar',
            data: datas,
            barWidth: '1px',
          }
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
喜欢