axios vue 动态date_vue结合axios动态引用echarts

父组件pie.vue

import EchartsCoponent from '@/components/EchartsComponent'

export default {

name: 'echarts',

data () {

return {

rightData:[]

}

},

mounted() {

this.bindData();

},

methods: {

bindData() {

this.$axios

.get('static/data/piedata.json')

.then(res => {

let pro = res.data;

this.$store.dispatch('axiostest', pro);

this.rightData = this.$store.state.MsgRight;

})

.catch(err => {

console.log(err);

});

}

},

components: {

EchartsCoponent

}

}

子组件EchartsComponent.vue：

// 引入echarts

import echarts from 'echarts';

export default {

name: 'EchartsComponents',

props: {

// 接收父组件传递过来的信息

chartData: {

type: Array,

default: () => []

}

},

data() {

return {};

},

methods: {

drawChart() {

const vm = this;

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById(this.echarts));

// 绘制图表

let options ={

//标题设置

title: {

text: 'ECharts测试',

x: 'center',

y: 'bottom',

textStyle: {

fontSize: 16,

fontWeight: 'bolder',

color: '#999'

}

},

// 鼠标移动到图上的文字显示

tooltip: {

trigger: 'item',

formatter: '{a}
{b}: {c} ({d}%)'

},

series: [

{

name: '销量',

type: 'pie',

radius: ['50%', '65%'], //变成空心圆,分别类似于x，y

// data: [5, 20, 36, 10, 10, 20]

label: {

normal: {

show: false, //隐藏指示文字

position: 'center'

},

emphasis: {

show: true,

textStyle: {

fontSize: '15',

fontWeight: 'bold'

}

}

},

//饼图的指示线

labelLine: {

normal: {

show: false

}

},

data: this.chartData

}

]

}

myChart.setOption(options)

this.autoActive(myChart, options)

},

autoActive(chart, option) {

this.intervalFun(chart, option)

},

intervalFun(chart, option) {

let dataIndex = -1

let dataLen = option.series[0].data.length

this.interval = setInterval(() => {

chart.dispatchAction({

type: 'downplay',

seriesIndex: 0,

dataIndex

})

dataIndex = (dataIndex + 1) % dataLen

chart.dispatchAction({

type: 'highlight',

seriesIndex: 0,

dataIndex

})

}, 1000)

}

},

computed: {

echarts() {

return 'echarts' + Math.random() * 100000;

}

},

mounted: function() {

const vm = this;

vm.$nextTick(() => {

vm.drawChart();

});

},

created: () => {}

};

.xiao-ring {

float: left;

margin: 0 auto;

text-align: center;

}