<template>
<div class="content">
<div
ref="charts"
style="width: 1200px; height: 1000px; margin: 0 auto"
></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
points: [],
};
},
mounted() {
this.initCharts();
},
methods: {
initCharts() {
const charts = echarts.init(this.$refs["charts"]);
let arr = [
{
value: 335,
legendname: "种类01",
name: "种类01 335",
itemStyle: {
color: "#8d7fec",
},
},
{
value: 310,
legendname: "种类02",
name: "种类02 310",
itemStyle: {
color: "#5085f2",
},
},
{
value: 234,
legendname: "种类03",
name: "种类03 234",
itemStyle: {
color: "#e75fc3",
},
},
{
value: 154,
legendname: "种类04",
name: "种类04 154",
itemStyle: {
color: "#f87be2",
},
},
{
value: 335,
legendname: "种类05",
name: "种类05 335",
itemStyle: { color: "#f2719a" },
},
{
value: 335,
legendname: "种类06",
name: "种类06 335",
itemStyle: { color: "#fca4bb" },
},
{
value: 335,
legendname: "种类07",
name: "种类07 335",
itemStyle: { color: "#f59a8f" },
},
];
arr = arr.map((item) => {
return {
...item,
emphasis: {
labelLine: {
show: true,
},
},
label: {
normal: {
show: (function () {
if (
item.legendname == "种类01" ||
item.legendname == "种类02"
|| item.legendname == "种类03"
|| item.legendname == "种类04"
|| item.legendname == "种类05"
|| item.legendname == "种类06"
) {
return false;
} else {
return true;
}
})(),
formatter: (params) => {
return params.percent + "|" + params.value;
},
borderWidth: 0,
borderRadius: 4,
padding: [0, -86],
height: 70,
fontSize: 13,
align: "center",
color: "#ffffff",
rich: {
b: {
fontSize: 12,
lineHeight: 20,
color: "#ffffff",
padding: [0, 0, 5, 0],
},
c: {
fontSize: 20,
lineHeight: 20,
color: "#ffffff",
},
},
},
},
labelLine: {
show: (function () {
if (item.legendname == "种类01" || item.legendname == "种类02") {
return false;
} else {
return true;
}
})(),
lineStyle: {
color: "#ffffff",
},
},
};
});
let option1 = {
backgroundColor: "#05274C",
grid: {
left: "20%",
},
color: [
"#2AC9FD",
"#76FBC0",
"#35C96E",
"#FCC708",
"#48B188",
"#5957C2",
"#4A5D73",
],
tooltip: {
trigger: 'item',
formatter:function (parms){
var str= parms.seriesName+""+
parms.marker+""+parms.data.legendname+""+
"数量："+ parms.data.value+""+
"占比："+ parms.percent+"%";
return str ;
}
},
legend: {
type:"scroll",
orient: 'vertical',
left:'80%',
align:'left',
top:'middle',
textStyle: {
color:'#8C8C8C'
},
height:250
},
series: [
{
color: [
"#2AC9FD",
"#76FBC0",
"#35C96E",
"#FCC708",
"#48B188",
"#5957C2",
],
type: "pie",
radius: "50%",
labelLine: {
normal: {
length: 25,
length2: 120,
lineStyle: {
type: "solid",
},
},
},
data: [...arr],
},
],
};
charts.setOption(option1);
},
},
};
</script>
<style scoped>
.content {
background-color: #0e2152;
height: 100%;
}
</style>
