1.下载echarts
npm i echarts --save
2.配置全局
在main.js
引用
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.echarts自己封装的引用文件
<template>
<view :id="id" :style="{width: chartW + 'upx', height: chartH + 'upx'}" class="view-charts" >
</view>
</template>
<script>
export default {
name: 'EchartsHome',
props: {
// 图表对应的id
id: {
type: String,
default: 'main'
},
// 图表宽度
chartW: {
type: Number,
default: 600
},
// 图表高度
chartH: {
type: Number,
default: 600
},
// 图表内容
option: {
type: Object,
default: () => null
}
},
mounted() {
this.init()
},
methods: {
init() {
const chartDom = document.getElementById(this.id)
let myChart = this.$echarts.init(chartDom)
myChart.setOption(this.option)
}
}
}
</script>
<style lang="scss">
.view-charts {
margin: 0 auto;
}
</style>
4.如此,就可以使用echarts啦