Echarts折线图超详细超细节配置

系列文章：

1. Echart Bar 柱状图样式详解
2. Echarts Bar 横向柱状图

Echarts 图标样式个性化设置，如 x 轴间距，y 轴样式，图例自定义，提示框自定义，数据列悬浮高亮，坐标指示器背景渐变色等等，解决折磨人的细节样式问题。

基础配置

title 标题组件

let title = {
  text: "累计消费趋势", // 标题
  subtext: "同比上年同期，累计消费增加200元", // 副标题
  top: -5, // 定位
  left: -5, // 定位
  subtextStyle: {
    // 副标题样式
    color: "#808080",
    fontSize: 12,
  },
};

legend 图例组件

1. 将图例设置为圆形，并且更改图例大小和间距：icon, itemHeight,itemGap

2. 修改图例文字和图表的距离：textStyle.padding，设置为负数时，就可以缩小间距了

let legend = {
  top: 24, // 定位，和副标题一排
  right: 0, // 定位，和副标题一排，且在右边
  icon: "circle", // 图例形状
  // itemWidth: 25, // 图例标记的图形宽度
  itemHeight: 6, // 图例标记的图形高度
  itemGap: 24, // 图例每项之间的间隔
  itemStyle: {}, // 图例的图形样式
  textStyle: {
    // 图例文字属性
    fontSize: 12,
    color: "#333",
    padding: [0, 0, 0, -8], // 修改文字和图标距离
  },
};

grid 绘图网格

一般用于调整绘图区域的属性，例如位置，距离等

ler grid = {
  top: 70,
  left: 0,
  right: 12,
  bottom: 0,
  containLabel: true,
}

xAxis 轴

默认只展示第一个和最后一个坐标，但是鼠标悬浮时要展示对应的 x 轴标签和 tooltip 配置

let xAxis = R.mergeDeepRight(xAxis, {
  type: "category",
  boundaryGap: false, // 不留白
  axisLabel: {
    interval: 50, // 只显示最大和最小坐标
    showMinLabel: true, // 显示最小标签
    showMaxLabel: true, // 显示最大标签
  },
  axisLine: {
    lineStyle: {
      type: "dashed", // 直线指示器为虚线
      // dashOffset: 5 // 虚线的偏移量
    },
  },
  axisPointer: {
    type: "line", // 直线指示器
  },
});

series 数据列

1. 设置拐点的形状和大小（symbol，symbolSize）；默认不显示，只有 hover 时才显示（showSymbol）

2. 设置区域背景色areaStyle.color

let series = [
  {
    type: "line",
    color: "#1890ff", // 线条颜色
    areaStyle: {
      color: "rgba(24,144,255,0.08)", // 区域背景色
    },
    showSymbol: false, // 只有在 tooltip hover 的时候显示
    symbol: "emptyCircle", // 拐点形状
    symbolSize: 6, //拐点大小
  },
  {
    type: "line",
    color: "#52c41a",
    areaStyle: {
      color: "rgba(82,196,26,0.08)",
    },
    showSymbol: false,
    symbol: "emptyCircle",
    symbolSize: 6,
  },
];

tooltip 提示框

1. axisPointer.label.show = true：鼠标悬浮时，显示 x 轴标签，如 2 月，3 月；
2. axisPointer.label.backgroundColor = transparent：鼠标悬浮时，去除刻度标签的背景色；
3. axisPointer.label.padding = [20, 0, 0, 0]：调整刻度标签和轴线的距离；
4. position = [10, 10]：tooltip提示框相对容器定位，固定位置；
5. position = format()：tooltip提示框相对鼠标定位，相对位置；
6. formatter：自定义内容实现

let tooltip = {
  trigger: "axis",
  // 指示器样式配置
  axisPointer: {
    type: "cross",
    label: {
      show: true,
      color: "#808080",
      fontSize: 12,
      padding: [20, 0, 0, 0],
      backgroundColor: "transparent",
    },
    lineStyle: {
      color: "#808080",
      width: 0.5,
    },
    // position: [10, 10],
    // position(point, params) {
    //   // 默认距离鼠标定位
    //   if (params.length) {
    //     const { axisIndex, axisValue } = params[0];
    //     instance.convertToPixel({ xAxisIndex: axisIndex }, axisValue); // axisPointer position x
    //   }
    // },
    formatter: function(params) {
      let html = `<div style="height:auto;width:234px;">
          <div style="font-size:14px;font-weight:bold;color:#333;margin-bottom:16px;line-height:1;">
            截止 ${params[0].axisValue}
          </div>
          ${params
            .map(
              (
                item
              ) => `<div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;">
                <span style="display:inline-block;margin-right:8px;border-radius:6px;width:6px;height:6px;background-color:${
                  item.color
                };"></span>
                ${item.seriesName}
                <span style="flex:1;text-align:right;">${
                  item.value[item.encode.y[0]]
                }</span>
              </div>`
            )
            .join("")}
        </div>`;
      return html;
    },
  },
};

总体效果展示

let options = {
  title,
  legend,
  grid,
  xAxis,
  yAxis: R.merge(yAxis, {
    type: "value",
    axisPointer: {
      show: false,
    },
  }),
  series,
  dataset: {
    dimensions: ["金额", "2020年累计消费", "2021年累计消费"],
    source: [
      ["1月", 200, 100],
      ["2月", 288, 200],
      ["3月", 360, 486],
      ["4月", 450, 680],
    ],
  },
  tooltip,
}