怎么在Vue2使用Echarts进行数据展示（热力图）

_周周

已于 2024-03-30 12:29:57 修改

阅读量1.4k

点赞数 6

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript vue

于 2024-03-30 10:09:59 首次发布

本文链接：https://blog.csdn.net/None_ones/article/details/137164470

本文详细介绍了如何在Vue应用中集成Echarts库，通过复制并修改官方热力图示例，实现数据驱动的动态图表生成，包括数据获取、选项配置和图表渲染的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们先打开Echarts官网，找到你想用的示例

Examples - Apache ECharts

例如我们使用他的热力图示例，点开后我们点击左边的完整代码

一、找到function函数，将function中的函数复制到Vue中的methods函数中：

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      getVirtualData(year) {
        const date = +echarts.time.parse(year + '-01-01');
        const end = +echarts.time.parse(+year + 1 + '-01-01');
        const dayTime = 3600 * 24 * 1000;
        const data = [];
        for (let time = date; time < end; time += dayTime) {
          data.push([
            echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
            Math.floor(Math.random() * 10000)
          ]);
        }
        return data;
      }
    }
  }
</script>

二、再将示例代码中的option放到Vue的数据定义中