This commit is contained in:
duanxiaohai 2024-07-13 16:42:12 +08:00
parent 78ffe64628
commit 28c0308bbe
3 changed files with 168 additions and 12 deletions

View File

@ -200,6 +200,7 @@ import DialogMap from "./dialog/dialogMap.vue";
import right2 from "./echart_analyze/right2.vue";
import right1 from "./echart_analyze/right1.vue";
import jypx from "./echart_analyze/jypx.vue";
import http from "@/utils/request.js";
import Pie3dMt from "./echart_analyze/pie3dMt.vue";
import Pie3dMt2 from "./echart_analyze/pie3dMt2.vue";

View File

@ -82,9 +82,7 @@
<div
style="width: 86%; margin-left: 7%; height: 300px; overflow: hidden"
>
<eP5
:list="data.selectList1"
></eP5>
<eP5 :list="data.selectList1"></eP5>
<!-- <pick2
:list1="data.selectList1"
:year="data.dataElderly.schoolYear"
@ -100,11 +98,12 @@
<div
style="width: 86%; margin-left: 7%; height: 300px; overflow: hidden"
>
<pick1
<jypxs></jypxs>
<!-- <pick1
:list1="data.selectList1"
:list2="data.selectList2"
:year="data.dataElderly.schoolYear"
></pick1>
></pick1> -->
</div>
</div>
</div>
@ -127,6 +126,7 @@ import zsbm from "./echarts/echartZsbm.vue";
import pick1 from "./echarts/echartPick1.vue";
import pick2 from "./echarts/echartPick2.vue";
import eP5 from "./echarts/eP5.vue";
import jypxs from "./echarts/jypxs.vue";
const props = defineProps({
dialogShowElderly: {
type: Boolean,
@ -177,7 +177,7 @@ onMounted(() => {
const selectChange1 = (e) => {
data.selectList1 = data.dataElderly.schoolData[0];
// data.selectList2 = data.dataElderly.schoolData[0].xz;
console.log(data.selectList1 , e,55555);
console.log(data.selectList1, e, 55555);
// if (data.dataElderly.schoolData[e] && data.dataElderly.schoolData[e].bm) {
// data.pickNum = 0;
// data.selectList1 = data.dataElderly.schoolData[e].zs;

View File

@ -0,0 +1,155 @@
<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: 30, //
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: 80,
lineStyle: {
color: "white", // 线
},
},
},
label: {
show: true,
formatter: "{b}:{c}" + "个\n\n",
borderWidth: 10,
borderRadius: 4,
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>