This commit is contained in:
duanxiaohai 2024-06-06 11:07:37 +08:00
parent e36e78eed1
commit 09b5bd8f81
3 changed files with 197 additions and 189 deletions

View File

@ -3,178 +3,166 @@
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref } from "vue"; import {
onBeforeMount,
ref,
reactive,
defineProps,
watch,
nextTick,
} from "vue";
// echarts // echarts
import * as echarts from "echarts"; import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
});
const chart = ref(); // DOM const chart = ref(); // DOM
const datas = { const data = reactive({
value: 92.96, list: 60,
option: {},
});
const getOption = () => {
data.option = {
series: [
//
{
type: "pie",
center: ["55%", "55%"],
radius: ["70%", "90%"],
hoverAnimation: false,
clockWise: false,
// startAngle: 180,
// endAngle: 360,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "rgba(193, 229, 255, .1)",
color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
{
offset: 1,
color: "rgba(127, 242, 255, .2)",
},
{
offset: 0,
color: "rgba(109, 195, 255, 0)",
},
]),
},
},
tooltip: {
show: false,
},
label: {
show: false,
},
data: [100],
},
/*内心原型图,展示整体数据概览*/
{
// name: "pie",
type: "pie",
roundCap: true,
clockWise: true,
radius: ["50%", "70%"],
center: ["55%", "55%"],
startAngle: 180,
labelLine: {
show: false,
},
hoverAnimation: false,
data: [
{
value: data.list,
label: {
normal: {
position: "center",
show: true,
textStyle: {
fontSize: "24",
fontWeight: "normal",
color: "#fff",
fontSize: 16,
lineHeight: 30,
rich: {
cell: {
fontSize: "24",
fontWeight: "normal",
color: "#fff",
},
text: {
fontSize: 16,
fontFamily: "FZLanTingHeiS-L-GB",
color: "#fff",
},
},
},
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: "rgba(0, 255, 250, 0.29)",
},
{
offset: 0.5,
color: "rgba(0, 255, 250, 0.8)",
},
{
offset: 1,
color: "rgba(0, 255, 250, 1)",
},
]),
shadowColor: "rgba(1,1,1,0.5)",
shadowBlur: 1,
},
},
},
{
value: 100 - data.list,
name: "",
itemStyle: {
normal: {
color: "#095b9b", //
label: {
show: false,
},
labelLine: {
show: false,
},
},
emphasis: {
color: "#095b9b", //
},
},
},
],
},
],
};
}; };
let option = { const setChart = () => {
series: [ var myChart = echarts.init(chart.value);
// myChart.setOption(data.option);
{
type: "pie",
center: ["55%", "55%"],
radius: ["70%", "90%"],
hoverAnimation: false,
clockWise: false,
// startAngle: 180,
// endAngle: 360,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "rgba(193, 229, 255, .1)",
color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
{
offset: 1,
color: "rgba(127, 242, 255, .2)",
},
{
offset: 0,
color: "rgba(109, 195, 255, 0)",
},
]),
},
},
tooltip: {
show: false,
},
label: {
show: false,
},
data: [100],
},
/*内心原型图,展示整体数据概览*/
{
// name: "pie",
type: "pie",
roundCap: true,
clockWise: true,
radius: ["50%", "70%"],
center: ["55%", "55%"],
startAngle: 180,
labelLine: {
show: false,
},
hoverAnimation: false,
data: [
{
value: datas.value,
label: {
normal: {
position: "center",
show: true,
textStyle: {
fontSize: "24",
fontWeight: "normal",
color: "#fff",
fontSize: 16,
lineHeight: 30,
rich: {
cell: {
fontSize: "24",
fontWeight: "normal",
color: "#fff",
},
text: {
fontSize: 16,
fontFamily: "FZLanTingHeiS-L-GB",
color: "#fff",
},
},
},
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: "rgba(0, 255, 250, 0.29)",
},
{
offset: 0.5,
color: "rgba(0, 255, 250, 0.8)",
},
{
offset: 1,
color: "rgba(0, 255, 250, 1)",
},
]),
shadowColor: "rgba(1,1,1,0.5)",
shadowBlur: 1,
},
},
},
{
value: 100 - datas.value,
name: "",
itemStyle: {
normal: {
color: "#095b9b", //
label: {
show: false,
},
labelLine: {
show: false,
},
},
emphasis: {
color: "#095b9b", //
},
},
},
],
},
],
}; };
// let option = {
// tooltip: {
// trigger: 'item'
// },
// legend: {
// top: '5%',
// left: 'center'
// },
// series: [
// {
// name: 'Access From',
// type: 'pie',
// radius: ['40%', '70%'],
// center: ['50%', '70%'],
// // adjust the start and end angle
// startAngle: 180,
// endAngle: 360,
// data: [
// { value: 1048, name: 'Search Engine' },
// { value: 735, name: 'Direct' },
// { value: 580, name: 'Email' },
// { value: 484, name: 'Union Ads' },
// { value: 300, name: 'Video Ads' }
// ]
// }
// ]
// };
// 使 // 使
onMounted(() => { onBeforeMount(() => {
// domecharts setTimeout(() => {
// var myChart = echarts.init(document.getElementById('main')); data.list = props.list;
// Vue3 getOption();
var myChart = echarts.init(chart.value); setChart();
}, 600);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
}); });
</script> </script>

