Echarts使用方法详细步骤vue2项目中

最新推荐文章于 2025-10-25 09:02:22 发布

原创最新推荐文章于 2025-10-25 09:02:22 发布 · 839 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis #javascript #开发语言

1.导入Echarts

1. 点击快速入门

2. 选择在项目中引入Echarts，先根据NPM安装Echarts，然后按需引入

2.1. 在vue项目中引入Echarts，直接复制到script中即可，并且写一个div盒子

<template>
  <div id="main">折线图</div>
</template>
<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
</script>

2.2. 注册组件，写到created()中

<template>
  <div id="main">折线图</div>
</template>
<script>
  // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  import * as echarts from 'echarts/core';
  // 引入柱状图图表，图表后缀都为 Chart
  import { BarChart } from 'echarts/charts';
  // 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent
  } from 'echarts/components';
  // 标签自动布局、全局过渡动画等特性
  import { LabelLayout, UniversalTransition } from 'echarts/features';
  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  import { CanvasRenderer } from 'echarts/renderers';
  export default { //写export default 
    created() {
      echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        BarChart,
        LabelLayout,
        UniversalTransition,
        CanvasRenderer
      ]);
    }
  }
</script>

2.3. 初始化图标，需要在mounted中初始化

<template>
  <div id="main"></div>
</template>
<script>
  // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  import * as echarts from 'echarts/core';
  // 引入柱状图图表，图表后缀都为 Chart
  import { BarChart } from 'echarts/charts';
  // 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent
  } from 'echarts/components';
  // 标签自动布局、全局过渡动画等特性
  import { LabelLayout, UniversalTransition } from 'echarts/features';
  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  import { CanvasRenderer } from 'echarts/renderers';
  export default {
    created() {
      echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        BarChart,
        LabelLayout,
        UniversalTransition,
        CanvasRenderer
      ]);
    },
  mounted(){
    var myChart = echarts.init(document.getElementById('main'));
    const option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    }
    myChart.setOption(option)
  }
</script>

2.4. 给mian写一个大小，这样才能在浏览器当中查看到效果(样式自己随意设置就行，具体就是为了看到效果，根据实际情况设置即可)

<template>
  <div id="main"></div>
