This commit is contained in:
duanxiaohai
parent
333538c8df
commit
7d3a54a1e1
|
|
@ -112,7 +112,7 @@
|
|||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<right1></right1>
|
||||
<right1 :list="data.wjybrysl"></right1>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
<div class="yd_title right_2">
|
||||
|
|
@ -260,6 +260,7 @@ const data = reactive({
|
|||
data: ["0", "0", "0", "0", "0", "0"], //医保支出万元以上
|
||||
},
|
||||
], //数据查看
|
||||
wjybrysl: [],
|
||||
leftCenterYear: ["2019", "2020", "2021", "2022", "2023", "2024"], //年份
|
||||
zccs1: ["图书馆", "公共自行车", "小奔通"], //一码通
|
||||
zccs2: ["100", "3924", "3905"], //一码通
|
||||
|
|
@ -360,8 +361,10 @@ const getData = async () => {
|
|||
ageBt.forEach((key, index) => {
|
||||
data.whistleblower.culeTotal.data[index] = res.data.lnr.rksj[key];
|
||||
});
|
||||
|
||||
data.leftCenterYear = res.data.dataShow.year;
|
||||
|
||||
data.wjybrysl = res.data.wjybrysl;
|
||||
console.log(data.wjybrysl,1111);
|
||||
data.ViewData[2].data = res.data.dataShow.gxyrs.gxyrs; //高血压
|
||||
data.ViewData[2].value = res.data.dataShow.gxyrs.total; //高血压年份
|
||||
data.ViewData[3].data = res.data.dataShow.tnbrs.tnbrs; //糖尿病
|
||||
|
|
|
|||
|
|
@ -3,11 +3,35 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import {
|
||||
onMounted,
|
||||
onBeforeMount,
|
||||
reactive,
|
||||
defineProps,
|
||||
ref,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const chart = ref(null); // 创建DOM引用
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
const data = reactive({
|
||||
list: [],
|
||||
list1: [],
|
||||
list2: [],
|
||||
year: [],
|
||||
option: {},
|
||||
});
|
||||
|
||||
const data1 = [
|
||||
"大街乡",
|
||||
"社阳乡",
|
||||
|
|
@ -42,80 +66,80 @@ const data2 = [
|
|||
"21307",
|
||||
"20000",
|
||||
];
|
||||
|
||||
let option = {
|
||||
grid: {
|
||||
left: "2%",
|
||||
right: "10%",
|
||||
bottom: "2%",
|
||||
top: "4%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis", //axis , item
|
||||
},
|
||||
// backgroundColor: '#002D54',
|
||||
xAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(77, 128, 254, 0.2)",
|
||||
type: "line",
|
||||
},
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
grid: {
|
||||
left: "2%",
|
||||
right: "10%",
|
||||
top: "4%",
|
||||
bottom: "6%",
|
||||
containLabel: true,
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
tooltip: {
|
||||
trigger: "axis", //axis , item
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
// 改变x轴字体颜色和大小
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: "#00c0fa",
|
||||
fontSize: 19,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: "14",
|
||||
// backgroundColor: '#002D54',
|
||||
xAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(77, 128, 254, 0.2)",
|
||||
type: "line",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
axisLabel: {
|
||||
// 改变x轴字体颜色和大小
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: "#00c0fa",
|
||||
fontSize: 19,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
data: data1,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "未交医保人员",
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right", // 位置
|
||||
color: "#ffffff",
|
||||
fontSize: 12,
|
||||
distance: 10, // 距离
|
||||
// formatter: '{c}%' // 这里是数据展示的时候显示的数据
|
||||
}, // 柱子上方的数值
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: "14",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
data: data.list1,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "未交医保人员",
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
label: {
|
||||
show: true,
|
||||
position: "right", // 位置
|
||||
color: "#ffffff",
|
||||
fontSize: 12,
|
||||
distance: 10, // 距离
|
||||
// formatter: '{c}%' // 这里是数据展示的时候显示的数据
|
||||
}, // 柱子上方的数值
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
borderWidth: 1,
|
||||
// borderColor: "rgba(0, 183, 255, 1)",
|
||||
borderRadius: [0, 0, 50, 0], //圆角边框
|
||||
|
|
@ -123,18 +147,39 @@ let option = {
|
|||
{ offset: 0, color: "rgba(0, 183, 255, 0)" },
|
||||
{ offset: 1, color: "rgba(0, 183, 255, 1)" },
|
||||
]),
|
||||
// },
|
||||
// },
|
||||
},
|
||||
barWidth: 10,
|
||||
data: data.list2,
|
||||
},
|
||||
barWidth: 10,
|
||||
data: data2,
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// onMounted(() => {
|
||||
// var myChart = echarts.init(chart.value);
|
||||
// myChart.setOption(option);
|
||||
// });
|
||||
const setChart = () => {
|
||||
// Vue3中： 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
myChart.setOption(option);
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(data.option);
|
||||
};
|
||||
const setChart1 = () => {
|
||||
data.list.forEach((item) => {
|
||||
data.list1.push(item.xzjd);
|
||||
data.list2.push(item.rs);
|
||||
});
|
||||
console.log(data.list1, data.list2);
|
||||
};
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
setChart1();
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue