vue echarts 饼图(环形图) ，echarts版本为5.3.3

可以自定义颜色

<template><div><div id="pieChart1" ref="pieChartRef1" style="width: 100%; height: 250px"></div></div></template><script>
import * as echarts from 'echarts';
export default {name: '',props: {},components: '',data() {return {chart: null,_thisForChart: null,_thisForWindow: null,colorItem: {"北京": '#ff6161',"上海": '#e0815b',"广州": '#ffaf33',"深圳": '#637be6',"成都": '#a1b2ff',"西安": '#b3daff',},}},created() {},mounted () {this.$nextTick(() => {this.initPieChart();this.addEventListenerToSidebarContainer(this)this.addEventListenerToWindowResize(this)});},beforeDestroy () {this.removeEventListenerToSidebarContainer()this.removeEventListenerToWindowResize()},computed: {},watch: {},  methods: {initPieChart () {let echartData = [{name:'北京',value: '0.99',},{name:'上海',value: '0.29',},{name:'广州',value: '0.44',},{name:'深圳',value: '0.14',},{name:'成都',value: '0.21',},{name:'西安',value: '0.77',},]var chartDom = document.getElementById('pieChart1');this.chart = echarts.init(chartDom);let handleEchartData = echartData .map((item3) => {return {value: item3.value,name: item3.name,itemStyle: {color: this.colorItem[item3.name]}}})let option = {// color: ['#EE3F3F','#ff6161','#e0815b','#e0a188','#FFB441','#FFDAA1',],// tooltip: {// show: true,// trigger: 'item',// backgroundColor: 'rgba( 0, 0, 0,0.7)',// borderColor: 'rgba( 0, 0, 0,0.7)',// triggerOn: "click", // 点击事件// enterable: true, // 鼠标可移入提示框浮层中，默认为false// position: ['53%','40%'],// fontSize: 10,// formatter:function(params, ticket,callback) {// 实际请求接口，获取对应的数据// let req_data = {//   name: params.name,// }// testApi.getDetail(req_data).then((res) => {//   if (res.data && res.data.length) {//     for(let i = 0; i < res.data.length; i++) {//     list.push(//       "<div style='display:flex;align-items:center;justify-content:space-between;transform:scale(0.9)'><span style='padding-right:10px;margin-bottom: -20px;color: #fff;'>" + res.data[i].code + "</span>" + "<span style='padding-right:10px;margin-bottom: -20px;color: #fff;'>" + res.data[i].name + "</span>"+  "<span style='padding-right:10px;margin-bottom: -20px;color: #fff;'>" + "权重:" + res.data[i].WEIGHT + '%' + "</span></div>"//     )//   }//   listItem = list.length < 12 ? "<div style='margin-bottom:8px;padding-bottom:8px;'>" + list.join('<br/>') + "</div>" : "<div style='height: 235px;overflow-y: auto;margin-bottom:8px;padding-bottom:8px;'>" + list.join('<br/>') + "</div>"//   callback(ticket, listItem)//   } else {//     listItem = "<div>"+ '数据为空' + "</div>"//     callback(ticket, listItem)//   }// })// return "<span>"+ "数据请求中..." + "</span>"// }// },legend: {bottom: 0,textStyle: {rich: {name: {},value: {align: 'right',padding: [0, -80, 0 ,0],}}},formatter: function(name) {let valuefor (let i = 0; i < echartData.length; i++) {if (echartData[i].name === name) {value = echartData[i].value}}var val = valuereturn [`{name|${name}}` + '：' + `{value|${val}%}`]},},series: [{name: '',type: 'pie',radius: ['45%', '65%'],center:['50%' ,'40%'],avoidLabelOverlap: true,label: {show: false,position: 'center',// formatter: function(params) {// 	return '{name|' +  params.name + '}' + '\n' +  '{value|' + params.data.value + '%' + '}'// }, // rich: {// 	name: {// 		fontSize: 14,// 	},// 	value: {// 		fontSize: 20,// 		lineHeight: 30,// 	}// }},emphasis: {label: {show: true,lineHeight: 30,formatter: function(params) {return '{name|' +  params.name + '}' + '\n' +  '{value|' + params.data.value + '%' + '}'}, rich: {name: {// color: "inherit",fontSize: 14,},value: {color: "inherit",// fontSize: 20,// lineHeight: 30,}},textStyle: {fontSize: 20,fontWeight: 700,},}  },labelLine: {show: false,length: 7,length2: 6,lineStyle: {}},data: handleEchartData,}]};this.chart.setOption(option);},// 监听侧边栏导航的宽度发生变化addEventListenerToSidebarContainer(_this) {let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];this._thisForChart = _this;sidebarContainer &&sidebarContainer.addEventListener("transitionend", this.sidebarResizeHandler);},removeEventListenerToSidebarContainer() {let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];this._thisForChart = nullsidebarContainer &&sidebarContainer.removeEventListener("transitionend", this.sidebarResizeHandler);},sidebarResizeHandler(e) {if (e.propertyName === "width") {this._thisForChart.chart.resize();}},// window 的尺寸发生变化的时候 会执行图表的resizeaddEventListenerToWindowResize(_this) {this._thisForWindow = _this;window.addEventListener("resize", this.windowResizeHandler);},removeEventListenerToWindowResize(_this) {this. _thisForWindow = nullwindow.removeEventListener("resize", this.windowResizeHandler);},windowResizeHandler(e) {this._thisForWindow.chart.resize();},},
}
</script><style lang="scss" scoped></style>

展示效果图：