This commit is contained in:
姚宇浩 2024-10-23 09:01:01 +08:00
parent ee96424f17
commit be90156370
1 changed files with 44 additions and 37 deletions

View File

@ -3,7 +3,14 @@
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref, onBeforeMount, defineProps,watch } from "vue"; import {
onMounted,
reactive,
ref,
onBeforeMount,
defineProps,
watch,
} from "vue";
// echarts // echarts
import * as echarts from "echarts"; import * as echarts from "echarts";
const props = defineProps({ const props = defineProps({
@ -19,35 +26,27 @@ const data = reactive({
// //
var rich = { var rich = {
name: { white: {
color: "#666666", color: "#65FDFD",
fontSize: 14, align: "center",
padding: [8, 30, 0, 30], fontSize: 18,
fontWeight: "400", // padding: [21, 0],
align: "left",
}, },
value: { yellow: {
color: "#333", color: "#ffc20e",
fontSize: 15, fontSize: 18,
padding: [0, 30, 8, 30], padding: [5, 4],
fontWeight: "500", align: "center",
align: "left",
}, },
percent: { total: {
color: "#FFF", color: "#ffc20e",
align: "right", fontSize: 18,
fontSize: 15, align: "center",
fontWeight: "500",
//padding: [0, 5]
}, },
hr: { blue: {
borderColor: "#DFDFDF", color: "#49dff0",
width: "100%", fontSize: 16,
borderWidth: 1, align: "center",
height: 0,
},
cir: {
fontSize: 26,
}, },
}; };
var colorList = ["#3BAEFF", "#41EDD5", "#FFC371", "#797AFF"]; var colorList = ["#3BAEFF", "#41EDD5", "#FFC371", "#797AFF"];
@ -95,10 +94,15 @@ const getOption = () => {
color: "white", // color: "white", //
fontSize: 18, // fontSize: 18, //
}, },
formatter: "{b}:{c}" + "个\n\n", normal: {
formatter: function (param) {
return "{white|" + param.name + "}\n{yellow|" + param.value + "}";
},
borderWidth: 20, borderWidth: 20,
borderRadius: 4, borderRadius: 4,
padding: [0, -100], padding: [0, -50],
rich: rich,
},
}, },
labelLine: { labelLine: {
normal: { normal: {
@ -151,14 +155,17 @@ const setChart = () => {
// 使 // 使
myChart.setOption(data.option); myChart.setOption(data.option);
}; };
watch(()=>props.list,()=>{ watch(
data.list=props.list () => props.list,
() => {
data.list = props.list;
getOption(); getOption();
setChart(); setChart();
}) }
);
onBeforeMount(() => { onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
data.list=props.list data.list = props.list;
getOption(); getOption();
setChart(); setChart();
}, 600); }, 600);