在vue使用Examples
程序员文章站
2022-05-17 21:03:36
...
首先在我们项目中下载运行的环境
npm install echarts -S
或者使用淘宝的镜像 (安装了淘宝镜像就不用安装了)建议使用
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
在vue项目中引用在main.js 文件中
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
在组件中使用
<div id="myChart" :style="{width: '300px', height: '300px'}">
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
}
</script>
把想引用的代码写入
事件就可以了,myChart.setOption()就是上面的这个位置
let myChart = this.$echarts.init(document.getElementById(‘myChart’))
这个是获取的html中的元素,并出初始化
最后在生命周期中调用就可以了
mounted()
上一篇: Vue3 文档学习笔记