Echarts雷达图、柱状图使用实例，渐变、富文本，双轴自动对齐

数字看板系统Echarts使用实例

一、雷达图

1、图

2、需求

A、C两组各占一半圆，最大速度为268，根据平均速度大小显示不同的进度、颜色以及渐变、动物图，中间有分割线和间距。

3、步骤

1. 创建一个雷达图，series中设置左右两个data
2. 隐藏刻度axisTick，隐藏分割线splitLine，隐藏指针pointer，隐藏坐标轴线axisLabel
3. 控制radius半径和axisLine轴线宽度使得线条在背景框中
4. 通过控制左右两边半圆的初角度startAngle和末角度endAngle分为左右两边，并设置间隔，通过如endAngle= 268 - 176 * (left.speed / 268)来控制角度的占比
5. 通过title控制不同的动物图，通过detail控制速度，增加MarkLine中间的标记线，rich属性控制富文本显示如图中170m/m A

4、代码

//这里为右边半圆的配置
{
            name: 'right',
            type: 'gauge',//类型雷达图
            center: ['50%', '50%'],//位置
            startAngle: 450 - 180 * ((268 - right.speed) / 268),//初始角度，不同速度初始角度不同
            endAngle: 270,
            min: 268,
            max: 0,
            axisLabel: { //刻度文本
              show: false
            },
            radius: '87%', //半径
            axisLine: {
              show: false, // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 26,
                color: [[268, this.getColorBySpeed(right.speed)]], //不同的坐标轴线颜色
                shadowColor: '#e9e9e9'
              }
            },
            markLine: {  //标记线
              symbol: 'none',
              lineStyle: { type: 'solid' },
              symbolSize: 25,
              data: [
                [
                  {
                    x: '50%',
                    y: '32.5%',
                    lineStyle: { width: 1, color: '#d1d1d1' }
                  },
                  { x: '50%', y: '67.5%' }
                ]
              ]
            },
            splitLine: {  //分割线样式
              show: false
            },
            data: [
              {
                value: right.speed,
                name: right.name
              }
            ],
            axisTick: {  //刻度
              show: false
            },
            pointer: {  //雷达图指针
              show: false
            },
            title: this.getTitle(false, right.speed),  //标题，用于展示不同的动物图
            detail: this.getDetail(false, right.speed)  // 详情，用于展示速度和分组
          }

4.1、渐变

getColorBySpeed (speed) {
   return new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
      offset: 0,
      color: '#27e164'
    }, {
      offset: 1,
      color: '#20c556'
    }], false)
},

4.2、富文本

{
    formatter: function (paramas) {
      return '{number|' + paramas + '}{speed|m/m}' + '\n\n' + '{title| ' + title + '}'
    },
    rich: {
      number: {
        fontSize: 40,
        color: this.getTextColorBySpeed(speed)
      },
      speed: {
        fontSize: 25,
        color: '#333'
      },
      title: {
        fontSize: 40,
        color: '#333'
      }
    }
}

二、折线图

1、图

2、关键点

1. 左右Y坐标轴线自适应对齐,通过自适应最大值，一直分为6段

{
     min: 0,
     max: val => {
              const { max } = val
              const times = max / 6 // 倍数
              // 以下面6的倍数值为最大值，可以对齐
              const maxMap = [1, 2, 3, 5, 10, 20, 30]
              const resultMax = maxMap.find(v => v > times)
              return resultMax * 6
         },
}

2. 右侧Y坐标第一段间隔为90，而不是5

首先，将85的伪装成0:

axisLabel: {
          color: '#333',
              fontFamily: 'PingFang SC Regular',
              fontSize: 20,
              formatter: (params) => {
                return params === 85 ? '0.00%' : Number(params).toFixed(2) + '%'
              }
          }

然后，将小于85的按比例换算为85到90之间的值

value: v.value < 90 ? 85 + (5 / 90) * v.value : v.value//小于90的时候

3. 日期标记为起始和终止点

markPoint: {
  symbol: 'rect',
  symbolSize: [50, 20],
  symbolOffset: [0, '-80%'],
  data: markPointData,
  itemStyle: {
    color: '#1c97ff',
    shadowColor: '#b5b5b5',
    shadowBlur: 5,
    shadowOffsetX: 1,
    shadowOffsetY: 3
  },
  label: {
    formatter: params => {
      function formatter (date) {
        let monthDay = date.substr(date.indexOf('-') + 1)
        return monthDay.replace('-', '/')
      }
      return formatter(seriesData[params.dataIndex ? length : 0].date)
    }
  }
},
   // 下面是设置MarkPoint数据
  const startValue = seriesData[0].value
  const endValue = seriesData[length].value
  const markPointData = [
    { name: '第一天', value: startValue, xAxis: 0, yAxis: startValue }
    { name: '最后一天', value: endValue, xAxis: length, yAxis: endValue }
  ]

三、柱状图

1、图

2、关键点

1. 图例颜色根据数值大小比较变化

2. 柱条颜色变化