如何在 Vue 中加入图表 - Vue echarts 使用教程 - 卡拉云

作者：蒋川

2022 年 2 月 28 日
本文字数：2238 字
阅读完需：约 7 分钟

文章首发：《如何在 Vue 中加入图表 - Vue echarts 使用教程 - 卡拉云》

在 Vue 搭建的后台管理工具里添加炫酷的图表，是所有数据展示类后台必备的功能，本教程手把手教大家如何在 Vue 中加入 Echarts ，一个基于 JavaScript 的开源可视化图表库，Echarts 涵盖了常见的数据图表类型。

当然，如果你对前端不是很熟悉，又想快速搭建数据图表看板，那么推荐使用卡拉云，卡拉云是新一代低代码卡发工具，无需懂任何前端技术，仅需拖拽即可快速生成「数据图表」，1 分钟搭建属于你自己的数据图表展示管理后台。详见本文文末。

在 Vue 中使用 ECharts 实战

我们可以通过多种方式获取 ECharts。CDN 获取推荐从 jsDelivr 引用 echarts。本教程使用从 npm 获取的方式。

Echarts 与 Vue-Echarts 的区别

Echarts 是普通 JS 库
Vue-Echarts 是封装后的 Vue 插件，功能一样，只是封装成了 Vue 插件方便使用

安装 Vue 我们先在本机安装 Vue，然后创建项目。

npm install @vue/clivue create kalacloud-vue-echarts-democd kalacloud-vue-echarts-demo

复制代码

接下来我们所有操作都在这个目录中完成

ECharts 配置 - 安装

npm install echarts --save

复制代码

ECharts 配置 - 在 main.js 中引用

文件位置：src/main.js

import * as echarts from 'echarts'Vue.prototype.$echarts = echarts

复制代码

特别提醒：ECharts 5.0 版本接口变更，echarts 引入方式从

echarts 5.0 版本接口更新后，echarts 引入方式从 import echarts from 'echarts' 变为 import * as echarts from 'echarts' 如果没有使用此方法引用，图表不显示，报错 Cannot read property 'init' of undefined

接着我们直接修改 HelloWorld.vue（文件位置：src/components/HelloWorld.vue）方便展示，为了大家与本教程同步，请先清空 HelloWorld.vue 中的所有代码，然后按照以下步骤重新添加。

在绘制表格钱，我们需要准备一个 DOM 容器。特别注意，初学者经常碰到「EChart 不显示」的问题，其中一个原因就是没有定义 DOM 容器，导致 EChart 无法初始化。

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

复制代码

然后在 <script> 中加入绘制的表格及表格数据。

通过 this.$echarts.init() 方法，初始化实例
通过 setOption()方法生成一个图表
xAxis 代表 X 坐标，yAxis 代表 Y 坐标，我们把模拟数据一起写在里面

<script>export default {  name: 'hello',  data () {    return {      msg: 'Welcome to kalacloud.com'    }  },  mounted(){    this.drawLine();  },  methods: {    drawLine(){        // 基于刚刚准备好的 DOM 容器，初始化 EChart 实例        let myChart = this.$echarts.init(document.getElementById('myChart'))        // 绘制图表        myChart.setOption({            title: { text: '太阳系八大行星的卫星数量' },            tooltip: {},            xAxis: {                data: ["水星","金星","地球","火星","木星","土星","金王星","海王星"]            },            yAxis: {},            series: [{                name: '数量',                type: 'bar',                data: [0, 0, 1, 2, 79, 82, 27, 14]            }]        });    }  }}</script>

复制代码

HelloWorld.vue 完整代码

文件位置：src/components/HelloWorld.vue

<template>  <div id="myChart" :style="{width: '600px', height: '300px'}"></div></template>
<script>export default {  name: 'hello',  data () {    return {      msg: 'Welcome to kalacloud.com'    }  },  mounted(){    this.drawLine();  },  methods: {    drawLine(){        // 基于刚刚准备好的 DOM 容器，初始化 EChart 实例        let myChart = this.$echarts.init(document.getElementById('myChart'))        // 绘制图表        myChart.setOption({            title: { text: '太阳系八大行星的卫星数量' },            tooltip: {},            xAxis: {                data: ["水星","金星","地球","火星","木星","土星","金王星","海王星"]            },            yAxis: {},            series: [{                name: '数量',                type: 'bar',                data: [0, 0, 1, 2, 79, 82, 27, 14]            }]        });    }  }}</script>