封装echarts插件
1.首先在src下新建一个plugins文件夹,然后在这个文件夹下新建echarts.js文件

在echarts.js中引入
import echarts from 'echarts'
const install = function (Vue){
Object.defineProperties(Vue.prototype,{
$charts:{
get() {
return {
echartsDemo:function (id) {
var myEchart = echarts.init(document.getElementById(id))
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
}
myEchart.setOption(option)
}
}
}
}
})
}
export default install
2.在项目中使用步骤 在main.js 中引入注册 
import Echarts from './plugins/echarts'
Vue.use(Echarts)
3.在组件中使用封装的echarts插件
<templete>
<div id="demo"></div>
</templete>
<script>
export default {
data(){
return{
}
},
mounted(){
this.$charts.echartsDemo("demo")
}
}
</script>
<style>
#demo{
width:500px;
height:500px;
}
</style>
效果图
 
|