</template>
  // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  import * as echarts from 'echarts/core';
  // 引入柱状图图表，图表后缀都为 Chart
  import { BarChart } from 'echarts/charts';
  // 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent
  } from 'echarts/components';
  // 标签自动布局、全局过渡动画等特性
  import { LabelLayout, UniversalTransition } from 'echarts/features';
  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  import { CanvasRenderer } from 'echarts/renderers';
  export default {
    created() {
      echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        BarChart,
        LabelLayout,
        UniversalTransition,
        CanvasRenderer
      ]);
    },
    mounted(){
      var myChart = echarts.init(document.getElementById('main'));
      let option = {
        title: {
          text: 'ECharts 入门示例' //标题
        },
        tooltip: {},//工具提示
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },  //x轴
        yAxis: {},  //y轴
        series: [  //数据
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
<style>
  #main {
    width:600px;
    height:400px;
  }
  </style>

3. 引入案例

3.1. 在echarts中点开示例

3.2. 将好看的示例替换到上面写的代码中，例如图下

3.3. 修改引入的图表和组件

把引入的柱状图 BarChart 换成折线图 LineChart，并新增数据缩放组件 DataZoomComponent。

LineChart: 要画折线图，就必须引入折线图的核心模块。
DataZoomComponent: 要实现底部的滚动条和图表内部拖拽缩放，就需要这个组件。

<template>
  <div id="main"></div>
</template>
  // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  import * as echarts from 'echarts/core';
  // 替换成折线图
  import { LineChart } from 'echarts/charts'; // 1. 换成 LineChart
  // 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent
    DataZoomComponent // 2. 新增这一行
  } from 'echarts/components';
  // 标签自动布局、全局过渡动画等特性
  import { LabelLayout, UniversalTransition } from 'echarts/features';
  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  import { CanvasRenderer } from 'echarts/renderers';
  export default {
    created() {
      echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        LineChart, //修改这里 把柱状图修改为折线图
        LabelLayout,
        UniversalTransition,
        CanvasRenderer
        DataZoomComponent //在这里使用
      ]);
    },
    mounted(){
      var myChart = echarts.init(document.getElementById('main'));
      let option = {
        title: {
          text: 'ECharts 入门示例' //标题
        },
        tooltip: {},//工具提示
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },  //x轴
        yAxis: {},  //y轴
        series: [  //数据
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
<style>
  #main {
    width:600px;
    height:400px;
  }
  </style>

3.4. 添加数据生成函数

在 <script> 标签的顶部，export default 之前，添加一个名为 generateData1 的函数。

这个函数就是用来生成示例图表里那些模拟数据的。它会生成一个包含时间、数值的数组，并特别标记出 “休息时间”（break）的开始和结束点，这是实现 X 轴断点的关键。

<template>
  <div id="main"></div>
</template>
  // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  import * as echarts from 'echarts/core';
  // 替换成折线图
  import { LineChart } from 'echarts/charts'; // 1. 换成 LineChart
  // 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent
    DataZoomComponent // 2. 新增这一行
  } from 'echarts/components';
  // 标签自动布局、全局过渡动画等特性
  import { LabelLayout, UniversalTransition } from 'echarts/features';
  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  import { CanvasRenderer } from 'echarts/renderers';
  function generateData1() {
  var seriesData = [];
  var time = new Date('2024-04-09T09:30:00Z');
  var endTime = new Date('2024-04-09T15:00:00Z').getTime();
  var breakStart = new Date('2024-04-09T11:30:00Z').getTime();
  var breakEnd = new Date('2024-04-09T13:00:00Z').getTime();
  for (var val = 1669; time.getTime() <= endTime; ) {
    if (time.getTime() <= breakStart || time.getTime() >= breakEnd) {
      val = val + Math.floor((Math.random() - 0.5 * Math.sin(val / 1000)) * 20 * 100) / 100;
      val = +val.toFixed(2);
      seriesData.push([time.getTime(), val]);
    }
    time.setMinutes(time.getMinutes() + 1);
  }
  return { seriesData: seriesData, breakStart: breakStart, breakEnd: breakEnd };
}
  export default {
    created() {
      echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        LineChart,//替换柱状图
        LabelLayout,
        UniversalTransition,
        CanvasRenderer,
        DataZoomComponent//底部的滚动条和图表内部拖拽缩放
      ]);
    },
    mounted(){
      var myChart = echarts.init(document.getElementById('main'));
      let option = {
        title: {
          text: 'ECharts 入门示例' //标题
        },
        tooltip: {},//工具提示
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },  //x轴
        yAxis: {},  //y轴
        series: [  //数据
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
<style>
  #main {
    width:600px;
    height:400px;
  }
  </style>

3.5. 更新 `mounted` 中的图表配置

把 mounted 函数里初始化图表的代码，换成使用新数据和新配置的版本。

这是最核心的一步，它用新的配置告诉 ECharts：

X 轴是时间轴 (type: 'time')，并且有断点 (breaks)。
图表类型是折线图 (type: 'line')。
数据来源是我们刚生成的 _data.seriesData。
要显示数据缩放滑块 (dataZoom)。

<template>
  <div id="main"></div>
</template>
<script>
  // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  import * as echarts from 'echarts/core';
  // 替换成折线图
  import { LineChart } from 'echarts/charts'; // 1. 换成 LineChart
  // 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    DataZoomComponent // 2. 新增这一行
  } from 'echarts/components';
  // 标签自动布局、全局过渡动画等特性
  import { LabelLayout, UniversalTransition } from 'echarts/features';
  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  import { CanvasRenderer } from 'echarts/renderers';
  function generateData1() {
  var seriesData = [];
  var time = new Date('2024-04-09T09:30:00Z');
  var endTime = new Date('2024-04-09T15:00:00Z').getTime();
  var breakStart = new Date('2024-04-09T11:30:00Z').getTime();
  var breakEnd = new Date('2024-04-09T13:00:00Z').getTime();
  for (var val = 1669; time.getTime() <= endTime; ) {
    if (time.getTime() <= breakStart || time.getTime() >= breakEnd) {
      val = val + Math.floor((Math.random() - 0.5 * Math.sin(val / 1000)) * 20 * 100) / 100;
      val = +val.toFixed(2);
      seriesData.push([time.getTime(), val]);
    }
    time.setMinutes(time.getMinutes() + 1);
  }
  return { seriesData: seriesData, breakStart: breakStart, breakEnd: breakEnd };
}
  export default {
    created() {
      echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        LineChart,//替换柱状图
        LabelLayout,
        UniversalTransition,
        CanvasRenderer,
        DataZoomComponent//底部的滚动条和图表内部拖拽缩放
      ]);
    },
   mounted() {
  var myChart = echarts.init(document.getElementById('main'));
  var _data = generateData1(); // 1. 获取模拟数据

  var option = {
    useUTC: true,
    title: { text: 'Intraday Chart with Breaks (Single Day)', left: 'center' },
    tooltip: { show: true, trigger: 'axis' },
    xAxis: [{
      type: 'time',
      interval: 1000 * 60 * 30,
      axisLabel: {
        showMinLabel: true,
        showMaxLabel: true,
        formatter: (value, index, extra) => {
          if (!extra || !extra.break) {
            return echarts.time.format(value, '{HH}:{mm}', true);
          }
          if (extra.break.type === 'start') {
            return echarts.time.format(extra.break.start, '{HH}:{mm}', true) + '/' + echarts.time.format(extra.break.end, '{HH}:{mm}', true);
          }
          return '';
        }
      },
      breakLabelLayout: { moveOverlap: false },
      breaks: [{ start: _data.breakStart, end: _data.breakEnd, gap: 0 }],
      breakArea: { expandOnClick: false, zigzagAmplitude: 0, zigzagZ: 200 }
    }],
    yAxis: { type: 'value', min: 'dataMin' },
    dataZoom: [{ type: 'inside', xAxisIndex: 0 }, { type: 'slider', xAxisIndex: 0 }],
    series: [{ type: 'line', symbolSize: 0, data: _data.seriesData }]
  };

  myChart.setOption(option);
}
    </script>
