echarts折线图十万条数据显示

最新推荐文章于 2024-10-01 17:17:19 发布

接着奏乐接着舞

最新推荐文章于 2024-10-01 17:17:19 发布

阅读量118

点赞数 2

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/a378113472/article/details/141645238

版权

let arr = [];
let arr1 = [];
for (let i = 0; i < 100000; i++) {
  arr.push(i);
  arr1.push(i + 5000);
}
option = {
  tooltip: {
    trigger: "axis",
    formatter: function (params, ticket, callback) {
      var res = params[0].name;

      for (var i = 0, l = params.length; i < l; i++) {
        if (params[i].seriesType === "line") {
          res +=
            "<br/>" +
            params[i].seriesName +
            " : " +
            (params[i].value ? params[i].value : "-") +
            "h";
        } else {
          res +=
            "<br/>" +
            params[i].seriesName +
            " : " +
            (params[i].value ? params[i].value : "-") +
            "个";
        }
      }
      return res;
    },
  },
  grid: {
    containLabel: true,
  },
  legend: {
    data: ["时间", "人均个数", "总体个数"],
  },
  xAxis: [
    {
      type: "category",
      axisTick: {
        alignWithLabel: true,
      },
      data: arr,
    },
  ],
  dataZoom: [
    {
      type: "slider",
      xAxisIndex: 0,
      filterMode: "empty",
      start: 0,
      end: 100,
    },
    // {
    //   type: "slider",
    //   yAxisIndex: 0,
    //   filterMode: "empty",
    //   start: 0,
    //   end: 100,
    // },
    {
      type: "inside",
      xAxisIndex: 0,
      filterMode: "empty",
      start: 0,
      end: 100,
    },
    // {
    //   type: "inside",
    //   yAxisIndex: 0,
    //   filterMode: "empty",
    //   start: 0,
    //   end: 100,
    // },
  ],
  yAxis: [
    {
      type: "value",
      name: "时间",
      min: 0,
      position: "left",
      axisLabel: {
        formatter: "{value} h",
      },
    },
    {
      type: "value",
      name: "个数",
      min: 0,
      position: "right",
      axisLabel: {
        formatter: "{value} 个",
      },
    },
  ],
  series: [
    {
      name: "时间",
      type: "line",
      label: {
        normal: {
          show: true,
          position: "top",
        },
      },
      lineStyle: {
        normal: {
          width: 3,
          shadowColor: "rgba(0,0,0,0.4)",
          shadowBlur: 10,
          shadowOffsetY: 10,
        },
      },
      data: arr,
    },
    {
      name: "时间1",
      type: "line",
      label: {
        normal: {
          show: true,
          position: "top",
        },
      },
      lineStyle: {
        normal: {
          width: 3,
          shadowColor: "rgba(0,0,0,0.4)",
          shadowBlur: 10,
          shadowOffsetY: 10,
        },
      },
      data: arr1,
    },
  ],
};