文章首发:《如何在 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/cli
vue create kalacloud-vue-echarts-demo
cd 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 表格