echart如何引入vue呢简单分为3步 1.win+r 输入 npm install echarts -S 安装echarts依赖 2.main.js 全局配置 import * as echarts from ‘echarts’ //引入echarts Vue.prototype.$echarts = echarts //注册组件 3.新建vue文件渲染(要注意的地方都标注了)
<template>
<div class="echarts">
<div style="width: 100vw;height: 100vh;" id="container"></div>
?注意必须给宽高
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
var echart = this.$echarts.init(document.getElementById("container"))
var option = {
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["衬衫","鞋子","雪纺衫","裤子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10]
}]
};
}
}
}
</script>
|