Merge branch 'main' of git.zdool.com:xs/ggfwjsc

This commit is contained in:
姚宇浩 2024-06-14 11:54:53 +08:00
commit 2fde8401e9
13 changed files with 977 additions and 26 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 903 B

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

View File

@ -1,7 +1,7 @@
<template>
<div class="module">
<div class="displayFlex left_bg">
<div class="flex1">
<div >
<div class="yd_title left_1">
<div class="animate-border">
<i></i>
@ -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"
@ -51,9 +63,24 @@
{{ item }}
</div>
</div>
<!-- <div class="minPie">
<Pie3dMt :list="minData.minPieData1"></Pie3dMt>
</div> -->
<div style="overflow:hidden;margin-top: 20px;">
<div class="minPie">
<div class="minPieImg" style="letter-spacing: 1px;">集聚类型分布</div>
<Pie3dMt :list="minData.minPieData1"></Pie3dMt>
</div>
<div class="minPie">
<div class="minPieImg">年龄分布</div>
<Pie3dMt2 :list="minData.minPieData2"></Pie3dMt2>
</div>
</div>
<div style="width:100%;height:200px;margin: 20px 0;">
<img
src="../assets/images/sjfx/minImg.jpg"
style="width:100%;height:100%;"
alt=""
>
</div>
</div>
<div class="flex1">
<div class="yd_title center_1">
@ -62,6 +89,7 @@
<i></i>
</div>
</div>
<ylXZZC :list1="data.zccs1" :list2="data.zccs2"></ylXZZC>
</div>
</div>
<div class="displayFlex right_bg">
@ -72,7 +100,7 @@
<i></i>
</div>
</div>
<right1></right1>
<right1></right1>
</div>
<div class="flex1">
<div class="yd_title right_2">
@ -91,21 +119,27 @@
<i></i>
</div>
</div>
<img src="@/assets/images/sjfx/map.png" alt="" class="map" />
<img
src="@/assets/images/sjfx/map.png"
alt=""
class="map"
/>
</div>
</div>
</div>
</template>
<script setup>
import Pie3dMt from "./echart_analyze/pie3dMt.vue";
import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
import right2 from "./echart_analyze/right2.vue";
import right1 from "./echart_analyze/right1.vue";
import http from "@/utils/request.js";
import Pie3dMt from "./echart_analyze/pie3dMt.vue";
import Pie3dMt2 from "./echart_analyze/pie3dMt2.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({
@ -120,6 +154,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", "人"],
@ -131,11 +193,16 @@ const minData = reactive({
dzzh: "1610",
zq: "1610",
},
minPieData2: {
wfgz: "1500",
xstp: "1610",
skym: "1610"
},
});
onMounted(() => {});
onMounted(() => { });
onBeforeMount(() => {});
onBeforeMount(() => { });
</script>
<style lang="scss" scoped>
@ -357,7 +424,6 @@ onBeforeMount(() => {});
}
}
.mechanism {
background-image: url(@/assets/YLTitle/titleImg10.png);
background-repeat: no-repeat;
@ -373,8 +439,8 @@ onBeforeMount(() => {});
height: 268px;
margin-top: 12px;
}
.right3d{
width: 560px;
.right3d {
width: 560px;
height: 220px;
}
/* 滚动条整体部分 */
@ -401,9 +467,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;
@ -449,10 +564,24 @@ onBeforeMount(() => {});
}
}
.minPie {
width: 100%;
width: 50%;
position: relative;
margin: -10px 0;
float: left;
.minPieImg {
position: absolute;
width: 137px;
height: 20px;
background-image: url(@/assets/images/sjfx/minPieT.png);
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
font-size: 16px;
color: #ffffff;
line-height: 22px;
letter-spacing: 4px;
top: 140px;
left: 75px;
z-index: 2;
}
}
</style>

View File

@ -245,21 +245,20 @@ function getPie3D(pieData, internalDiameterRatio) {
"#F4BB29",
"#49C384",
],
// width: "40%",
height: '40%',
height: '30%',
//
orient: "vertical",
right: 20,
top: "center",
right: "center",
bottom: 2,
//
itemGap: 10,
itemGap: 2,
show: true,
icon: "rect",
itemHeight: 10,
itemWidth: 25,
textStyle: {
//
fontSize: 16,
fontSize: 14,
color: "#FFFFFF",
lineHeight: 20,
},
@ -314,8 +313,8 @@ function getPie3D(pieData, internalDiameterRatio) {
alpha: 20, //( )
distance: 100, //zoom()
},
top: "-10",
left: "-160",
top: "-60",
left: "0",
width: "100%",
show: false,
boxHeight: 16,

View File

@ -1,7 +1,7 @@
<template>
<div
ref="chart"
style="width: 50%; height: 250px"
style="width: 50%; height: 230px"
></div>
</template>

View File

