Echarts

https://gallery.echartsjs.com/explore.html#sort=rank_{timeframe=all}author=all

• tooltip改变前面标注小圆点等的大小

tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle: {
            color: '#fff', // 文字颜色
            fontSize: 30
          },
          formatter: (params) => {
            let result = ''
            params.forEach((item) => {
              if (item.seriesName !== '曲线图') {
                const dotHtml = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:20px;height:20px;background:${item.color}"></span>`
                result += dotHtml + item.seriesName + ':' + item.data + '<br/>'
              }
            })
            return result
          }
        },

• 柱形渐变

  
  image.png

        this.four.chart = this.$echarts.init(document.getElementById('yearAverage'))
      this.four.data = [
        {
          value: 120,
          name: 'CO2'
        }, {
          value: 200,
          name: 'CO'
        }, {
          value: 150,
          name: 'NO'
        }, {
          value: 200,
          name: 'SO2'
        }
      ]
      const values = this.four.data.map(m => m.value)
      const names = this.four.data.map(m => m.name)

      const option = {
        tooltip: {
          show: true,
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,0.5)',
          textStyle: {
            fontSize: 40
          },
          formatter: '{b}: {c}'
        },
        grid: {
          top: '15%',
          right: '1%',
          bottom: '15%'
          // containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['某地固废', '某地固废', '某地固废', '某地固废'],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#6076AD',
              width: 3
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: 'rgba(112, 138, 204, 1)',
            fontSize: 46,
            margin: 40,
            'interval': 0
          }
        },
        yAxis: {
          min: 0,
          max: 250,
          axisLine: {
            show: false // 隐藏Y轴线段
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            color: 'rgba(112, 138, 204, 1)',
            fontSize: 46,
            margin: 20,
            'interval': 0
          }
        },
        series: [
          { // 为了显示底部字所以这里data为空数组
            type: 'bar',
            barWidth: 137,
            z: 2,
            data: [0, 0, 0, 0],
            itemStyle: {
              normal: {
                color: 'transparent'
              }
            },
            label: {
              normal: {
                color: '#fff',
                show: true,
                fontSize: 50,
                // position: ['60%', '30%'],
                // label 的position位置可以是top bottom left,right,也可以是固定值
                // 在这里需要上下统一对齐,所以用固定值
                position: 'top',
                formatter: (data) => {
                  return names[data.dataIndex] ? names[data.dataIndex] : ''
                }
              }
            }
          },
          {
            type: 'bar',
            barWidth: 137,
            barGap: '-100%',
            z: 1,
            data: values,
            itemStyle: {
              normal: {
                color: (params) => {
                  const colorList = [
                    ['rgba(63,40,208,1)', 'rgba(2,130,222,1)'],
                    ['rgba(252,149,1,1)', 'rgba(254,215,1,1)'],
                    ['rgba(1,129,222,1)', 'rgba(103,224,227,1)'],
                    ['rgba(254,65,27,1)', 'rgba(254,155,26,1)']
                  ]
                  let index = params.dataIndex
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [
                      { offset: 0, color: colorList[index][0] },
                      { offset: 1, color: colorList[index][1] }
                    ])
                }
              }
            },
            label: {
              show: true,
              fontSize: 50,
              position: 'top',
              color: '#0EFCFF',
              formatter: (params) => {
                return params.value
              }
            }
          }
        ]
      }
      this.four.chart.setOption(option, true)