ECharts常用配置项

在项目中会经常用到ECharts做可视化图表，里面的配置项比较多，每次都去官方文档查比较麻烦。在这里记录一下ECharts的常用配置项，方便自己也方便他人快速使用ECharts。

let option = {
  title: {
    // 主标题配置
    text: '标题', // 标题
    left: 'center', // 标题居中
    textStyle: {
      fontSize: 14,
    },
    // 副标题配置
    subtext: '副标题',
    // 副标题样式
    subtextStyle: {
      fontSize: 12,
    },
  },
  // 鼠标悬浮提示面板
  tooltip: {
    confine: true, // 将tooltip限制在容器内
    trigger: 'axis', // 触发类型，坐标轴触发
    // 格式化tooltip
    formatter: function (params) {
      var result = params[0].axisValue + '<br>';
      params.forEach(function (item) {
        const unit = getUnit(item.seriesName);
        let value = '-';
        if (
          item.value !== undefined &&
          item.value !== null &&
          item.value !== ''
        ) {
          // 四舍五入保留两位小数，加单位
          value = (Math.round(item.value * 100) / 100).toFixed(2) + unit;
        }
        result += item.marker + ' ' + item.seriesName + ' : ' + value + '<br>';
      });
      return result;
    },
  },
  // 配置图表离容器上下左右的距离
  grid: {
    top: '30%',
    right: '1%',
    left: '1%',
    bottom: '1%',
    containLabel: true, // grid 区域包含坐标轴的[刻度标签]
  },
  // 图例配置
  legend: [
    {
      data: ['图例1', '图例2'], // 数组
      left: 'center', // 图例组件离容器左侧的距离
      top: '10%', // 图例组件离容器上侧的距离
      // 图例选中状态
      selected: {
        系列1: true, // 选中'系列1'
        系列2: false, // 不选中'系列2'
        // ...
      },
    },
    {
      data: ['图例3', '图例4'],
      left: 'center',
      top: '20%',
    },
    // 可以配置多个...
  ],
  // x轴配置
  xAxis: {
    data: xAxisData,
    name: 'X轴',
    // 坐标轴标签配置
    axisLabel: {
      fontSize: 10,
      interval: 0,
    },
    // 坐标轴线配置
    axisLine: {
      // 设置 X 轴轴线不在另一个轴的 0 刻度上
      onZero: false,
    },
  },
  // y轴配置
  yAxis: [
    {
      type: 'value',
      name: 'Y轴1',
      // 坐标轴标签
      axisLabel: {
        formatter: '{value} %', // 格式化
      },
      // 坐标轴线
      axisLine: {
        show: true,
        // 坐标轴线样式
        lineStyle: {
          color: '#5e859e',
          width: 2,
        },
      },
      // 坐标轴刻度最小值。设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
      min: 'dataMin',
      // 坐标轴刻度最大值。使用自定义函数
      max: function (value) {
        return value.max - 20;
      },
    },
    {
      type: 'value',
      name: 'Y轴2',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#5e859e',
          width: 2,
        },
      },
    },
    // 可以配置多个y轴...
  ],
  series: [
    {
      name: legendName,
      type: 'bar', // 图表类型，柱状图
      data: seriesData,
      axisLabel: {
        interval: 0,
      },
    },
    {
      name: '变化率',
      type: 'line', // 图表类型，折线图
      data: [undefined, ...seriesData1], // 第一个点不显示，设置成undefined
      yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
      axisLabel: {
        interval: 0,
      },
    },
  ],
};