<style>
  #main {
    width:600px;
    height:400px;
  }
  </style>

2.后端接口数据

1.API请求函数定义

这段代码定义了一个API请求函数，使用封装的request工具
当调用getTodayData()时，会向/statistic/todayData发送GET请求
返回的是一个Promise对象，可以使用async/await或.then()处理响应

import request from '@/utils/request' // 引入封装的 request
// 定义获取今日数据的接口请求函数
export function getTodayData () {
  return request({
    url: '/statistic/todayData',
    method: 'get'
  })
}

2.在组件当中引入

<template>
  <div id="main"></div>
</template>

<script>
// 在组件当中引入上面的接口
import { getTodayData } from '@/api/dashboard'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  import * as echarts from 'echarts/core'
  // 替换成折线图
  import { LineChart } from 'echarts/charts' // 1. 换成 LineChart
  // 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    DataZoomComponent // 2. 新增这一行
  } from 'echarts/components'
  // 标签自动布局、全局过渡动画等特性
  import { LabelLayout, UniversalTransition } from 'echarts/features'
  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  import { CanvasRenderer } from 'echarts/renderers'
  function generateData1() {
  var seriesData = []
  var time = new Date('2024-04-09T09:30:00Z')
  var endTime = new Date('2024-04-09T15:00:00Z').getTime()
  var breakStart = new Date('2024-04-09T11:30:00Z').getTime()
  var breakEnd = new Date('2024-04-09T13:00:00Z').getTime()
  for (var val = 1669; time.getTime() <= endTime;) {
    if (time.getTime() <= breakStart || time.getTime() >= breakEnd) {
      val = val + Math.floor((Math.random() - 0.5 * Math.sin(val / 1000)) * 20 * 100) / 100
      val = +val.toFixed(2)
      seriesData.push([time.getTime(), val])
    }
    time.setMinutes(time.getMinutes() + 1)
  }
  return { seriesData: seriesData, breakStart: breakStart, breakEnd: breakEnd }
}
  export default {
    created() {
      echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        LineChart, // 替换柱状图
        LabelLayout,
        UniversalTransition,
        CanvasRenderer,
        DataZoomComponent// 底部的滚动条和图表内部拖拽缩放
      ])
    },
   mounted() {
  var myChart = echarts.init(document.getElementById('main'))
  var _data = generateData1() // 1. 获取模拟数据

  var option = {
    useUTC: true,
    title: { text: 'Intraday Chart with Breaks (Single Day)', left: 'center' },
    tooltip: { show: true, trigger: 'axis' },
    xAxis: [{
      type: 'time',
      interval: 1000 * 60 * 30,
      axisLabel: {
        showMinLabel: true,
        showMaxLabel: true,
        formatter: (value, index, extra) => {
          if (!extra || !extra.break) {
            return echarts.time.format(value, '{HH}:{mm}', true)
          }
          if (extra.break.type === 'start') {
            return echarts.time.format(extra.break.start, '{HH}:{mm}', true) + '/' + echarts.time.format(extra.break.end, '{HH}:{mm}', true)
          }
          return ''
        }
      },
      breakLabelLayout: { moveOverlap: false },
      breaks: [{ start: _data.breakStart, end: _data.breakEnd, gap: 0 }],
      breakArea: { expandOnClick: false, zigzagAmplitude: 0, zigzagZ: 200 }
    }],
    yAxis: { type: 'value', min: 'dataMin' },
    dataZoom: [{ type: 'inside', xAxisIndex: 0 }, { type: 'slider', xAxisIndex: 0 }],
    series: [{ type: 'line', symbolSize: 0, data: _data.seriesData }]
  }

  myChart.setOption(option)
}
  }
