This commit is contained in:
姚宇浩 2024-06-04 13:39:15 +08:00
parent 2f13454c84
commit 9208afcea6
6 changed files with 507 additions and 293 deletions

View File

@ -44,32 +44,6 @@ const getOption = () => {
{
type: "category",
axisLabel: {
// formatter: function (params) {
// var str = ""; //
// var paramsLen = params.length; //
// var len = 6; //
// var rowNumber = Math.ceil(paramsLen / len); //
// if (paramsLen > len) {
// //len
// for (var i = 0; i < rowNumber; i++) {
// var temp = ""; //
// var start = i * len; //
// var end = start + len; //
// if (i == rowNumber - 1) {
// //
// temp = params.substring(start, paramsLen);
// } else {
// //
// temp = params.substring(start, end) + "\n";
// }
// str += temp; //
// }
// } else {
// //
// str = params;
// }
// return str; //
// },
textStyle: {
color: "#ffffff",
fontSize: 15,
@ -116,6 +90,7 @@ const getOption = () => {
],
series: [
{
z: 1,
name: "精神病健康居家在册管理人数",
type: "bar",
data: data.rs,
@ -131,65 +106,143 @@ const getOption = () => {
itemStyle: {
normal: {
color: function (params) {
// var colorList = [
// new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "rgba(23, 237, 255, 1)",
// },
// {
// offset: 1,
// color: "rgba(23, 237, 255, 0.20)",
// },
// ],
// false
// ),
// new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "rgba(255, 243, 119, 1)",
// },
// {
// offset: 1,
// color: "rgba(255, 242, 142, 0.20)",
// },
// ],
// false
// ),
// new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "rgba(142, 187, 255, 1)",
// },
// {
// offset: 1,
// color: "rgba(142, 187, 255, 0.20)",
// },
// ],
// false
// ),
// ];
var colorList = [
new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(23, 237, 255, .7)" },
{ offset: 0.5, color: "rgba(23, 237, 255, .7)" },
{ offset: 0.5, color: "rgba(23, 237, 255, .3)" },
{ offset: 1, color: "rgba(23, 237, 255, .5)" },
],
false
),
new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(255, 243, 119, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 0.20)",
},
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(255, 242, 142, .7)" },
{ offset: 0.5, color: "rgba(255, 242, 142, .7)" },
{ offset: 0.5, color: "rgba(255, 242, 142, .3)" },
{ offset: 1, color: "rgba(255, 242, 142, .5)" },
],
false
),
new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
],
false
),
},
];
return colorList[params.dataIndex % colorList.length];
},
},
},
},
{
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.rs,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [21, 15],
itemStyle: {
normal: {
color: function (params) {
var colorList = [
{
offset: 1,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 1)",
},
];
return colorList[params.dataIndex % colorList.length].color;
},
},
},
// itemStyle: {
// borderColor: "#2fffa4",
// color: "rgba(142, 187, 255, 1)",
// },
},
],
};
};

View File

@ -14,14 +14,14 @@ const props = defineProps({
year: {
type: Array,
default: () => [],
}
},
});
const data = reactive({
list: [],
year: [],
option: {},
bg: [],
})
});
const chart = ref(); // DOM
const getOption = () => {
@ -66,8 +66,9 @@ data.option = {
{
name: "历年体检人数",
type: "value",
nameTextStyle: { // Y
fontSize: 14 // 20
nameTextStyle: {
// Y
fontSize: 14, // 20
},
splitLine: {
show: true,
@ -123,6 +124,7 @@ data.option = {
],
series: [
{
z: 1,
name: "体检人数",
type: "bar",
data: data.list,
@ -130,7 +132,7 @@ data.option = {
label: {
show: true,
color: "#ffffff",
position:'top',
position: "top",
formatter: function (data) {
return data.value;
},
@ -138,42 +140,100 @@ data.option = {
itemStyle: {
normal: {
color: function (params) {
// var colorList = [
// new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "rgba(23, 237, 255, 1)",
// },
// {
// offset: 1,
// color: "rgba(23, 237, 255, 0.20)",
// },
// ],
// false
// ),
// new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "rgba(255, 243, 119, 1)",
// },
// {
// offset: 1,
// color: "rgba(255, 242, 142, 0.20)",
// },
// ],
// false
// ),
// new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "rgba(142, 187, 255, 1)",
// },
// {
// offset: 1,
// color: "rgba(142, 187, 255, 0.20)",
// },
// ],
// false
// ),
// ];
var colorList = [
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(23, 237, 255, .7)" },
{ offset: 0.5, color: "rgba(23, 237, 255, .7)" },
{ offset: 0.5, color: "rgba(23, 237, 255, .3)" },
{ offset: 1, color: "rgba(23, 237, 255, .5)" },
],
false),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(255, 243, 119, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 0.20)",
},
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(255, 242, 142, .7)" },
{ offset: 0.5, color: "rgba(255, 242, 142, .7)" },
{ offset: 0.5, color: "rgba(255, 242, 142, .3)" },
{ offset: 1, color: "rgba(255, 242, 142, .5)" },
],
false),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
],
false),
},
];
return colorList[params.dataIndex % colorList.length];
},
},
@ -189,29 +249,66 @@ data.option = {
data: data.bg.map(() => 100),
barWidth: 50,
},
{
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.list,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [23, 15],
itemStyle: {
normal: {
color: function (params) {
var colorList = [
{
offset: 1,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 1)",
},
];
return colorList[params.dataIndex % colorList.length].color;
},
},
},
// itemStyle: {
// borderColor: "#2fffa4",
// color: "rgba(142, 187, 255, 1)",
// },
},
],
};
}
};
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// 使
myChart.setOption(data.option);
}
};
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list
data.year = props.year
data.list = props.list;
data.year = props.year;
data.year.forEach(() => {
data.bg.push(0)
})
getOption()
setChart()
}, 600)
data.bg.push(0);
});
getOption();
setChart();
}, 600);
});
</script>
<style scoped>