View File

@ -3,17 +3,39 @@
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref } from "vue"; import {
onBeforeMount,
onMounted,
ref,
reactive,
defineProps,
watch,
nextTick,
} from "vue";
// echarts // echarts
import * as echarts from "echarts"; import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
});
const chart = ref(); // DOM const chart = ref(); // DOM
const datas = {
value: 62.16,
}
let option = {
const data = reactive({
list: 60,
option: {},
initialLegendData: ["特困救助金额", "低保救助金额"],
initialLegendData1: ["特困救助人次", "低保救助人次", "低边救助人次"],
});
const getOption = () => {
data.option = {
series: [ series: [
// //
{ {
@ -61,7 +83,7 @@ let option = {
center: ['55%', '55%'], center: ['55%', '55%'],
data: [ data: [
{ {
value: datas.value, value: data.list,
label: { label: {
normal: { normal: {
@ -102,7 +124,7 @@ let option = {
} }
}, },
{ {
value: 100 - datas.value, value: 100 - data.list,
name: '', name: '',
itemStyle: { itemStyle: {
normal: { normal: {
@ -122,22 +144,20 @@ let option = {
} }
] ]
}; };
};
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
};
// 使 // 使
onMounted(() => { onBeforeMount(() => {
// domecharts setTimeout(() => {
// var myChart = echarts.init(document.getElementById('main')); data.list = props.list;
// Vue3 getOption();
var myChart = echarts.init(chart.value); setChart();
}, 600);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
}); });
</script> </script>

View File

@ -123,7 +123,7 @@
<div class="minTop"> <div class="minTop">
<div class="minTopPart"> <div class="minTopPart">
<div class="history2"> <div class="history2">
<div class="va">33.67</div> <div class="va">{{data.jkda.jdfs}}</div>
<img <img
src="@/assets/images/hygiene/shang_left.png" src="@/assets/images/hygiene/shang_left.png"
alt="" alt=""
@ -144,20 +144,20 @@
<div class="minTopPart2"> <div class="minTopPart2">
<div class="left"> <div class="left">
<div class="leftImg"> <div class="leftImg">
<eP4></eP4> <eP4 :list="data.jkda.jdl"></eP4>
</div> </div>
<div class="left_me"> <div class="left_me">
<div>建档率</div> <div>建档率</div>
<div class="bo">92.96%</div> <div class="bo">{{data.jkda.jdl}}%</div>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<div class="rightImg"> <div class="rightImg">
<eP4_1></eP4_1> <eP4_1 :list="data.jkda.jtysqyl"></eP4_1>
</div> </div>
<div class="right_me"> <div class="right_me">
<div>家庭医生签约率</div> <div>家庭医生签约率</div>
<div class="bo">62.16%</div> <div class="bo">{{data.jkda.jtysqyl}}%</div>
</div> </div>
</div> </div>
</div> </div>
@ -345,7 +345,7 @@ const getData = async () => {
data.medicalInsurance = res.data.medicalInsurance; data.medicalInsurance = res.data.medicalInsurance;
data.lmb = res.data.lmb; data.lmb = res.data.lmb;
data.mz = res.data.mz; data.mz = res.data.mz;
// data.jkda = res.data.jkda; data.jkda = res.data.jkda;
data.jsbgl = res.data.jsbgl; data.jsbgl = res.data.jsbgl;
data.fyglrs = res.data.fyglrs; data.fyglrs = res.data.fyglrs;
data.jktj = res.data.jktj; data.jktj = res.data.jktj;