</script>

<style>
#main {
  width: 600px;
  height: 400px;
}
</style>

3.在控制台打印后端给的数据的方法

<template>
  <div id="main"></div>
</template>

<script>
import { getTodayData } from '@/api/dashboard'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  import * as echarts from 'echarts/core'
  // 替换成折线图
  import { LineChart } from 'echarts/charts' // 1. 换成 LineChart
  // 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    DataZoomComponent // 2. 新增这一行
  } from 'echarts/components'
  // 标签自动布局、全局过渡动画等特性
  import { LabelLayout, UniversalTransition } from 'echarts/features'
  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  import { CanvasRenderer } from 'echarts/renderers'
  function generateData1() {
  var seriesData = []
  var time = new Date('2024-04-09T09:30:00Z')
  var endTime = new Date('2024-04-09T15:00:00Z').getTime()
  var breakStart = new Date('2024-04-09T11:30:00Z').getTime()
  var breakEnd = new Date('2024-04-09T13:00:00Z').getTime()
  for (var val = 1669; time.getTime() <= endTime;) {
    if (time.getTime() <= breakStart || time.getTime() >= breakEnd) {
      val = val + Math.floor((Math.random() - 0.5 * Math.sin(val / 1000)) * 20 * 100) / 100
      val = +val.toFixed(2)
      seriesData.push([time.getTime(), val])
    }
    time.setMinutes(time.getMinutes() + 1)
  }
  return { seriesData: seriesData, breakStart: breakStart, breakEnd: breakEnd }
}
  export default {
    created() {
      echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        LineChart, // 替换柱状图
        LabelLayout,
        UniversalTransition,
        CanvasRenderer,
        DataZoomComponent// 底部的滚动条和图表内部拖拽缩放
      ])
    },
   mounted() {
  var myChart = echarts.init(document.getElementById('activityChart'))
  var _data = generateData1() // 1. 获取模拟数据
  this.generateData1() //当页面刷新的时候，就会调用接口

  var option = {
    useUTC: true,
    title: { text: 'Intraday Chart with Breaks (Single Day)', left: 'center' },
    tooltip: { show: true, trigger: 'axis' },
    xAxis: [{
      type: 'time',
      interval: 1000 * 60 * 30,
      axisLabel: {
        showMinLabel: true,
        showMaxLabel: true,
        formatter: (value, index, extra) => {
          if (!extra || !extra.break) {
            return echarts.time.format(value, '{HH}:{mm}', true)
          }
          if (extra.break.type === 'start') {
            return echarts.time.format(extra.break.start, '{HH}:{mm}', true) + '/' + echarts.time.format(extra.break.end, '{HH}:{mm}', true)
          }
          return ''
        }
      },
      breakLabelLayout: { moveOverlap: false },
      breaks: [{ start: _data.breakStart, end: _data.breakEnd, gap: 0 }],
      breakArea: { expandOnClick: false, zigzagAmplitude: 0, zigzagZ: 200 }
    }],
    yAxis: { type: 'value', min: 'dataMin' },
    dataZoom: [{ type: 'inside', xAxisIndex: 0 }, { type: 'slider', xAxisIndex: 0 }],
    series: [{ type: 'line', symbolSize: 0, data: _data.seriesData }]
  }

  myChart.setOption(option)
},
methods: {
  async generateData1 () {
    const res = await getTodayData()
    console.log(res)
  }
}
  }
