116 lines
2.2 KiB
Vue
116 lines
2.2 KiB
Vue
<template>
|
|
<div>
|
|
<div id="circlecz" style="width: 500px; height: 260px"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import * as echarts from "echarts";
|
|
import { ref, onMounted, watch, defineProps } from "vue";
|
|
const props = defineProps({
|
|
data: { type: Array }
|
|
});
|
|
watch(
|
|
() => props.data,
|
|
() => {
|
|
lineChartFn();
|
|
},
|
|
{
|
|
deep:true
|
|
}
|
|
);
|
|
function lineChartFn() {
|
|
var chartDom = document.getElementById("circlecz");
|
|
var myChart = echarts.init(chartDom, "dark");
|
|
var option;
|
|
var scale = 1;
|
|
// var echartData = props.data.map((item) => {
|
|
// return {
|
|
// value: item.value,
|
|
// name: item.name
|
|
// };
|
|
// });
|
|
var rich = {
|
|
yellow: {
|
|
color: "#ffc72b",
|
|
fontSize: 14 * scale,
|
|
padding: [5, 4],
|
|
align: "center"
|
|
},
|
|
total: {
|
|
color: "#ffc72b",
|
|
fontSize: 14 * scale,
|
|
align: "center"
|
|
},
|
|
white: {
|
|
color: "#fff",
|
|
align: "center",
|
|
fontSize: 14 * scale,
|
|
padding: [0, 0]
|
|
},
|
|
blue: {
|
|
color: "#49dff0",
|
|
fontSize: 14 * scale,
|
|
align: "center"
|
|
}
|
|
};
|
|
|
|
option = {
|
|
backgroundColor: "rgba(0,0,0,0)",
|
|
// title:{
|
|
// show:true,
|
|
// text: '使用次数'
|
|
// },
|
|
legend: {
|
|
orient: "vertical",
|
|
right: 0,
|
|
top: 5
|
|
},
|
|
series: [
|
|
{
|
|
name: "使用次数",
|
|
type: "pie",
|
|
radius: ["32%", "50%"],
|
|
hoverAnimation: false,
|
|
color: [
|
|
"#c487ee",
|
|
"#deb140",
|
|
"#49dff0",
|
|
"#034079",
|
|
"#6f81da",
|
|
"#00ffb4"
|
|
],
|
|
label: {
|
|
normal: {
|
|
formatter: function (params, ticket, callback) {
|
|
return (
|
|
"{white|" +
|
|
params.name +
|
|
"}\n{yellow|" +
|
|
params.value +
|
|
"}\n{blue|" +
|
|
params.percent +
|
|
"%}"
|
|
);
|
|
},
|
|
rich: rich
|
|
}
|
|
},
|
|
data: props.data
|
|
}
|
|
]
|
|
};
|
|
option && myChart.setOption(option);
|
|
window.onresize = function () {
|
|
myChart.resize();
|
|
};
|
|
document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
|
|
}
|
|
onMounted(() => {
|
|
lineChartFn();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|