本文主要是介绍echarts 环图设置背景圈、label文字和线的样式处理、legend样式处理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<template><div class='screen3-left-2' :ref="refName" :class="refName"></div>
</template>
<script>
import * as echarts from 'echarts';
import $ from 'jquery';export default {components: {},data() {return {myChart: null,chartData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],refName: 'screen3-left-2'}},watch: {chartData: {handler: function (val) {this.dealData(val);},deep: true},},mounted() {var chartDom = this.$refs[this.refName];this.myChart = echarts.init(chartDom);this.chartData && this.dealData(this.chartData);window.addEventListener("resize", () => {this.chartData && this.dealData(this.chartData);this.myChart.resize();});},computed: {},methods: {dealData(val) {const img = require('@/assets/knowyou/screen3-left-2.png');const hei = $('.screen3-left-2')[0].offsetHeight;if (val.length > 0) {let seriesData = [];for (let i = 0; i < val.length; i++) {seriesData.push({name: 'aaa' + i,value: val[i]});}this.initChart(seriesData, hei, img);} else {this.myChart.clear();}},initChart(seriesData = [], hei, img) {var option = {color: ['#49dff2', '#29bae9', '#079aee', '#2171d4', '#66a69b', '#95b6de', '#adf2cc', '#3a5ac3', '#b8d2c3', '#5c83ae', '#49dff2', '#29bae9', '#079aee', '#2171d4', '#66a69b', '#95b6de', '#adf2cc', '#3a5ac3', '#b8d2c3', '#5c83ae'],tooltip: {trigger: 'item',},legend: {icon: 'circle',itemWidth: 10,itemHeight: 10,itemGap: 15, // 每一个item之间的间距width: '400',top: 'center',left: '62%',orient: 'vertical',formatter: (name, value) => {let dats = name.split('-');return `{name|${dats[0]}}\t\t\t{percent|${dats[1]}}`},textStyle: {color: '#fff',rich: {name: {fontSize: 12,color: '#7f99b7',padding: [0, 0, 0, 0],width: 40},percent: {fontSize: 14,fontWeight: 400,color: "white",padding: [0, 0, 0, 0],},}}},series: [{type: 'pie',radius: ['44%', '60%'],center: ['50%', '50%'],hoverAnimation: false, // 鼠标经过的动画 animation: false,selectedMode: false,silent: true, // 不响应和触发鼠标事件tooltip: {show: false},itemStyle: {normal: {label: { show: false },labelLine: { show: false },color: 'rgba(255,144,0,0.4)'}},data: [{value: 0,z: 1,label: {show: true,position: 'center',formatter: () => {return `{bg|}`},rich: {bg: {left: 'center',width: hei * 0.32,height: hei * 0.32,backgroundColor: {image: img}}}}}],},{type: 'pie',radius: ['44%', '60%'],center: ['50%', '50%'],avoidLabelOverlap: false,label: {formatter: (val) => {return `{name|${val.name}}\n${val.percent}%`},minMargin: 5,edgeDistance: 10,lineHeight: 20,textStyle: {color: '#fff',rich: {name: {fontSize: 14,color: '#12bedd',padding: [0, 0, 0, 0],width: 40},}}},labelLine: {length: 25,length2: 20,maxSurfaceAngle: 80,lineStyle: {color: '#6590bf',}},labelLayout: (params) => {const isLeft = params.labelRect.x < this.myChart.getWidth() / 2;const points = params.labelLinePoints;points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;return params;},data: seriesData},]};this.myChart && this.myChart.clear();option && this.myChart.setOption(option);},},
}
</script>
<style lang='scss' scoped>
.screen3-left-2 {width: 100%;height: 100%;
}
</style>
这篇关于echarts 环图设置背景圈、label文字和线的样式处理、legend样式处理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
