vue3使用echarts

漂亮小咪

已于 2022-11-07 15:08:22 修改

阅读量604

点赞数

文章标签： echarts 前端 javascript vue.js

于 2022-11-07 15:07:29 首次发布

本文链接：https://blog.csdn.net/su_yun/article/details/127731146

版权

本文介绍了如何在 Vue3 项目中集成并使用 ECharts，包括 ECharts 的简介、安装步骤、在 main.js 文件中引入以及在组件内的具体使用方法。

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

前言

一个基于 JavaScript 的开源可视化图表库

提示：以下是本篇文章正文内容，下面案例可供参考

一、echarts是什么？

一个基于 JavaScript 的开源可视化图表库

官网地址：https://echarts.apache.org/zh/index.html

二、安装 echarts

npm install echarts --save

三、main.js 中引入

代码如下（示例）：

import { createApp } from 'vue'
import App from './App.vue'
// 部分代码展示
import * as echarts from 'echarts'
  
const app = createApp(App);

// vue3 给原型上挂载属性
app.config.globalProperties.$echarts = echarts;


app.use(store).use(router).use(ElementPlus).mount('#app');

四、组件中使用

<template>
  <div id="myChart" :style="{ width: '300px', height: '300px' }"></div>
</template>

<script>

export default {
  data() {
    return {
      option: {},
    };
  },
//echarts必须在dom元素渲染完毕后加载
  mounted() {
    //this.$root => app
    console.log(this.echarts)
    let myChart = this.$echarts.init(document.getElementById("myChart"));
    // 绘制图表
    myChart.setOption({
      title: { text: "总用户量" },
      tooltip: {},
      xAxis: {
        data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
      },
      yAxis: {},
      series: [
        {
          name: "用户量",
          type: "line",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
};
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>