一、话不多说上代码：
var echarts = require('echarts');
var options = {
deep: true,
// 插入父节点时调用
inserted: function (el, binding) {
let myChart = echarts.init(el)
let option = binding.value
myChart.showLoading()
myChart.setOption(option, true)
myChart.hideLoading()
let oldResize = window.onresize
window.onresize = () => {
oldResize()
}
setTimeout(function() {
myChart.resize();
}, 0)
},
update: function (el, binding) {
let myChart = echarts.getInstanceByDom(el)
let option = binding.value
myChart.showLoading()
myChart.setOption(option, true)
myChart.hideLoading()
let oldResize = window.onresize
window.onresize = () => {
oldResize()
}
setTimeout(function() {
myChart.resize();
}, 0)
}
};
export {
options
}
用法：
main.js里引入生成指令
import {
options
} from './libs/directives/echarts'
// echarts
Vue.directive('echarts', options)
组件里
<template>
<div v-if="ready" v-echarts="option"> </div>
</template>
<script>
export default {
data(){
return {
ready:false,
option:""
}
}
methods:{
charts(){
let option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series: [
{
name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
this.option = option
this.ready = true
}
}
}
</script>
