Vue中Echarts扇形图legend实现⽂字百分⽐整齐排列效果图
主要实现两个功能，左侧⽂字后增加百分⽐，环形图中间，默认显⽰⽂字及百分⽐，⿏标滑过切换。
echarts安装和引⼊
npm install echarts --save
import * as echarts from "echarts"
完整代码
<template>
<div id="app">
<div class="chart_content">
<div>环形图</div>
<chartThree :data="chart_two_data" :legend="legendData" @loadedChart="clickShow"></chartThree>
</div>
</div>
</template>
<script>
import chartThree from './components/chart/chart_three.vue'
export default {
name: 'app',
components: {
chartThree
},
data() {
return {
chart_two_data: [{
value: 1048,
name: '⽕影'
},
{
value: 735,
name: '海贼'
},
{
value: 580,
name: '死神'
},
{
},
{
value: 300,
name: '幽游⽩书'
},
{
value: 300,
name: '猫和⽼⿏'
}
],
legendData: {
orient: 'vertical',
left: '5%',
top: 'middle',
icon: 'circle',
selectedMode: false,
textStyle: {
rich: {
a: {
align: "left",
width: 50
},
b: {
align: "left",
fontWeight: "bold",
width: 40
}
}
}
}
}
},
computed: {
},
mounted() {
// 设置环形图左侧legend的百分⽐
const that = this;
this.legendData.formatter = function(name) {    //该函数⽤于设置图例显⽰后的百分⽐
var list = that.chart_two_data;
var total = 0;
var value;
if (list && list.length) {
list.forEach(item => {
total += item.value;
if (item.name === name) {
value = item.value;
}
});
}
var p = (value / total) * 100;
p = p.toFixed(2);
return `{a|${name}}  {b|${p}%}`;
};
},
methods: {
clickShow(dom) {
dom.dispatchAction({
type: "downplay"
});
// 默认设置第⼀个值得区域⾼亮
dom.dispatchAction({
dataIndex: 0
});
<("click", e => {
// 这⾥执⾏点击后的操作
console.log("点击触发", e)
});
<("mouseover", e => {
// 关闭⾼亮
dom.dispatchAction({
type: "downplay"
});
// 设置当前进⼊的区域内容⾼亮
dom.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex
});
});
}
}
}
</script>
<style>
#app {
display: flex;
flex-wrap: wrap;
}
.chart_content {
border: 1px solid #ededed;
width: calc((100% - 30px)/3);
height: 400px;
margin: 0 10px 10px 0;
}
.chart_content:nth-child(3n) {
margin-right: 0;
}
</style>
组件代码
<template>
<div class="chart" v-resize="resizeCharts" ref="barChart"></div> </template>
<script>
import * as echarts from "echarts";
export default {
name: "barChart",
props: {
data: {
type: Array,
default () {
return [];
},
},
legend: {
type: Object,
},
},
data() {
return {
charts: null,
};
},
computed: {},
methods: {
resizeCharts() {
size();
},
initCharts() {
this.$nextTick(() => {
this.charts = echarts.init(this.$refs.barChart);
this.charts.clear();
this.setOption();
this.$emit("loadedChart", this.charts);
});
},
setOption() {
const option = Option();
this.charts.setOption(option, true);
},
getOption() {
const option = {
tooltip: {
trigger: 'item'
},
legend: this.legend,
series: [{
name: '访问来源',
type: 'pie',
radius: ['60%', '80%'], //圆环的⼤⼩
center: ['60%', '50%'], //圆环的位置
avoidLabelOverlap: false,//开启后可以防⽌标签之间的重叠
label: {
show: false,//是否默认显⽰中间⽂字如果设置为true会有⽂字重叠的问题      position: 'center',
formatter: `{d|{d}%} \n {b|{b}}`,  //显⽰圆环中间的⽂字和百分⽐
rich: {
d: {
fontSize: 28,
lineHeight: 30,
fontWeight: "bold",
color: "#333333",
align: "center"
},
b: {
fontSize: 14,
color: "#666666",
align: "center"
}
}
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
data: this.data
}]
};
return option;
},
},
mounted() {
this.initCharts();
},
beforeDestroy() {
this.charts && this.charts.dispose();  this.charts = null;
},
watch: {
data: {margin属性值可以为百分比
handler() {
this.setOption();
},
},
yAxis: {
handler() {
this.setOption();
},
},
},
components: {},
};
</script>
<style scoped>
.chart {
width: 100%;
height: 100%;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。