一、話不多說上代碼：
var echarts = require('echarts');
var options = {
? ? deep: true,
? ? // 插入父節(jié)點時調(diào)用
? ? 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/>: {c} (u0z1t8os%)"
? ? },
? ? legend: {
? ? ? ? orient: 'vertical',
? ? ? ? x: 'left',
? ? ? ? data:['直接訪問','郵件營銷','聯(lián)盟廣告','視頻廣告','搜索引擎']
? ? },
? ? 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:'聯(lián)盟廣告'},
? ? ? ? ? ? ? ? {value:135, name:'視頻廣告'},
? ? ? ? ? ? ? ? {value:1548, name:'搜索引擎'}
? ? ? ? ? ? ]
? ? ? ? }
? ? ]
};
this.option = option
this.ready = true
? ? ? }
? }
}
</script>
