This commit is contained in:
duanxiaohai
parent
c1b6494f2d
commit
3687f89216
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
|
@ -24,7 +24,19 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="ViewData">
|
||||
<div class="ViewDatalist"></div>
|
||||
<div class="ViewDatalist">
|
||||
<!-- <div class="ViewDataTop" v-for="item in data.ViewData.name">
|
||||
<div class="ViewDataTopimg">
|
||||
{{ item }}
|
||||
</div>
|
||||
<div class="ViewDataTopimg_1"></div>
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
<div class="ViewDataBottom" v-for="item in 5">
|
||||
<div class="ViewDataBottomimg"></div>
|
||||
<div class="ViewDataBottomimg_1"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
<eP2
|
||||
:list1="data.leftCenter1"
|
||||
:list2="data.leftCenter2"
|
||||
|
|
@ -62,6 +74,7 @@
|
|||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<ylXZZC :list1="data.zccs1" :list2="data.zccs2"></ylXZZC>
|
||||
</div>
|
||||
</div>
|
||||
<div class="displayFlex right_bg">
|
||||
|
|
@ -94,12 +107,13 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import Pie3dMt from "./echart_analyze/pie3dMt.vue";
|
||||
import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
|
||||
import http from "@/utils/request.js";
|
||||
import Pie3dMt from "./echart_analyze/pie3dMt.vue";
|
||||
import pie3dMt1 from "./echart_analyze/pie3dMt1.vue";
|
||||
import edxs from "./echart_analyze/edXS.vue";
|
||||
import eP2 from "./echart_analyze/eP2.vue";
|
||||
import ylXZZC from "./echart_analyze/ylXZZC.vue";
|
||||
|
||||
const showR = ref(false); //loading
|
||||
const data = reactive({
|
||||
|
|
@ -114,6 +128,34 @@ const data = reactive({
|
|||
leftCenter1: ["100", "80", "199", "133", "210"], //大病住院
|
||||
leftCenter2: ["100", "120", "199", "133", "210"], //糖尿病
|
||||
leftCenterYear: ["2019", "2020", "2021", "2022", "2023"], //年份
|
||||
ViewData: {
|
||||
data: [
|
||||
"11112",
|
||||
"120",
|
||||
"2345",
|
||||
"1241",
|
||||
"1414",
|
||||
"2355",
|
||||
"455",
|
||||
"142",
|
||||
"98",
|
||||
"144",
|
||||
],
|
||||
name: [
|
||||
"医保支出万元以上",
|
||||
"大病住院",
|
||||
"高血压",
|
||||
"高血压",
|
||||
"高血脂",
|
||||
"高血糖",
|
||||
"残疾",
|
||||
"低保",
|
||||
"特困",
|
||||
"其他疾病",
|
||||
],
|
||||
},
|
||||
zccs1: [ "图书馆","交通出行","景区",],//一码通
|
||||
zccs2: [ "100","130","220",],//一码通
|
||||
});
|
||||
const minData = reactive({
|
||||
minTop: ["4", "9", "1", "6", "2", "人"],
|
||||
|
|
@ -384,9 +426,58 @@ onBeforeMount(() => {});
|
|||
.hypertension {
|
||||
display: flex;
|
||||
}
|
||||
// .ViewData{
|
||||
.ViewData {
|
||||
.ViewDatalist {
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
|
||||
// }
|
||||
background-image: url(@/assets/images/sjfx/sjfx11.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 550px;
|
||||
height: 300px;
|
||||
.ViewDataTop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ViewDataBottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ViewDataTopimg {
|
||||
background-image: url(@/assets/images/sjfx/sjfx.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: -24px;
|
||||
}
|
||||
.ViewDataTopimg_1 {
|
||||
background-image: url(@/assets/images/sjfx/sjfx1.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 105px;
|
||||
height: 57px;
|
||||
}
|
||||
.ViewDataBottomimg {
|
||||
background-image: url(@/assets/images/sjfx/sjfx2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: -24px;
|
||||
}
|
||||
.ViewDataBottomimg_1 {
|
||||
background-image: url(@/assets/images/sjfx/sjfx3.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 105px;
|
||||
height: 57px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.minTopTitle {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,258 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 160px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onBeforeMount,
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
defineProps,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
const emit = defineEmits(["village"]);
|
||||
const props = defineProps({
|
||||
list1: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
list2: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
const chart = ref(null); // 创建DOM引用
|
||||
|
||||
// const data = ["大街乡", "社阳乡", "沐尘畲族乡", "庙下乡", "溪口镇", "罗家乡"];
|
||||
// const datas = ["8", "10", "7", " 23", "25", "250"];
|
||||
|
||||
const data = reactive({
|
||||
list1: [],
|
||||
list2: [],
|
||||
option: {},
|
||||
});
|
||||
|
||||
let zoomShow = true;
|
||||
// if (data.length > 7) {
|
||||
// zoomShow = true;
|
||||
// } else {
|
||||
// zoomShow = false;
|
||||
// }
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
top: "10%",
|
||||
left: "3%",
|
||||
right: "8%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
color: "#ffffff",
|
||||
fontSize: 14,
|
||||
},
|
||||
// dataZoom: [
|
||||
// {
|
||||
// //在内部可以纵向拖动
|
||||
// show: zoomShow,
|
||||
// type: "inside",
|
||||
// startValue: 0,
|
||||
// endValue: 10,
|
||||
// minValueSpan: 2,
|
||||
// maxValueSpan: 10,
|
||||
// yAxisIndex: [0],
|
||||
// zoomOnMouseWheel: false, // 关闭滚轮缩放
|
||||
// moveOnMouseWheel: true, // 开启滚轮平移
|
||||
// moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
|
||||
// },
|
||||
// {
|
||||
// //纵向使用滚动条
|
||||
// show: zoomShow,
|
||||
// type: "slider",
|
||||
// realtime: true,
|
||||
// startValue: 0,
|
||||
// endValue: 2,
|
||||
// width: "8",
|
||||
// height: "90%",
|
||||
// yAxisIndex: [0], // 控制y轴滚动
|
||||
// fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
|
||||
// borderColor: "rgba(17, 100, 210, 0.12)",
|
||||
// backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
|
||||
// handleSize: 0, // 两边手柄尺寸
|
||||
// showDataShadow: false, //是否显示数据阴影 默认auto
|
||||
// showDetail: false, // 拖拽时是否展示滚动条两侧的文字
|
||||
// top: "1%",
|
||||
// right: "8", //距离右侧的距离
|
||||
// },
|
||||
// ],
|
||||
calculable: true,
|
||||
xAxis: {
|
||||
// name: '/次',
|
||||
type: "value",
|
||||
data: data.list2,
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 14,
|
||||
},
|
||||
// formatter: `{value}/次` // 在每个x轴坐标都添加了单位
|
||||
// formatter: function (value, index) {
|
||||
// if (index === data.list2.length - 1) {
|
||||
// // 判断是否为最后一个标签
|
||||
// return value + "/次"; // 添加单位
|
||||
// } else {
|
||||
// return value; // 不是最后一个标签则不添加单位
|
||||
// }
|
||||
// },
|
||||
},
|
||||
splitLine: {
|
||||
//分割线配置
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, 0.2)",
|
||||
fontSize: 14,
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
axisPointer: {
|
||||
label: {
|
||||
autoSplitNumber: 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "category", //横向显示
|
||||
data: data.list1,
|
||||
// max:10,
|
||||
//y轴文字的配置
|
||||
axisLabel: {
|
||||
inside: false,
|
||||
// bargap: 0.5, // 设置固定的间隔
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
//y轴线的颜色以及宽度
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 14,
|
||||
width: 1,
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 这里设置y轴刻度不显示
|
||||
},
|
||||
//分割线配置
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, 0.2)",
|
||||
fontSize: 14,
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: data.list2,
|
||||
barWidth: 15, //柱宽
|
||||
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
|
||||
// barCategoryGap: "10" /*多个并排柱子设置柱子之间的间距*/,
|
||||
barMaxWidth: 20, // 每一个都要设置
|
||||
barMinWidth: 5, // 每一个都要设置
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(0, 183, 255, 1)",
|
||||
borderRadius: [0, 0, 50, 0], //圆角边框
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(26, 255, 217, 0)" },
|
||||
{ offset: 1, color: "rgba(0, 183, 255, 1)" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
// onMounted(() => {
|
||||
// // 基于准备好的dom，初始化echarts实例
|
||||
// // var myChart = echarts.init(document.getElementById('main'));
|
||||
// // Vue3中： 需要引入
|
||||
// var myChart = echarts.init(chart.value);
|
||||
|
||||
// // init(); // vue3.2没有this
|
||||
// // 使用刚指定的配置项和数据显示图表。
|
||||
// myChart.setOption(option);
|
||||
|
||||
// myChart.on("scroll", function (event) {
|
||||
// // 根据滚动位置动态计算bargap
|
||||
// var bargap = event.scrollData / 10000; // 假设滚动1%对应0.5个bargap
|
||||
// myChart.setOption({
|
||||
// yAxis: {
|
||||
// axisLabel: {
|
||||
// bargap: bargap,
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
// });
|
||||
|
||||
// // 单图表响应式: 跟随浏览器大小改变
|
||||
// // window.addEventListener("resize", () => {
|
||||
// // myChart.resize();
|
||||
// // });
|
||||
// });
|
||||
|
||||
const setChart = () => {
|
||||
// Vue3中： 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(data.option);
|
||||
myChart.on("click", function (params) {
|
||||
emit('village',params.name);
|
||||
});
|
||||
};
|
||||
// 使用生命钩子
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list1 = props.list1;
|
||||
data.list2 = props.list2;
|
||||
data.year = props.year;
|
||||
// data.max = data.list1
|
||||
// .concat(data.list2)
|
||||
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
|
||||
// console.log(data.max,data.list1, data.list2,111);
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Reference in New Issue