Echarts之折线图配置详情

一，标题 title组件

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

二，图例 legend 组件

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 轴

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 数据列

调节数据图表的样式（折线）

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 提示框

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: {
return `标题：内容`
         }
};