</script>

<style>
#main {
  width: 600px;
  height: 400px;
}
</style>

4.添加判断的方法，如果接口访问成功，应该怎么做，如果访问不成功

<template>
  <div id="main"></div>
</template>

<script>
import { getTodayData } from '@/api/dashboard'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  import * as echarts from 'echarts/core'
  // 替换成折线图
  import { LineChart } from 'echarts/charts' // 1. 换成 LineChart
  // 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    DataZoomComponent // 2. 新增这一行
  } from 'echarts/components'
  // 标签自动布局、全局过渡动画等特性
  import { LabelLayout, UniversalTransition } from 'echarts/features'
  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  import { CanvasRenderer } from 'echarts/renderers'
  function generateData1() {
  var seriesData = []
  var time = new Date('2024-04-09T09:30:00Z')
  var endTime = new Date('2024-04-09T15:00:00Z').getTime()
  var breakStart = new Date('2024-04-09T11:30:00Z').getTime()
  var breakEnd = new Date('2024-04-09T13:00:00Z').getTime()
  for (var val = 1669; time.getTime() <= endTime;) {
    if (time.getTime() <= breakStart || time.getTime() >= breakEnd) {
      val = val + Math.floor((Math.random() - 0.5 * Math.sin(val / 1000)) * 20 * 100) / 100
      val = +val.toFixed(2)
      seriesData.push([time.getTime(), val])
    }
    time.setMinutes(time.getMinutes() + 1)
  }
  return { seriesData: seriesData, breakStart: breakStart, breakEnd: breakEnd }
}
  export default {
    created() {
      echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        LineChart, // 替换柱状图
        LabelLayout,
        UniversalTransition,
        CanvasRenderer,
        DataZoomComponent// 底部的滚动条和图表内部拖拽缩放
      ])
    },
   mounted() {
  var myChart = echarts.init(document.getElementById('activityChart'))
  var _data = generateData1() // 1. 获取模拟数据
  this.generateData1()

  var option = {
    useUTC: true,
    title: { text: 'Intraday Chart with Breaks (Single Day)', left: 'center' },
    tooltip: { show: true, trigger: 'axis' },
    xAxis: [{
      type: 'time',
      interval: 1000 * 60 * 30,
      axisLabel: {
        showMinLabel: true,
        showMaxLabel: true,
        formatter: (value, index, extra) => {
          if (!extra || !extra.break) {
            return echarts.time.format(value, '{HH}:{mm}', true)
          }
          if (extra.break.type === 'start') {
            return echarts.time.format(extra.break.start, '{HH}:{mm}', true) + '/' + echarts.time.format(extra.break.end, '{HH}:{mm}', true)
          }
          return ''
        }
      },
      breakLabelLayout: { moveOverlap: false },
      breaks: [{ start: _data.breakStart, end: _data.breakEnd, gap: 0 }],
      breakArea: { expandOnClick: false, zigzagAmplitude: 0, zigzagZ: 200 }
    }],
    yAxis: { type: 'value', min: 'dataMin' },
    dataZoom: [{ type: 'inside', xAxisIndex: 0 }, { type: 'slider', xAxisIndex: 0 }],
    series: [{ type: 'line', symbolSize: 0, data: _data.seriesData }]
  }

  myChart.setOption(option)
},
methods: {
  async generateData1 () {
    const res = await getTodayData()
    if (res.code === 200) {
  console.log('成功，准备更新图表...')
} else {
  this.$message.error('请求失败，请稍后重试')
}
  }
}
  }