View File

@ -126,7 +126,7 @@ const getOption = () => {
data: data.zgffrc,
symbol: "diamond",
symbolOffset: ["-20%", "-50%"],
symbolSize: [19, 10],
symbolSize: [17, 10],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(142, 187, 255, 1)",
@ -183,7 +183,7 @@ const getOption = () => {
data: data.cxffrc,
symbol: "diamond",
symbolOffset: [4, "-50%"],
symbolSize: [19, 10],
symbolSize: [17, 10],
itemStyle: {
borderColor: "#32ffee",
color: "rgba(23, 237, 255, 1)",

View File

@ -210,18 +210,34 @@ const getOption = () => {
],
series: [
{
z: 1,
yAxisIndex: 0,
name: "计划生育人数",
data: data.list1,
barWidth: 20,
type: "bar",
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
],
},
},
label: {
show: true,
position:'inside',
color:'#ffffff',
position: "inside",
color: "#ffffff",
formatter: function (data) {
return data.value
}
return data.value;
},
},
},
{
@ -231,11 +247,11 @@ const getOption = () => {
type: "line", //线
label: {
show: true,
position:'top',
color:'#ffffff',
position: "top",
color: "#ffffff",
formatter: function (data) {
return data.value
}
return data.value;
},
},
itemStyle: {
borderColor: "#00FCFF",
@ -274,6 +290,21 @@ const getOption = () => {
},
type: "bar",
},
//
{
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.list1,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [22, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(142, 187, 255, 1)",
},
},
],
};
};

View File

@ -9,8 +9,8 @@ import * as echarts from "echarts";
const chart = ref(); // DOM
const data = [120, 200, 150, 80, 70, 110, 130];
const lineData = [150, 230, 224, 218, 135, 147, 260];
const data = [120, 200, 150, 80, 70];
const lineData = [150, 230, 224, 218, 135];
const max = data
.concat(lineData)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //
@ -128,7 +128,8 @@ const option = {
name: "次数/次",
min: 0,
max: max,
splitLine: {//线
splitLine: {
//线
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
@ -136,7 +137,8 @@ const option = {
fontSize: 16,
},
},
axisLabel: {//y
axisLabel: {
//y
textStyle: {
color: "#ffffff",
fontSize: 16,
@ -156,16 +158,32 @@ const option = {
],
series: [
{
z: 1,
name: "上门服务时长",
data: data,
barWidth: 20,
type: "bar",
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
],
},
},
label: {
show: true,
color:'#ffffff',
color: "#ffffff",
formatter: function (data) {
return data.value
}
return data.value;
},
},
},
{
@ -174,11 +192,11 @@ const option = {
type: "line", //线
label: {
show: true,
position:'top',
color:'#ffffff',
position: "top",
color: "#ffffff",
formatter: function (data) {
return data.value
}
return data.value;
},
},
itemStyle: {
borderColor: "#00FCFF",
@ -216,6 +234,21 @@ const option = {
},
type: "bar",
},
//
{
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [22, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(142, 187, 255, 1)",
},
},
],
};

View File

@ -425,21 +425,21 @@
</div>
</div>
<div class="jtsyBoxbot">
<div class="jtsyBoxtop1">
<img :src="data.jtsyList[2].img" alt="" />
<div class="jtsyBoxtop1" v-for="(item,index) in data.jtsyList.slice(2,5)">
<img :src="item.img" alt="" />
<div>
<div class="jtsyname">{{ data.jtsyList[2].name }}</div>
<div class="jtsyname">{{ item.name }}</div>
<div class="jtsytext">
{{ data.jtsyList[2].key1 }}
<span>{{ data.jtsyList[2].key1_value }}</span>
{{ item.key1 }}
<span>{{ item.key1_value }}</span>
</div>
<div>
{{ data.jtsyList[2].key2 }}
<span>{{ data.jtsyList[2].key2_value }}</span>
{{ item.key2 }}
<span>{{ item.key2_value }}</span>
</div>
</div>
</div>
<div class="jtsyBoxtop1">
<!-- <div class="jtsyBoxtop1">
<img :src="data.jtsyList[3].img" alt="" />
<div>
<div class="jtsyname">{{ data.jtsyList[3].name }}</div>
@ -466,7 +466,7 @@
<span>{{ data.jtsyList[4].key2_value }}</span>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>