如何在Vue中添加图表-Vueecharts教程-Karayun

上篇文章：《如何在 Vue 中加入图表 - Vue echarts 使用教程 - 卡拉云》为Vue搭建的后台管理工具添加炫酷的图表，是所有数据展示后台必备的功能。本教程教你如何在基于JavaScript的开源可视化图表库Vue中添加Echarts，Echarts涵盖了常见的数据图表类型。当然，如果你对前端不是很熟悉，想快速搭建一个带有数据图表的dashboard，那么推荐使用Karayun。卡拉云是新一代低码发卡工具。无需懂任何前端技术，只需拖拽即可快速生成。数据图表”，1分钟搭建属于自己的数据图表展示管理后台。详情见本文末尾。在Vue中使用ECharts我们可以通过多种方式获取ECharts。CDN从jsDelivr获取对echarts的引用。本教程使用从npm获取的那个。Echarts和Vue-Echarts的区别Echarts是一个通用的JS库。Vue-Echarts是一个封装好的Vue插件，功能相同，但是为了方便使用和安装Vue，它被封装为一个Vue插件。我们先在本地安装Vue，然后创建一个项目。npminstall@vue/clivuecreatekalacloud-vue-echarts-democdkalacloud-vue-echarts-demo接下来我们所有的操作都会在这个目录下完成ECharts配置-安装npminstallecharts--saveECharts配置-引用main.js文件location:src/main.jsimport*asechartsfrom'echarts'Vue.prototype.$echarts=echarts特别提醒：ECharts5.0版本接口变更，echarts导入方式从echarts5.0接口更新，echarts导入方式从importechartsfrom变更'echarts'变为import*asechartsfrom'echarts'如果不使用该方法，图表将不会显示，并报错Cannotreadproperty'init'ofundefined。然后我们直接修改HelloWorld.vue（文件位置：src/components/HelloWorld.vue）方便显示。为了与本教程同步，请先清除HelloWorld.vue中的所有代码，然后按照以下步骤重新添加。在绘制表钱之前，我们需要准备一个DOM容器。特别注意，初学者经常会遇到“EChart不显示”的问题，原因之一是没有定义DOM容器，导致EChart无法初始化。然后在exportdefault{name:'hello',data(){return{msg:'Welcometokalacloud.com'}},mounted(){this.drawLine();},methods:{drawLine(){//基于刚刚准备好的DOM容器，初始化EChart实例letmyChart=this.$echarts.init(document.getElementById('myChart'))//绘制图表myChart.setOption({title:{text:'太阳系八大行星的卫星数量'},tooltip:{},xAxis:{data:["Mercury","Venus","Earth","Mars","Jupiter","Saturn","Venus","Neptune"]},yAxis:{},series:[{name:'quantity',type:'bar',data:[0,0,1,2,79,82,27,14]}]});}}}HelloWorld.vue完整代码文件位置：src/components/HelloWorld.vue接下来我们执行vue看看效果npmrunserve使用“Karayun”直接生成图表Straightup。有没有一种完全不了解前端，一行代码都不用写图表的方法？推荐您使用卡拉云。卡拉云内置各种风格的图表，完全不用懂前端，鼠标拖拽即可生成。Karayun是新一代低代码开发工具，免安装部署，一键访问包括MySQL在内的常用数据库和API。您可以根据自己的工作流程自定义开发。无需繁琐的前端开发，只需简单的拖拽即可快速构建企业内部工具。使用卡拉云后，原来需要三天的开发工作量可以减少到一个小时。欢迎免费试用卡拉云。延伸阅读：最好用的5个翻译API接口对比评测最好用的7个顶级API接口测试工具最好用的5个React富文本编辑器Postman教程-教你最好用的6个API接口测试免费天气API接口对比评测如何导出Vue中的数据到Excel表格