echarts双X轴刻度居中

小伙伴们如果遇到echarts双X轴居中问题，可以参考本文，亲测有效哦

• 页面要实现的效果如下图所示：
  

• 代码如下图所示：

• let smxData =
  [
  “38”, “39”, “39”, “39”, “39”, “39”, “39”,“39”, “40”,“40”, “40”,“40”, “40”, “40”, “40”, “41”, “41”, “41”,“41”, “41”,“41”,“41”,“42”];
  let indexData =
  [true, true,false, false,false, false,false, false,true, false,false, false,false, false, false, true,false,false,false,false,false,false,true];
  let indexData2 = [true,false, false,false, true, false,false,false, false,false, false, true,false,false, false,false,
  false,false, true,false, false, false,true];
  var option = {
  title: {
  text: “XXXXX行情走势图”,
  x: “center”,
  align: “right”,
  },
  grid: {
  bottom: 160,
  },
  tooltip: {
  trigger: “axis”,
  axisPointer: {
  animation: false,
  },
  },
  dataZoom: [
  {
  show: false,
  realtime: false,
  },
  ],
  xAxis: [
  {
  type: “category”,
  position: “bottom”,
  //boundaryGap: false,
  axisLine: { show: true },
  data: [
  “1”,
  “2”,
  “3”,
  “4”,
  “5”,
  “6”,
  “7”,
  “8”,
  “2”,
  “3”,
  “4”,
  “5”,
  “6”,
  “7”,
  “8”,
  “2”,
  “3”,
  “4”,
  “5”,
  “6”,
  “7”,
  “8”,
  “9”,
  ],
  },
  {
  type: “category”,
  //boundaryGap: false,
  position: “bottom”,
  data: smxData,
  axisLabel: {
  margin: 70, /设置坐标轴文字与轴线距离/
  align: “center”,
  show: true,
  interval: function (index, value) {
  if (indexData2[index]) {
  return value;
  }
  },
  },
  axisLine: {
  lineStyle: {
  width: 1,
  },
  },
  axisTick: {
  // inside: true,
  interval: function (index, value) {
  if (indexData[index]) {
  return value;
  }
  },
  length: 60,
  },
  },
  ],
  yAxis: [
  {
  type: “value”,
  min: 100,
  axisLine: { show: false },
  axisTick: { show: false },
  axisLabel: {
  formatter: function (value, index) {
  return value > 1000 ? value / 1000 + “k” : value;
  },
  },
  splitLine: {
  show: true,
  },
  },
  ],
  series: [
  {
  name: “模拟数据”,
  type: “line”,
  smooth: true,
  symbol: “none”,
  sampling: “average”,
  itemStyle: {
  normal: {
  color: “green”,
  },
  },
  markLine: {
  silent: true,
  animation: false,
  symbol: “”,
  label: {
  normal: { show: false },
  },
  lineStyle: {
  normal: {
  color: “#666”,
  type: “dotted”,
  },
  },
  data: [
  {
  yAxis: 920,
  },
  ],
  },
  data: [
  600,
  870,
  1120,
  700,
  345,
  666,
  777,
  888,
  870,
  1120,
  700,
  345,
  666,
  777,
  888,
  870,
  1120,
  700,
  345,
  666,
  777,
  888,
  222,
  ],
  },
  ],
  };

学习目标：

echarts图表

1、 封装echarts各类图表
2、 掌握echarts各图表配置信息

学习时间：

提示：这里可以添加计划学习的时间
周一至周五晚上 9:00-9:30

学习产出：