</script>

<style>
#main {
  width: 600px;
  height: 400px;
}
</style>

5.写data+methods当中的东西，具体从控制台看，返回了什么数据

5.1 先写data里面的东西

5.2 删除原始数据

5.3 在methods写后端返回来的数据

<template style="background: #f5f6fa">
  <div class="typical-home" ref="portaletDiv">
    <a-row :gutter="[24, 24]" class="module-list">
      <a-col>
        <div class="module-in module-in06">
          <a-page-header :ghost="false" title="今日户数">
            <template slot="extra">
              <a-icon type="more" />
            </template>
          </a-page-header>
          <div class="lone">
            <div id="activityChart"></div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<style type="less">
body {
  .modlule-show {
    height: 240px;

    .ant-btn-lg {
      height: 40px;
      font-size: 16px;
      border-radius: 4px;
    }
  }
}

.lone {
  width: 115%;
  height: 320px;

  #activityChart {
    left: -85px;
    top: -55px;
    width: 100%;
    height: 100%;
  }
}
</style>
<script>
// 在组件当中引入上面的接口
import { getTodayData } from '@/api/dashboard'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 替换成折线图
import { LineChart } from 'echarts/charts'// 1. 换成 LineChart
// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  DataZoomComponent // 2. 新增这一行
} from 'echarts/components'
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// function generateData1() {
//   var seriesData = []
//   var time = new Date('2024-04-09T09:30:00Z')
//   var endTime = new Date('2024-04-09T15:00:00Z').getTime()
//   var breakStart = new Date('2024-04-09T11:30:00Z').getTime()
//   var breakEnd = new Date('2024-04-09T13:00:00Z').getTime()
//   for (var val = 1669; time.getTime() <= endTime;) {
//     if (time.getTime() <= breakStart || time.getTime() >= breakEnd) {
//       val = val + Math.floor((Math.random() - 0.5 * Math.sin(val / 1000)) * 20 * 100) / 100
//       val = +val.toFixed(2)
//       seriesData.push([time.getTime(), val])
//     }
//     time.setMinutes(time.getMinutes() + 1)
//   }
//   return { seriesData: seriesData, breakStart: breakStart, breakEnd: breakEnd }
// }
export default {
  data() {
    return {
      seriesData: [], // 存储后端返回的[时间戳, 数值]数组
      breakStart: null, // 存储后端返回的起始时间（时间戳）
      breakEnd: null // 存储后端返回的结束时间（时间戳）
    }
  },
  created() {
    // 注册必须的组件
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      DatasetComponent,
      TransformComponent,
      LineChart,
      LabelLayout,
      UniversalTransition,
      CanvasRenderer,
      DataZoomComponent
    ])
  },
  mounted() {
    var myChart = echarts.init(document.getElementById('main'))
    var _data = generateData1()// 1. 获取模拟数据
    this.generateData1()

    var option = {
      useUTC: true,
      title: { text: 'Intraday Chart with Breaks (Single Day)', left: 'center' },
      tooltip: { show: true, trigger: 'axis' },
      xAxis: [{
        type: 'time',
        interval: 1000 * 60 * 30,
        axisLabel: {
          showMinLabel: true,
          showMaxLabel: true,
          formatter: (value, index, extra) => {
            if (!extra || !extra.break) {
              return echarts.time.format(value, '{HH}:{mm}', true)
            }
            if (extra.break.type === 'start') {
              return echarts.time.format(extra.break.start, '{HH}:{mm}', true) + '/' + echarts.time.format(extra.break.end, '{HH}:{mm}', true)
            }
            return ''
          }
        },
        breakLabelLayout: { moveOverlap: false },
        breaks: [{ start: _data.breakStart, end: _data.breakEnd, gap: 0 }],
        breakArea: { expandOnClick: false, zigzagAmplitude: 0, zigzagZ: 200 }
      }],
      yAxis: { type: 'value', min: 'dataMin' },
      dataZoom: [{ type: 'inside', xAxisIndex: 0 }, { type: 'slider', xAxisIndex: 0 }],
      series: [{ type: 'line', symbolSize: 0, data: _data.seriesData }]
    }
    myChart.setOption(option)
  },
  methods: {
    async generateData1() {
      // 1. 调用后端接口获取数据
      const res = await getTodayData()
      // 2. 验证接口返回（后端code=200表示成功，根据实际接口调整）
      if (res.code === 200 && res.data.seriesData) {
        // 3. 存储后端返回的核心数据（[时间戳, 数值]数组）
        this.seriesData = res.data.seriesData
        // 4. 提取数据的起始时间（数组第1项的时间戳）
        this.breakStart = res.data.seriesData[0][0]
        // 5. 提取数据的结束时间（数组最后1项的时间戳）
        this.breakEnd = res.data.seriesData[res.data.seriesData.length - 1][0]
      } else {
        console.error('后端数据返回异常：', res)
      }
    }
  }
}

