vue.js能不能使用echarts-创新互联
小编给大家分享一下vue.js能不能使用echarts,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联主营鼓楼网站建设的网络公司,主营网站建设方案,重庆APP软件开发,鼓楼h5小程序定制开发搭建,鼓楼网站营销推广欢迎鼓楼等地区企业咨询vue.js能用echarts,具体操作方法:1、在控制台中输入“npm install echarts --save”命令安装echarts依赖;2、在main.js中进行全局引入,就可以使用echarts创建图表。
最近工作中需要用到echarts,由于项目是用的vue-cli开发的。在网上搜到vue中合成了vue-echarts,但是不想使用vue中规定好的数据格式,于是就自己做了一个vue项目引用原生echarts的简单demo,实现过程如下:用了两种实现方式
准备工作
1、安装echarts依赖
控制台输入:npm install echarts --save
2、全局引入
main.js中引入
import echarts from 'echarts' Vue.prototype.$echarts = echarts
创建图表
第一种创建方式
在一个.vue文件中引入多张图表
创建WelcomePage.vue
第一种在vue中使用echart的方式
实现效果如下图:
第二种实现方式(以组件的形式)
创建父组件 father.vue
{{ msg }}
第二种方式:通过组件的方式进行页面渲染
创建子组件barGraph.vue
{{ msg }}
创建pieGraph.vue
{{ msg }}
效果实现如下:
路由文件如下:
import WelcomePage from '@/components/WelcomePage' import Father from '@/components/father' import BarGraph from '@/components/bargraph' import PieGraph from '@/components/piegraph' export default new Router({ routes: [ { path: '/', name: 'WelcomePage', component: WelcomePage }, { path: '/father', name: 'father', component: Father, children:[ { path: '/bargraph', name: 'bargraph', component: BarGraph }, { path: '/piegraph', name: 'piegraph', component: PieGraph } ] }, ] })
以上是“vue.js能不能使用echarts”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文名称:vue.js能不能使用echarts-创新互联
网页链接:http://myzitong.com/article/cdoodc.html