vue echarts 饼图(环形图)

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 value
				for (let i = 0; i < echartData.length; i++) {
					if (echartData[i].name === name) {
						value = echartData[i].value
					}
				}
				var val = value
				return [`{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 = null
      sidebarContainer &&
        sidebarContainer.removeEventListener("transitionend", this.sidebarResizeHandler);
    },

    sidebarResizeHandler(e) {
      if (e.propertyName === "width") {
        this._thisForChart.chart.resize();
      }
    },

    // window 的尺寸发生变化的时候 会执行图表的resize
    addEventListenerToWindowResize(_this) {
      this._thisForWindow = _this;
      window.addEventListener("resize", this.windowResizeHandler);
    },
    removeEventListenerToWindowResize(_this) {
     this. _thisForWindow = null
      window.removeEventListener("resize", this.windowResizeHandler);
    },

    windowResizeHandler(e) {
      this._thisForWindow.chart.resize();
    },
		
  },
}
</script>

<style lang="scss" scoped>

</style>

展示效果图：