</script>
<style>
#main {
  width: 600px;
  height: 400px;
}
</style>

<style lang="less">
@import '../typical-home.less';
</style>

6.修改 `mounted`

改造mounted为异步函数，为获取数据做准备
修正 X 轴的breaks配置（避免错误）
监听窗口大小变化，自动调整图表
组件销毁时清理（避免内存泄漏）

<template style="background: #f5f6fa">
  <div class="typical-home" ref="portaletDiv">
    <a-row :gutter="[24, 24]" class="module-list">
      <a-col>
        <div class="module-in module-in06">
          <a-page-header :ghost="false" title="今日户数">
            <template slot="extra">
              <a-icon type="more" />
            </template>
          </a-page-header>
          <div class="lone">
            <div id="activityChart"></div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<style type="less">
body {
  .modlule-show {
    height: 240px;

    .ant-btn-lg {
      height: 40px;
      font-size: 16px;
      border-radius: 4px;
    }
  }
}

.lone {
  width: 115%;
  height: 320px;

  #activityChart {
    left: -85px;
    top: -55px;
    width: 100%;
    height: 100%;
  }
}
</style>

<script>
// 在组件当中引入上面的接口
import { getTodayData } from '@/api/dashboard'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 替换成折线图
import { LineChart } from 'echarts/charts' // 1. 换成 LineChart
// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  DataZoomComponent // 2. 新增这一行
} from 'echarts/components'
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// function generateData1() {
//   var seriesData = []
//   var time = new Date('2024-04-09T09:30:00Z')
//   var endTime = new Date('2024-04-09T15:00:00Z').getTime()
//   var breakStart = new Date('2024-04-09T11:30:00Z').getTime()
//   var breakEnd = new Date('2024-04-09T13:00:00Z').getTime()
//   for (var val = 1669; time.getTime() <= endTime;) {
//     if (time.getTime() <= breakStart || time.getTime() >= breakEnd) {
//       val = val + Math.floor((Math.random() - 0.5 * Math.sin(val / 1000)) * 20 * 100) / 100
//       val = +val.toFixed(2)
//       seriesData.push([time.getTime(), val])
//     }
//     time.setMinutes(time.getMinutes() + 1)
//   }
//   return { seriesData: seriesData, breakStart: breakStart, breakEnd: breakEnd }
// }

