1、在项目下使用命令行,初始化工程的 npm 环境并安装 echarts
npm install echarts --save
2、在入口文件main.js中全局引入
// 引入echarts
import echarts from 'echarts'
//如果是5.0以上版本则把上面换成 import * as echarts from 'echarts'
//挂载到Vue原型上
Vue.prototype.$echarts = echarts
3、组件中使用 ( 需要给一定的宽高)
<template>
<div style="width: auto;height: 400px" id="main">
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: "echarts",
data() {
return {}
},
mounted() {
this.echartsInit()
},
methods:{
echartsInit() {
echarts.init(document.getElementById('main')).setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
})
}
}
}
</script>