Echarts系列（一）柱状图

这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

渐变色柱子

通过series中 itemStyle color offset控制 可以有多个

series: [
          {
            name: '到站率',
            type: 'bar',
            barWidth: '60%',
            data: [100, 100, 70, 100, 100, 100],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#F5DF31'
                }, {
                  offset: 1,
                  color: '#2F9EFA'
                }]),
              }
            }
          }
        ]

一个柱子两个颜色

通过stack进行数据堆叠 相同数据会堆叠在一起

series: [
          {
            name: '到报率',
            type: 'bar',
            barWidth: '60%',
            stack: '数据',
            data: [100, 100, 70, 100, 100, 100, 90, 100],
            itemStyle: {
              normal: {
                color: '#0093FF'
              }
            }
          },
          {
            name: '缺报率',
            type: 'bar',
            barWidth: '60%',
            stack: '数据',
            data: [0, 0, 30, 0, 0, 0, 10, 0],
            itemStyle: {
              normal: {
                color: '#9260FC'
              }
            }
          }
     	]

柱状图带折线

通过新增series数据模型 type设置成line（线）

series: [
          {
            name: '到报率',
            type: 'bar',
            barWidth: '60%',
            stack: '数据',
            data: [100, 100, 70, 100, 100, 100, 90, 100],
            itemStyle: {
              normal: {
                color: '#0093FF'
              }
            }
          },
          {
            name: '及格率',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#0CEB83'
              }
            },
            data: [90, 90, 90, 90, 90, 90, 90, 90]
          }
     	]

第几个柱子颜色变化

柱子颜色变化是由itemStyle来控制，第几个柱子颜色变化可有data进行控制，具体写法如下：

series: [
          {
            name: '到报率',
            type: 'bar',
            barWidth: '60%',
            data: [100, 100, 70, 100, 100, 100, 90, 100],
            itemStyle: {
              normal: {
                color(params) {
                  const colorList = [];
                  if (params.data <= 90) {  //params.data = data数据
                    colorList.push('#8085E9');
                  } else {
                    colorList.push('#2ECFEC');
                  }
                  return colorList;
                }
              }
            }
          }
     	]

如果是固定每个柱子都不相同：

series: [
          {
          data: [120, 200, 150, 80],
          type: 'bar',
          itemStyle: {
            normal: {
              color(params) {
                const colorList = ['#32F5A3', '#2998EA', '#DED733', '#F28A32'];
                return colorList[params.dataIndex];
              }
            }
          }
        }
     ]

背景线条

xAxis和yAxis都是一样的 show 是否显示线条 type 坐标轴类型 axisLabel 刻度相关设置 设置颜色，字体样式大小等 axisLine 刻度线相关设置 splitLine 分割线相关设置

xAxis: [{
          type: 'category',
          data: ['故障', '告警', '异常', '禁止'],
          axisLabel: { // 刻度相关设置
            color: '#fff'
          },
          axisLine: { // 刻度线相关设置
            lineStyle: {
              color: '#7EB9E1'
            }
          },
          splitLine: { // 分隔线相关设置
            lineStyle: {
              color: '#7EB9E1'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            formatter() {  
              return '';  // 利用formatter y轴显示空白
            }
          },
          splitLine: {
            lineStyle: {
              color: '#7EB9E1'
            }
          },
          axisTick: { show: false },
          axisLine: {
            lineStyle: {
              color: '#e0e0e0'
            }
          },
        }],

持续更新中