文章首发：《如何在 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>

接着，咱们来执行一下 Vue，看看成果。

npm run serve

应用「卡拉云」间接生成图表

本文介绍了如何在 Vue 中引入 ECharts 的办法，尽管 ECharts 曾经帮咱们节俭了很大一部分开发图表的工夫，但只有数据略微简单，调试 ECharts 的难度就会直线回升。

有没有一种齐全不必会前端，一行代码也不必写的办法，生成图表呢？这里举荐你应用卡拉云，卡拉云内置多种款式的图表，仅需鼠标拖拽即可生成，齐全不必懂任何前端。

卡拉云是新一代低代码开发工具，免装置部署，可一键接入包含 MySQL 在内的常见数据库及 API。可依据本人的工作流，定制开发。无需繁琐的前端开发，只须要简略拖拽，即可疾速搭建企业外部工具。原来三天的开发工作量，应用卡拉云后可缩减至 1 小时，欢送收费试用卡拉云。

扩大浏览：

  • 最好的 5 款翻译 API 接口比照测评
  • 最好用的七大顶级 API 接口测试工具
  • 最好用的 5 款 React 富文本编辑器
  • Postman 应用教程 - 手把手教你 API 接口测试
  • 最好的 6 个收费天气 API 接口比照测评
  • 如何在 Vue 中导出数据至 Excel 表格