1、首先下载echarts，并且全局引入echarts
方法：从 npm 安装
npm install echarts在 main.js 文件中全局引入
然后创建一个vue文件，名字随便起，比如 pieChart.vue，话不多说，直接上才艺：（复制粘贴即可食用）
<template><div class="container"><div ref="pieChart" style="width: 100%; height: 100%"></div></div>
</template><script>
export default {components: {},props: {},data() {return {chart: null,colorList: ["#5470C6", "#91CC75", "#FAC858", "#FF7070"],pieData: [{name: "未开始",value: 5,itemStyle: {normal: {shadowBlur: 15,shadowColor: "#DF3AB9",},},},{name: "正常完成",value: 4,itemStyle: {normal: {shadowBlur: 15,shadowColor: "#18C79C",},},},{name: "超期完成",value: 3,itemStyle: {normal: {shadowBlur: 15,shadowColor: "#8555F9",},},},{name: "超期未完成",value: 2,itemStyle: {normal: {shadowBlur: 15,shadowColor: "#F09228",},},},],};},computed: {},watch: {},created() {},mounted() {this.initChart();},methods: {initChart() {let that = this;this.chart = this.$echarts.init(this.$refs.pieChart);let option = {// backgroundColor: "#123756",color: that.colorList,tooltip: {trigger: 'item',borderColor: 'rgba(255,255,255,.3)',backgroundColor: 'rgba(13,5,30,.6)',borderWidth: 1,padding: 5,confine: true, // 将tooltip框限制在图表的区域内textStyle: {fontSize: 14,color: '#fff',},formatter: function (parms) {var str =parms.name +'：' +parms.data.value;return str;},// transitionDuration: 1,// trigger: "item",},legend: {type: "scroll",orient: "horizontal",icon: "square",top: "6%",left: "center",align: "auto",textStyle: {color: "#fff",},data: that.pieData,},series: [{name: "",type: "pie",animationDurationUpdate: 400,animation: true,radius: ["45%", "70%"],center: ["50%", "57%"],avoidLabelOverlap: false,itemStyle: {borderRadius: 5,borderWidth: 2,},label: {show: false,position: "center",// formatter: "{c_style|{c}}{b_style|{b}}",formatter: "{b_style|{b}}",rich: {b_style: {fontSize: 24,fontWeight: 400,color: "#00C6FF",},c_style: {padding: [5, 0, 15, 0],fontSize: 56,fontWeight: "bold",color: "#01F7FF",},},},emphasis: {label: {show: true,fontSize: "14",fontWeight: "normal",},},labelLine: {show: false,},data: that.pieData,},],};option && this.chart.setOption(option);this.handleChartLoop(option, this.chart);},// 饼图自动轮播handleChartLoop(option, myChart) {if (!myChart) {return;}let currentIndex = -1; // 当前高亮图形在饼图数据中的下标let changePieInterval = setInterval(selectPie, 3000); // 设置自动切换高亮图形的定时器// 取消所有高亮并高亮当前图形function highlightPie() {// 遍历饼图数据，取消所有图形的高亮效果for (var idx in option.series[0].data) {myChart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: idx,});}// 高亮当前图形myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: currentIndex,});// 轮播 tooltipmyChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: currentIndex,});}// 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形myChart.on("mouseover", (params) => {if (params.componentType == "graphic") {return;}clearInterval(changePieInterval);currentIndex = params.dataIndex;highlightPie();});// 用户鼠标移出时，重新开始自动切换myChart.on("mouseout", (params) => {if (changePieInterval) {clearInterval(changePieInterval);}changePieInterval = setInterval(selectPie, 1000);});// 高亮效果切换到下一个图形function selectPie() {var dataLen = option.series[0].data.length;currentIndex = (currentIndex + 1) % dataLen;highlightPie();}},},beforeDestroy() {if (this.chart) {this.chart.dispose();}},
};
</script>
<style scoped>
.container {width: 240px;height: 240px;
}
</style>