@ -0,0 +1,565 @@
<template>
<div
ref="chart"
style="width: 100%; height: 240px"
></div>
</template>
<script setup>
import {
onMounted,
onBeforeMount,
ref,
reactive,
defineProps,
nextTick,
} from "vue";
// echarts
import * as echarts from "echarts";
import "echarts-gl";
const props = defineProps({
list: {
type: Object,
},
});
const chart = ref(); // DOM
const data = reactive({
list: {},
// pieData: [
// {
// name: "61-70", //
// value: "", //
// },
// {
// name: "71-80",
// value: "",
// },
// {
// name: "81-90",
// value: "",
// },
// {
// name: "91-100",
// value: "",
// },
// {
// name: "100",
// value: "",
// },
// ],
option: {},
});
const colorList = [
"#FFE35F",
"#0081FF",
"#8ABEDB",
"#25B9C8",
"#30EB92",
"rgba(69, 244, 245)",
"rgba(7, 166, 255)",
"rgba(255, 208, 118)",
"rgba(109, 168, 198)",
"rgba(255, 255, 255)",
];
const pieData = reactive([
{
name: "0-18岁", //
value: 0, //
per: 2,
},
{
name: "19-60岁",
value: 0,
per: 8,
},
{
name: "60岁以上",
value: 0,
per: 10,
},
]);
// const serData = pieData.map((dItem, index) => {
// return {
// ...dItem,
// value: Number(dItem.value),
// itemStyle: {
// color: colorList[index],
// },
// };
// });
//
// const option = getPie3D(serData, 0.8);
const getOption = () => {
const serData = pieData.map((dItem, index) => {
return {
...dItem,
value: Number(dItem.value),
itemStyle: {
color: colorList[index],
},
};
});
data.option = getPie3D(serData, 0.8);
};
// 3D
function getPie3D(pieData, internalDiameterRatio) {
let series = [];
let sumValue = 0;
let startValue = 0;
let endValue = 0;
let legendData = [];
let k =
typeof internalDiameterRatio !== "undefined"
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
: 1 / 3;
// series-surface
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value;
let seriesItem = {
name:
typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
type: "surface",
parametric: true,
wireframe: {
show: false,
},
pieData: pieData[i],
pieStatus: {
selected: false,
hovered: false,
k: 1 / 10,
},
};
if (typeof pieData[i].itemStyle != "undefined") {
let itemStyle = {};
typeof pieData[i].itemStyle.color != "undefined"
? (itemStyle.color = pieData[i].itemStyle.color)
: null;
typeof pieData[i].itemStyle.opacity != "undefined"
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
: null;
seriesItem.itemStyle = itemStyle;
}
series.push(seriesItem);
}
// 使 sumValue getParametricEquation
// series-surface series-surface.parametricEquation
for (let i = 0; i < series.length; i++) {
endValue = startValue + series[i].pieData.value;
series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = getParametricEquation(
series[i].pieData.startRatio,
series[i].pieData.endRatio,
false,
false,
k,
series[i].pieData.value
);
startValue = endValue;
legendData.push(series[i].name);
}
// //
// series.push({
// name: 'mouseoutSeries',
// type: 'surface',
// parametric: true,
// wireframe: {
// show: false,
// },
// width: '30px',
// itemStyle: {
// opacity: 0.7,
// color: '#fff',
// },
// parametricEquation: {
// u: {
// min: 0,
// max: Math.PI * 2,
// step: Math.PI / 20,
// },
// v: {
// min: 0,
// max: Math.PI ,
// step: Math.PI / 20,
// },
// x: function (u, v) {
// return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI);
// },
// y: function (u, v) {
// return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) ;
// },
// z: function (u, v) {
// return Math.cos(v) > 0 ? -6 : -7;
// },
// },
// });
// legendDataseries
let option = {
//animation: false,
//
legend: {
data: legendData,
color: [
"#8FD7FC",
"#466BE7",
"#F4BB29",
"#49C384",
"#8FD7FC",
"#466BE7",
"#F4BB29",
"#49C384",
],
width: "70%",
//
orient: "vertical",
right: "center",
bottom: 2,
//
itemGap: 2,
show: true,
icon: "rect",
itemHeight: 10,
itemWidth: 25,
textStyle: {
//
fontSize: 14,
color: "#FFFFFF",
lineHeight: 20,
},
//
formatter: function (name) {
var target;
var num;
for (var i = 0, l = pieData.length; i < l; i++) {
if (pieData[i].name == name) {
target = pieData[i].per;
num = pieData[i].value;
}
}
return (`${name} ${num}${target}%`);
},
},
//
tooltip: {
backgroundColor: "rgba(18, 55, 85, 0.8);",
borderColor: "transparent",
formatter: (params) => {
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
let bfb = (
(option.series[params.seriesIndex].pieData.endRatio -
option.series[params.seriesIndex].pieData.startRatio) *
100
).toFixed(2);
const value = option.series[params.seriesIndex].pieData.value;
return (
`<div style='color:#FFFFFF;'>` +
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
`${params.seriesName}<br/>` +
`<span style='margin-right:20px'>${value}人</span>` +
`<span >${bfb}%</span>` +
`</div>`
);
}
},
},
xAxis3D: {},
yAxis3D: {},
zAxis3D: {},
grid3D: {
viewControl: {
autoRotate: true,
rotateSensitivity: 0, //0
zoomSensitivity: 0, //0
panSensitivity: 0, //0
alpha: 20, //( )
distance: 100, //zoom()
},
top: "-60",
left: "0",
width: "100%",
show: false,
boxHeight: 16,
},
series: series,
};
return option;
}
// series-surface.parametricEquation
function getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
h
) {
//
let midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2;
//
if (startRatio === 0 && endRatio === 1) {
isSelected = false;
}
// / k 1/3
k = typeof k !== "undefined" ? k : 1 / 3;
// x y 0
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 1
let hoverRate = isHovered ? 1.05 : 1;
//
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32,
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20,
},
x: function (u, v) {
if (u < startRadian) {
return (
offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
if (u > endRadian) {
return (
offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y: function (u, v) {
if (u < startRadian) {
return (
offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
if (u > endRadian) {
return (
offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z: function (u, v) {
if (u < -Math.PI * 0.5) {
return Math.sin(u);
}
if (u > Math.PI * 2.5) {
return Math.sin(u) * h * 0.1;
}
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
},
};
}
//
function bindListen(myChart) {
let selectedIndex = "";
let hoveredIndex = "";
//
myChart.on("click", function (params) {
// option.series
let isSelected = !option.series[params.seriesIndex].pieStatus.selected;
let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
let k = option.series[params.seriesIndex].pieStatus.k;
let startRatio = option.series[params.seriesIndex].pieData.startRatio;
let endRatio = option.series[params.seriesIndex].pieData.endRatio;
// option
if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
option.series[selectedIndex].parametricEquation = getParametricEquation(
option.series[selectedIndex].pieData.startRatio,
option.series[selectedIndex].pieData.endRatio,
false,
false,
k,
option.series[selectedIndex].pieData.value
);
option.series[selectedIndex].pieStatus.selected = false;
}
// / option
option.series[params.seriesIndex].parametricEquation =
getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[params.seriesIndex].pieData.value
);
option.series[params.seriesIndex].pieStatus.selected = isSelected;
// seriesIndex
isSelected ? (selectedIndex = params.seriesIndex) : null;
// 使 option
myChart.setOption(option);
});
// mouseover
myChart.on("mouseover", function (params) {
//
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
// mouseover
if (hoveredIndex === params.seriesIndex) {
return;
//
} else {
// option
if (hoveredIndex !== "") {
// option.series false
isSelected = option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
startRatio = option.series[hoveredIndex].pieData.startRatio;
endRatio = option.series[hoveredIndex].pieData.endRatio;
k = option.series[hoveredIndex].pieStatus.k;
// option
option.series[hoveredIndex].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[hoveredIndex].pieData.value
);
option.series[hoveredIndex].pieStatus.hovered = isHovered;
// seriesIndex
hoveredIndex = "";
}
// mouseover option
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
// option.series true
isSelected = option.series[params.seriesIndex].pieStatus.selected;
isHovered = true;
startRatio = option.series[params.seriesIndex].pieData.startRatio;
endRatio = option.series[params.seriesIndex].pieData.endRatio;
k = option.series[params.seriesIndex].pieStatus.k;
// option
option.series[params.seriesIndex].parametricEquation =
getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[params.seriesIndex].pieData.value + 5
);
option.series[params.seriesIndex].pieStatus.hovered = isHovered;
// seriesIndex
hoveredIndex = params.seriesIndex;
}
// 使 option
myChart.setOption(option);
}
});
// bug
myChart.on("globalout", function () {
//
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
if (hoveredIndex !== "") {
// option.series true
isSelected = option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
k = option.series[hoveredIndex].pieStatus.k;
startRatio = option.series[hoveredIndex].pieData.startRatio;
endRatio = option.series[hoveredIndex].pieData.endRatio;
// option
option.series[hoveredIndex].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[hoveredIndex].pieData.value
);
option.series[hoveredIndex].pieStatus.hovered = isHovered;
// seriesIndex
hoveredIndex = "";
}
// 使 option
myChart.setOption(option);
});
}
// 使
// onMounted(() => {
// // domecharts
// // var myChart = echarts.init(document.getElementById('main'));
// // Vue3
// var myChart = echarts.init(chart.value);
// //
// // bindListen(myChart)
// // init(); // vue3.2this
// // 使
// myChart.setOption(option);
// // :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
// });
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
// :
window.addEventListener("resize", () => {
myChart.resize();
});
};
// 使
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
pieData[0].value = data.list.wfgz;
pieData[1].value = data.list.xstp;
pieData[2].value = data.list.skym;
getOption();
setChart();
}, 600);
});
</script>
<style scoped></style>

View File

@ -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(() => {
// // domecharts
// // var myChart = echarts.init(document.getElementById('main'));
// // Vue3
// var myChart = echarts.init(chart.value);
// // init(); // vue3.2this
// // 使
// myChart.setOption(option);
// myChart.on("scroll", function (event) {
// // bargap
// var bargap = event.scrollData / 10000; // 1%0.5bargap
// 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>