This commit is contained in:
duanxiaohai
parent
28b9cc71a0
commit
a06da0ccf7
|
|
@ -260,7 +260,7 @@ const onViewData = (value, i) => {
|
||||||
name: item.name,
|
name: item.name,
|
||||||
data: item.data,
|
data: item.data,
|
||||||
}));
|
}));
|
||||||
console.log(data.DataViewing, 666);
|
// console.log(data.DataViewing, 666);
|
||||||
|
|
||||||
// switch (value) {
|
// switch (value) {
|
||||||
// case "医保支出万元以上":
|
// case "医保支出万元以上":
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,257 @@
|
||||||
|
<template>
|
||||||
|
<div ref="chart" style="width: 100%; height: 300px"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onBeforeMount, reactive, ref, watch } from "vue";
|
||||||
|
// 局部引入echarts核心模块
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
const chart = ref(); // 创建DOM引用
|
||||||
|
const clear = ref(false);
|
||||||
|
const props = defineProps({
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
list1: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
list2: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
year: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const sers = ref([
|
||||||
|
{
|
||||||
|
name: "背景",
|
||||||
|
type: "bar",
|
||||||
|
data: [],
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: "rgba(180, 180, 180, 0.2)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const data = reactive({
|
||||||
|
list: [],
|
||||||
|
list1: [],
|
||||||
|
list2: [],
|
||||||
|
year: [],
|
||||||
|
option: {},
|
||||||
|
bg: [],
|
||||||
|
name: [],
|
||||||
|
ser: [],
|
||||||
|
len: {
|
||||||
|
data: [],
|
||||||
|
top: "3%",
|
||||||
|
right: "5%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
formatter: "{b0}<br />",
|
||||||
|
});
|
||||||
|
|
||||||
|
const getOption = () => {
|
||||||
|
data.option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
padding: [20, 10, 20, 10],
|
||||||
|
formatter: data.formatter,
|
||||||
|
},
|
||||||
|
legend: data.len,
|
||||||
|
grid: {
|
||||||
|
top: "35%",
|
||||||
|
left: "6%",
|
||||||
|
right: "6%",
|
||||||
|
bottom: "3%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: data.year,
|
||||||
|
axisLabel: {
|
||||||
|
//坐标轴刻度标签的相关设置
|
||||||
|
textStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
name: "人数/人",
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(255, 255, 255, 0.2)",
|
||||||
|
fontSize: 16,
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
min: 0, // 设置Y轴最小值
|
||||||
|
max: function (value) {
|
||||||
|
// 自定义Y轴最大值，确保数据点显示在顶部
|
||||||
|
return Math.ceil(Math.max(value.max, value.max * 1.2) / 50) * 50;
|
||||||
|
},
|
||||||
|
nameTextStyle: {
|
||||||
|
// 设置Y轴名称的样式
|
||||||
|
fontSize: 14, // 这里设置字体大小为20
|
||||||
|
},
|
||||||
|
// axisLabel: {
|
||||||
|
// //坐标轴刻度标签的相关设置
|
||||||
|
// textStyle: {
|
||||||
|
// color: "#ffffff",
|
||||||
|
// fontSize: 16,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
axisLine: {
|
||||||
|
//y轴线的颜色以及宽度
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
fontSize: 16,
|
||||||
|
width: 1,
|
||||||
|
type: "solid",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
// name: "糖尿病",
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(255, 255, 255, 0.2)",
|
||||||
|
fontSize: 16,
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
min: 0, // 设置Y轴最小值
|
||||||
|
max: function (value) {
|
||||||
|
// 自定义Y轴最大值，确保数据点显示在顶部
|
||||||
|
return Math.ceil(Math.max(value.max, value.max * 1.6) / 50) * 50;
|
||||||
|
},
|
||||||
|
nameTextStyle: {
|
||||||
|
// 设置Y轴名称的样式
|
||||||
|
fontSize: 14, // 这里设置字体大小为20
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
//坐标轴刻度标签的相关设置
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
//y轴线的颜色以及宽度
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
fontSize: 16,
|
||||||
|
width: 1,
|
||||||
|
type: "solid",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: data.ser,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const setChart = () => {
|
||||||
|
var myChart = echarts.init(chart.value);
|
||||||
|
if (clear.value) {
|
||||||
|
myChart.clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
myChart.setOption(data.option);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setChart1 = () => {
|
||||||
|
data.ser.length = 0;
|
||||||
|
sers.value.forEach((item) => {
|
||||||
|
data.ser.push(item);
|
||||||
|
});
|
||||||
|
if (data.name.length > 0) {
|
||||||
|
data.list.forEach((item) => {
|
||||||
|
data.ser.push({
|
||||||
|
yAxisIndex: 0,
|
||||||
|
name: item.name,
|
||||||
|
type: "line",
|
||||||
|
symbol: "emptyCircle",
|
||||||
|
symbolSize: 10,
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: "#2468FF",
|
||||||
|
borderWidth: 1,
|
||||||
|
color: "#2468FF",
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
color: "#2468FF",
|
||||||
|
formatter: function (data) {
|
||||||
|
return data.value;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
data: item.data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// console.log("监听", data.ser);
|
||||||
|
// console.log("监听1", sers.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 监听数据
|
||||||
|
watch(
|
||||||
|
() => props.list,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
if (newVal.length < oldVal.length) {
|
||||||
|
clear.value = true;
|
||||||
|
} else {
|
||||||
|
clear.value = false;
|
||||||
|
}
|
||||||
|
data.list = newVal;
|
||||||
|
data.name = props.list.map((item) => item.name);
|
||||||
|
data.len.data = data.name;
|
||||||
|
sers.value[0].data = data.year.map((item) => 0);
|
||||||
|
data.formatter = "{b0}<br />";
|
||||||
|
if (data.name.length > 0) {
|
||||||
|
for (let i = 1; i <= data.name.length; i++) {
|
||||||
|
let s1 = `{a${i}}:{c${i}}<br />`;
|
||||||
|
data.formatter += s1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setChart1();
|
||||||
|
getOption();
|
||||||
|
setChart();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
// 使用生命钩子
|
||||||
|
onBeforeMount(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
data.list = props.list;
|
||||||
|
data.year = props.year;
|
||||||
|
sers.value[0].data = data.year.map((item) => 0);
|
||||||
|
setChart1();
|
||||||
|
getOption();
|
||||||
|
setChart();
|
||||||
|
}, 600);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -1,41 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="chart" style="width: 100%; height: 260px"></div>
|
<div ref="chart" style="width: 100%; height: 320px"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onBeforeMount, reactive, ref, watch } from "vue";
|
import { onMounted, reactive, ref, watch } from "vue";
|
||||||
// 局部引入echarts核心模块
|
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
const chart = ref(); // 创建DOM引用
|
const chart = ref();
|
||||||
const clear = ref(false);
|
const clear = ref(false);
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
list: {
|
list: Array,
|
||||||
type: Array,
|
year: Array,
|
||||||
default: () => {
|
|
||||||
return [];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
list1: {
|
|
||||||
type: Array,
|
|
||||||
default: () => {
|
|
||||||
return [];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
list2: {
|
|
||||||
type: Array,
|
|
||||||
default: () => {
|
|
||||||
return [];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
year: {
|
|
||||||
type: Array,
|
|
||||||
default: () => {
|
|
||||||
return [];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
const sers = ref([
|
|
||||||
|
const data = reactive({
|
||||||
|
list: [],
|
||||||
|
year: [],
|
||||||
|
option: {},
|
||||||
|
name: [],
|
||||||
|
formatter: "{b0}<br />",
|
||||||
|
series: [
|
||||||
{
|
{
|
||||||
name: "背景",
|
name: "背景",
|
||||||
type: "bar",
|
type: "bar",
|
||||||
|
|
@ -45,28 +29,64 @@ const sers = ref([
|
||||||
color: "rgba(180, 180, 180, 0.2)",
|
color: "rgba(180, 180, 180, 0.2)",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
]);
|
],
|
||||||
const data = reactive({
|
legend: {
|
||||||
list: [],
|
|
||||||
list1: [],
|
|
||||||
list2: [],
|
|
||||||
year: [],
|
|
||||||
option: {},
|
|
||||||
bg: [],
|
|
||||||
name: [],
|
|
||||||
ser: [],
|
|
||||||
len: {
|
|
||||||
data: [],
|
data: [],
|
||||||
top: "0%",
|
top: "3%",
|
||||||
right: "5%",
|
right: "5%",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
formatter: "{b0}<br />",
|
bgColor: ["#2468FF", "#E8FF00", "#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#57FF33", "#33FFA1", "#A133FF", "#FF5733"],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const updateSeries = () => {
|
||||||
|
data.series = [
|
||||||
|
{
|
||||||
|
name: "背景",
|
||||||
|
type: "bar",
|
||||||
|
data: data.year.map(() => 0),
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: "rgba(180, 180, 180, 0.2)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
if (data.list.length > 0) {
|
||||||
|
data.list.forEach((item, index) => {
|
||||||
|
const color = data.bgColor[index % data.bgColor.length];
|
||||||
|
data.series.push({
|
||||||
|
yAxisIndex: 0,
|
||||||
|
name: item.name,
|
||||||
|
type: "line",
|
||||||
|
symbol: "emptyCircle",
|
||||||
|
symbolSize: 10,
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: color,
|
||||||
|
borderWidth: 1,
|
||||||
|
color: color,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
color: color,
|
||||||
|
formatter: (data) => data.value,
|
||||||
|
},
|
||||||
|
data: item.data,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
data.legend.data = data.list.map((item) => item.name);
|
||||||
|
data.formatter =
|
||||||
|
"{b0}<br />" +
|
||||||
|
data.list
|
||||||
|
.map((_, index) => `{a${index + 1}}:{c${index + 1}}<br />`)
|
||||||
|
.join("");
|
||||||
|
};
|
||||||
|
|
||||||
const getOption = () => {
|
const getOption = () => {
|
||||||
data.option = {
|
data.option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
|
@ -74,7 +94,7 @@ const getOption = () => {
|
||||||
padding: [20, 10, 20, 10],
|
padding: [20, 10, 20, 10],
|
||||||
formatter: data.formatter,
|
formatter: data.formatter,
|
||||||
},
|
},
|
||||||
legend: data.len,
|
legend: data.legend,
|
||||||
grid: {
|
grid: {
|
||||||
top: "35%",
|
top: "35%",
|
||||||
left: "6%",
|
left: "6%",
|
||||||
|
|
@ -86,7 +106,6 @@ const getOption = () => {
|
||||||
type: "category",
|
type: "category",
|
||||||
data: data.year,
|
data: data.year,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
//坐标轴刻度标签的相关设置
|
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
|
|
@ -105,24 +124,13 @@ const getOption = () => {
|
||||||
width: 1,
|
width: 1,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
min: 0, // 设置Y轴最小值
|
min: 0,
|
||||||
max: function (value) {
|
max: (value) =>
|
||||||
// 自定义Y轴最大值，确保数据点显示在顶部
|
Math.ceil(Math.max(value.max, value.max * 1.2) / 50) * 50,
|
||||||
return Math.ceil(Math.max(value.max, value.max * 1.2) / 50) * 50;
|
|
||||||
},
|
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
// 设置Y轴名称的样式
|
fontSize: 14,
|
||||||
fontSize: 14, // 这里设置字体大小为20
|
|
||||||
},
|
},
|
||||||
// axisLabel: {
|
|
||||||
// //坐标轴刻度标签的相关设置
|
|
||||||
// textStyle: {
|
|
||||||
// color: "#ffffff",
|
|
||||||
// fontSize: 16,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
axisLine: {
|
axisLine: {
|
||||||
//y轴线的颜色以及宽度
|
|
||||||
show: false,
|
show: false,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
|
|
@ -134,7 +142,6 @@ const getOption = () => {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "value",
|
type: "value",
|
||||||
// name: "糖尿病",
|
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: false,
|
show: false,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
|
|
@ -143,21 +150,16 @@ const getOption = () => {
|
||||||
width: 1,
|
width: 1,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
min: 0, // 设置Y轴最小值
|
min: 0,
|
||||||
max: function (value) {
|
max: (value) =>
|
||||||
// 自定义Y轴最大值，确保数据点显示在顶部
|
Math.ceil(Math.max(value.max, value.max * 1.6) / 50) * 50,
|
||||||
return Math.ceil(Math.max(value.max, value.max * 1.6) / 50) * 50;
|
|
||||||
},
|
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
// 设置Y轴名称的样式
|
fontSize: 14,
|
||||||
fontSize: 14, // 这里设置字体大小为20
|
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
show: false,
|
show: false,
|
||||||
//坐标轴刻度标签的相关设置
|
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
//y轴线的颜色以及宽度
|
|
||||||
show: false,
|
show: false,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
|
|
@ -168,54 +170,18 @@ const getOption = () => {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
series: data.ser,
|
series: data.series,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const setChart = () => {
|
const setChart = () => {
|
||||||
var myChart = echarts.init(chart.value);
|
const myChart = echarts.init(chart.value);
|
||||||
if (clear.value) {
|
if (clear.value) {
|
||||||
myChart.clear();
|
myChart.clear();
|
||||||
}
|
}
|
||||||
|
|
||||||
myChart.setOption(data.option);
|
myChart.setOption(data.option);
|
||||||
};
|
};
|
||||||
|
|
||||||
const setChart1 = () => {
|
|
||||||
data.ser.length = 0;
|
|
||||||
sers.value.forEach((item) => {
|
|
||||||
data.ser.push(item);
|
|
||||||
});
|
|
||||||
if (data.name.length > 0) {
|
|
||||||
data.list.forEach((item) => {
|
|
||||||
data.ser.push({
|
|
||||||
yAxisIndex: 0,
|
|
||||||
name: item.name,
|
|
||||||
type: "line",
|
|
||||||
symbol: "emptyCircle",
|
|
||||||
symbolSize: 10,
|
|
||||||
itemStyle: {
|
|
||||||
borderColor: "#2468FF",
|
|
||||||
borderWidth: 1,
|
|
||||||
color: "#2468FF",
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
color: "#2468FF",
|
|
||||||
formatter: function (data) {
|
|
||||||
return data.value;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data: item.data,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
console.log("监听", data.ser);
|
|
||||||
console.log("监听1", sers.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 监听数据
|
|
||||||
watch(
|
watch(
|
||||||
() => props.list,
|
() => props.list,
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
|
|
@ -225,32 +191,18 @@ watch(
|
||||||
clear.value = false;
|
clear.value = false;
|
||||||
}
|
}
|
||||||
data.list = newVal;
|
data.list = newVal;
|
||||||
data.name = props.list.map((item) => item.name);
|
updateSeries();
|
||||||
data.len.data = data.name;
|
|
||||||
sers.value[0].data = data.year.map((item) => 0);
|
|
||||||
data.formatter = "{b0}<br />";
|
|
||||||
if (data.name.length > 0) {
|
|
||||||
for (let i = 1; i <= data.name.length; i++) {
|
|
||||||
let s1 = `{a${i}}:{c${i}}<br />`;
|
|
||||||
data.formatter += s1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setChart1();
|
|
||||||
getOption();
|
getOption();
|
||||||
setChart();
|
setChart();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
// 使用生命钩子
|
|
||||||
onBeforeMount(() => {
|
onMounted(() => {
|
||||||
setTimeout(() => {
|
|
||||||
data.list = props.list;
|
data.list = props.list;
|
||||||
data.year = props.year;
|
data.year = props.year;
|
||||||
sers.value[0].data = data.year.map((item) => 0);
|
updateSeries();
|
||||||
setChart1();
|
|
||||||
getOption();
|
getOption();
|
||||||
setChart();
|
setChart();
|
||||||
}, 600);
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue