This commit is contained in:
parent
51886476f0
commit
d5099c40fb
|
@ -1,155 +0,0 @@
|
||||||
<template>
|
|
||||||
<div ref="chart" style="width: 100%; height: 300px"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { onBeforeMount, onMounted, reactive, ref } from "vue";
|
|
||||||
// 局部引入echarts核心模块
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
|
|
||||||
const chart = ref(); // 创建DOM引用
|
|
||||||
const data = reactive({
|
|
||||||
list: [],
|
|
||||||
month: [],
|
|
||||||
option: {},
|
|
||||||
color: [
|
|
||||||
"rgba(255, 252, 166, 1)",
|
|
||||||
"rgba(128, 229, 229, 1)",
|
|
||||||
"rgba(246, 255, 103, 1)",
|
|
||||||
"rgba(82, 174, 255, 1)",
|
|
||||||
],
|
|
||||||
});
|
|
||||||
let datas = [
|
|
||||||
{
|
|
||||||
name: "高血压",
|
|
||||||
value: 200,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "糖尿病",
|
|
||||||
value: 230,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "其他疾病患者",
|
|
||||||
value: 198,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "无重大疾病患者",
|
|
||||||
value: 80,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const getOption = () => {
|
|
||||||
data.option = {
|
|
||||||
color: data.color,
|
|
||||||
|
|
||||||
title: {
|
|
||||||
// 圆环标题
|
|
||||||
// text: "就业率", // 主标题
|
|
||||||
textStyle: {
|
|
||||||
// 主标题样式
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
// left: "24%", // 定位到适合的位置
|
|
||||||
// top: "38%", // 定位到适合的位置
|
|
||||||
// subtext: `100%`, // 副标题
|
|
||||||
// subtextStyle: {
|
|
||||||
// // 副标题样式
|
|
||||||
// color: "#00FFFB",
|
|
||||||
// fontSize: 22,
|
|
||||||
// fontWeight: "bold",
|
|
||||||
// },
|
|
||||||
// textAlign: "center", // 主、副标题水平居中显示
|
|
||||||
},
|
|
||||||
// grid: {
|
|
||||||
// top: "13%",
|
|
||||||
// left: "1%",
|
|
||||||
// right: "1%",
|
|
||||||
// bottom: "0%",
|
|
||||||
// },
|
|
||||||
legend: {
|
|
||||||
itemHeight: 10,
|
|
||||||
itemWidth: 25,
|
|
||||||
icon: "rect",
|
|
||||||
orient: "vertical",
|
|
||||||
top: "center",
|
|
||||||
right: "16%",
|
|
||||||
itemGap: 20, // 垂直间距
|
|
||||||
textStyle: {
|
|
||||||
align: "left",
|
|
||||||
color: "#ffffff",
|
|
||||||
verticalAlign: "middle",
|
|
||||||
rich: {
|
|
||||||
name: {
|
|
||||||
width: 80,
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
width: 30,
|
|
||||||
align: "right",
|
|
||||||
fontFamily: "Medium",
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
rate: {
|
|
||||||
width: 20,
|
|
||||||
align: "right",
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: datas,
|
|
||||||
formatter: (name) => {
|
|
||||||
if (datas.length) {
|
|
||||||
const item = datas.filter((item) => item.name === name)[0];
|
|
||||||
return `{name|${name}} {value| ${item.value}}`;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: "item",
|
|
||||||
formatter: "{b}:{d}",
|
|
||||||
},
|
|
||||||
calculable: true,
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "",
|
|
||||||
type: "pie",
|
|
||||||
// radius: ["45%", "90%"],
|
|
||||||
// center: ["25%", "50%"],
|
|
||||||
|
|
||||||
roseType: "radiuas",
|
|
||||||
labelLine: {
|
|
||||||
normal: {
|
|
||||||
length: 30, // 改变标示线的长度
|
|
||||||
length2: 70,
|
|
||||||
lineStyle: {
|
|
||||||
color: "white", // 改变标示线的颜色
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
formatter: "{b}:{c}" + "个\n\n",
|
|
||||||
borderWidth: 10,
|
|
||||||
borderRadius: 4,
|
|
||||||
fontSize: 16,
|
|
||||||
padding: [0, -80],
|
|
||||||
},
|
|
||||||
data: datas,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
};
|
|
||||||
const setChart = () => {
|
|
||||||
var myChart = echarts.init(chart.value);
|
|
||||||
myChart.setOption(data.option);
|
|
||||||
};
|
|
||||||
// 使用生命钩子
|
|
||||||
onBeforeMount(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
getOption();
|
|
||||||
setChart();
|
|
||||||
}, 600);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
|
@ -467,7 +467,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="flex1" style="margin-top: 10px">
|
<div class="flex1" style="margin-top: 10px">
|
||||||
<div class="yd_title last_1">
|
<div class="yd_title last_1">
|
||||||
<div class="gTitle">( 近30天 )</div>
|
<!-- <div class="gTitle">( 近30天 )</div> -->
|
||||||
<div class="animate-border">
|
<div class="animate-border">
|
||||||
<i></i>
|
<i></i>
|
||||||
<i></i>
|
<i></i>
|
||||||
|
|
Loading…
Reference in New Issue