echarts怎么在vue-cli脚手架里使用

最新推荐文章于 2025-06-09 09:00:00 发布

Baci_Kayun

最新推荐文章于 2025-06-09 09:00:00 发布

阅读量515

点赞数

CC 4.0 BY-SA版权

文章标签： echarts vue.js javascript

本文链接：https://blog.youkuaiyun.com/BKayun/article/details/126166126

该博客介绍了如何在Vue项目中安装和配置Echarts，通过npm安装后，在main.js中全局挂载。接着展示了一个从Echarts官网获取的基础柱状图示例，详细说明了在methods中创建show方法，将图表配置写入，然后在mounted生命周期钩子中调用此方法，最终在模板中渲染图表。博客内容涵盖了Echarts的使用、柱状图的配置以及Vue的组件生命周期。

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

1.引入并配置挂载好echarts

终端安装echarts和axios命令：

npm i echarts

main.js引入并挂载：

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts;

2.从echarts官网示例随便找一个图，比如我找的基础柱状图

在methods里创建一个show方法存放阴影部分的代码，在template部分再给一个#main的div给好宽高样式，并把echarts改成this.$echarts，然后把this.show()写到mounted里，就出来啦！（配置好路由）

<template>
  <div id="main" style="width:800px; height:600px; border: 1px solid red"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    show() {
      var chartDom = document.getElementById("main");
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.show();
  },
};
</script>

<style>
</style>