export default {
  data() {
    return {
      seriesData: [], // 存储后端返回的[时间戳, 数值]数组
      breakStart: null, // 存储后端返回的起始时间（时间戳）
      breakEnd: null // 存储后端返回的结束时间（时间戳）
    }
  },
  created() {
    // 注册必须的组件
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      DatasetComponent,
      TransformComponent,
      LineChart,
      LabelLayout,
      UniversalTransition,
      CanvasRenderer,
      DataZoomComponent
    ])
  },
  mounted() {
    // var myChart = echarts.init(document.getElementById('main'))
    // var _data = generateData1()// 1. 获取模拟数据
    (async () => {
      // 等待数据加载完成
      await this.generateData1()
      // 数据加载完成后再初始化图表
      var myChart = echarts.init(document.getElementById('activityChart'))

      var option = {
        useUTC: true,
        title: { text: 'Intraday Chart with Breaks (Single Day)', left: 'center' },
        tooltip: { show: true, trigger: 'axis' },
        xAxis: [{
          type: 'time',
          interval: 1000 * 60 * 30,
          min: this.breakStart, // 保留：用数据起始时间作为X轴起点
          max: this.breakEnd, // 保留：用数据结束时间作为X轴终点
          axisLabel: {
            showMinLabel: true,
            showMaxLabel: true,
            formatter: (value, index, extra) => {
              if (!extra || !extra.break) {
                return echarts.time.format(value, '{HH}:{mm}', true)
              }
              if (extra.break.type === 'start') {
                return echarts.time.format(extra.break.start, '{HH}:{mm}', true) + '/' + echarts.time.format(extra.break.end, '{HH}:{mm}', true)
              }
              return ''
            }
          }
          // breakLabelLayout: { moveOverlap: false },
          // breaks: [{ start: _data.breakStart, end: _data.breakEnd, gap: 0 }],
          // breakArea: { expandOnClick: false, zigzagAmplitude: 0, zigzagZ: 200 }
        }],
        yAxis: { type: 'value', min: 'dataMin' },
        dataZoom: [{ type: 'inside', xAxisIndex: 0 }, { type: 'slider', xAxisIndex: 0 }],
        series: [{ type: 'line', symbolSize: 0, data: this.seriesData }]
      }
      myChart.setOption(option)
      // 6. 监听窗口大小变化，自动调整图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
      // 7. 组件销毁时清理（避免内存泄漏）
      this.$once('hook:beforeDestroy', () => {
        window.removeEventListener('resize', () => { })
        myChart.dispose()
      })
    })()
  },
  methods: {
    async generateData1() {
      // 1. 调用后端接口获取数据
      const res = await getTodayData()
      // 2. 验证接口返回（后端code=200表示成功，根据实际接口调整）
      if (res.code === 200 && res.data.seriesData) {
        // 3. 存储后端返回的核心数据（[时间戳, 数值]数组）
        this.seriesData = res.data.seriesData
        // 4. 提取数据的起始时间（数组第1项的时间戳）
        this.breakStart = res.data.seriesData[0][0]
        // 5. 提取数据的结束时间（数组最后1项的时间戳）
        this.breakEnd = res.data.seriesData[res.data.seriesData.length - 1][0]
      } else {
        console.error('后端数据返回异常：', res)
      }
    }
  }
}
</script>

<style>
#main {
  width: 600px;
  height: 400px;
}
</style>

<style lang="less">
@import '../typical-home.less';
</style>