This commit is contained in:
duanxiaohai
parent
e36e78eed1
commit
09b5bd8f81
|
|
@ -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(() => {
|
||||||
// 基于准备好的dom，初始化echarts实例
|
setTimeout(() => {
|
||||||
// var myChart = echarts.init(document.getElementById('main'));
|
data.list = props.list;
|
||||||
// Vue3中： 需要引入
|
getOption();
|
||||||
var myChart = echarts.init(chart.value);
|
setChart();
|
||||||
|
}, 600);
|
||||||
// init(); // vue3.2没有this
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
myChart.setOption(option);
|
|
||||||
|
|
||||||
// 单图表响应式: 跟随浏览器大小改变
|
|
||||||
// window.addEventListener("resize", () => {
|
|
||||||
// myChart.resize();
|
|
||||||
// });
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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(() => {
|
||||||
// 基于准备好的dom，初始化echarts实例
|
setTimeout(() => {
|
||||||
// var myChart = echarts.init(document.getElementById('main'));
|
data.list = props.list;
|
||||||
// Vue3中： 需要引入
|
getOption();
|
||||||
var myChart = echarts.init(chart.value);
|
setChart();
|
||||||
|
}, 600);
|
||||||
// init(); // vue3.2没有this
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
myChart.setOption(option);
|
|
||||||
|
|
||||||
// 单图表响应式: 跟随浏览器大小改变
|
|
||||||
// window.addEventListener("resize", () => {
|
|
||||||
// myChart.resize();
|
|
||||||
// });
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue