Vue实战090：Vue使用ECharts图表详解( 二 )
为了方便学习 ， 下面附上本文用到的源码：
【Vue实战090：Vue使用ECharts图表详解】> npm install echarts --save**********省略*************+ echarts@4.9.0added 2 packages in 19.44s---------------------------------------------------------------//main.js文件import echarts from 'echarts'// 引入echartsVue.prototype.$echarts = echarts//注册echarts组件export default {name: 'echarts',methods: {drawLine () {let dom = this.$refs.echartsthis.$echarts.init(dom).setOption({title: { text: '在Vue中使用echarts' },tooltip: {},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]})}},mounted () {this.drawLine()}}-------------------------------------------------------------------// 引入基本模板let echarts = require('echarts/lib/echarts')// 引入柱状图组件require('echarts/lib/chart/bar')// 引入提示框和title组件require('echarts/lib/component/tooltip')require('echarts/lib/component/title')
推荐阅读
- Zen3架构！锐龙5000G桌面APU样品现身：单核战平i9-10900K
- 影驰发布经典版RTX 3090/3080：暴力涡轮风扇成了新潮
- 最强做工配顶级散热！iGame RTX 3090 Vulcan OC评测
- 20款游戏实战！酷睿i7-10750H、锐龙9 4900H到底谁更强？
- 24GB海量显存加持的RTX 3090为何被称为生产力神器？
- 微星新发RTX 3090：神似11年前费米GTX 480
- 项目实战 | 记一次对某猥琐PHP后门的爆菊
- 14599元！iGame RTX 3090 Neptune水冷版上市：轻松降温10℃
- Redis集群做法的难点，百万并发客户端「实战」
- GTC DLI 实战培训第一课：理论与实践入门