父组件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;
}