Echarts使用技巧

第一次写博客，记录一些在做项目过程中学习到的echarts相关的使用技巧。

 

1.  柱状图阴影

柱状图阴影有两种实现方式，第一种使用barGap属性设置为'-100%'来实现，第二种使用多坐标轴多图层覆盖实现。以下详细说明：

（1）barGap:

如果只是简单的但一系列的柱状图建议使用，实现简单，官方配置项手册也有说明，查看请点击echarts官方示例，我就不再赘述了。

（2）多坐标轴多图层。

实现效果如图：

这种方式适合柱状图为多个系列，单纯使用barGap是做不出阴影的效果的。我的实现方式是添加一个隐藏的相同的类目轴(我的是y轴，设置不显示)，设置三个显示数据系列使用正常的类目轴，三个阴影系列使用隐藏的类目轴，阴影系列在数据系列图层下，options设置代码如下：

options = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['原始', '解析后', '预处理'],
        top: 0,
        itemGap: 20,
        itemWidth: 16,
        itemHeight: 5,
        textStyle: {
          color: 'white'
        }
      },
      grid: {
        top: '30',
        left: '3%',
        right: '20%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [{
        type: 'value',
        position: 'top',
        axisLine: {
          lineStyle: {
            color: '#084a8e'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          show: false
        }
      }],
      yAxis: [{
        type: 'category',
        inverse: true,
        axisLine: {
          lineStyle: {
            color: '#084a8e'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          fontSize: 14,
          color: '#B3D5EC'
        },
        data: ['5天','10天','15天','20天','25天', '30天']
      }, {
        type: 'category',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitArea: {
          show: false
        },
        splitLine: {
          show: false
        },
        data: ['5天','10天','15天','20天','25天', '30天']
      }],
      series: [
        {
          name: '原始',
          type: 'bar',
          barWidth: 5,
          barGap: 10,
          yAxisIndex: 0,
          data: [18203, 23489, 29034, 104970, 131744, 63023],
          itemStyle: {
            color: '#66CC33',
            barBorderRadius: [0, 5, 5, 0]
          },
          z: 2
        },
        {
          name: '解析后',
          type: 'bar',
          barWidth: 5,
          barGap: 10,
          data: [19325, 23438, 31000, 121594, 134141, 68180],
          itemStyle: {
            color: '#FFCC00',
            barBorderRadius: [0, 5, 5, 0]
          },
          z: 2
        },
        {
          name: '预处理',
          type: 'bar',
          barWidth: 5,
          barGap: 3,
          data: [11111, 22222, 33333, 44444, 55555, 66666],
          itemStyle: {
            color: '#FF6600',
            barBorderRadius: [0, 5, 5, 0]
          },
          z: 2
        },
        {
          name: '原始',
          type: 'bar',
          barWidth: 5,
          barGap: 3,
          yAxisIndex: 1,
          data: [134141, 134141, 134141, 134141, 134141, 134141],
          tooltip: {
            show: false
          },
          itemStyle: {
            color: '#292937',
            barBorderRadius: [0, 5, 5, 0]
          },
          silent: true,
          z: 1
        },
        {
          name: '解析后',
          type: 'bar',
          barWidth: 5,
          barGap: 3,
          yAxisIndex: 1,
          data: [134141, 134141, 134141, 134141, 134141, 134141],
          tooltip: {
            show: false
          },
          itemStyle: {
            color: '#292937',
            barBorderRadius: [0, 5, 5, 0]
          },
          silent: true,
          z: 1
        },
        {
          name: '预处理',
          type: 'bar',
          barWidth: 5,
          barGap: 3,
          yAxisIndex: 1,
          data: [134141, 134141, 134141, 134141, 134141, 134141],
          tooltip: {
            show: false
          },
          itemStyle: {
            color: '#292937',
            barBorderRadius: [0, 5, 5, 0]
          },
          silent: true,
          z: 1
        },
      ]
    }