This commit is contained in:
姚宇浩 2024-06-04 14:18:03 +08:00
parent e373f23594
commit abea3bc3af
4 changed files with 161 additions and 96 deletions

View File

@ -9,12 +9,7 @@ import * as echarts from "echarts";
const chart = ref(); // DOM
const data = [20, 20, 50, 80, 70, 10, 30];
// const lineData = [150, 230, 224, 218, 135, 147, 260];
// const max = data
// .concat(lineData)
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //
// //
const data = [200, 120, 150, 110, 70];
const color = [
{
type: "linear",
@ -82,12 +77,12 @@ const option = {
axisTick: {
show: false, //
},
data: ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",],
data: ["东华街道", "龙洲街道", "湖镇镇", "詹家镇", "小南海镇"],
},
{
type: "category",
show: false,
data: ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",],
data: ["东华街道", "龙洲街道", "湖镇镇", "詹家镇", "小南海镇"],
},
],
yAxis: [
@ -122,74 +117,95 @@ const option = {
},
},
},
// {
// type: "value",
// scale: true,
// // name: "/",
// min: 0,
// max: max,
// splitLine: {//线
// show: false,
// lineStyle: {
// color: "#ffffff",
// width: 1,
// },
// },
// axisLabel: {//y
// textStyle: {
// color: "#ffffff",
// },
// },
// axisLine: {
// //y线
// show: false,
// lineStyle: {
// color: "#ffffff",
// width: 1,
// type: "solid",
// },
// },
// },
{
type: "value",
min: 0,
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgb(221, 242, 255,0.1)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 16,
fontFamily: "MicrosoftYaHei",
color: "#ffffff",
fontSize: 16,
lineHeight: 19,
},
},
],
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(47, 168, 215, .7)" },
{ offset: 0.5, color: "rgba(47, 168, 215, .7)" },
{ offset: 0.5, color: "rgba(47, 168, 215, .3)" },
{ offset: 1, color: "rgba(47, 168, 215, .5)" },
],
},
},
label: {
show: true,
position:'top',
color:'#ffffff',
position: "top",
color: "#ffffff",
formatter: function (data) {
return data.value
}
return data.value;
},
},
// {
// // name: "",
// data: lineData,
// type: "line", //线
// itemStyle: {
// borderColor: "#00FCFF",
// borderWidth: 1,
// color: "#00FCFF",
// },
// },
},
//
{
xAxisIndex: 1,
yAxisIndex: 1,
showBackground: true,
itemStyle: {
normal: {
color: "rgba(180, 180, 180, 0)", //
}
},
},
// data: data.map(() => max),
data: data.map(() => Math.max(...data) * 1.02),
data: data.map(() => 100),
barWidth: 40, //
type: "bar",
},
//
{
z: 1,
type: "pictorialBar",
symbolPosition: "end",
data: data,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [21, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(47, 168, 215, 1)",
},
},
],
};

View File

@ -213,6 +213,7 @@ const getOption = () => {
},
},
{
z: 1,
yAxisIndex: 0,
name: "救助人数",
data: data.list1,
@ -227,16 +228,19 @@ const getOption = () => {
},
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(255, 243, 119, 1)",
color: {
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)" },
],
},
{
offset: 1,
color: "rgba(255, 242, 142, 0.20)",
},
]),
},
},
{
@ -270,6 +274,20 @@ const getOption = () => {
data: data.list.year.map(() => 100),
barWidth: 50,
},
{
z: 1,
type: "pictorialBar",
symbolPosition: "end",
data: data.list1,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [21, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(255, 242, 142, 1)",
},
},
],
};
};

View File

@ -47,12 +47,6 @@ const data = reactive({
// max: null,
});
// const data1 = [120, 200, 50, 80, 70];
// const lineData = [1500, 2300, 204, 2018, 1305];
// const max = data1
// .concat(lineData)
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //
const getOption = () => {
data.option = {
tooltip: {
@ -213,6 +207,7 @@ const getOption = () => {
},
},
{
z: 1,
yAxisIndex: 0,
name: "救助人数",
data: data.list1,
@ -227,16 +222,19 @@ const getOption = () => {
},
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
color: {
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)" },
],
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
]),
},
},
{
@ -271,6 +269,21 @@ const getOption = () => {
// data: 100,
barWidth: 50,
},
//
{
z: 1,
type: "pictorialBar",
symbolPosition: "end",
data: data.list1,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [21, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(23, 237, 255, 1)",
},
},
],
};
};

View File

@ -209,6 +209,7 @@ const getOption = () => {
},
},
{
z: 1,
yAxisIndex: 0,
name: "生活补贴人数",
data: data.list1,
@ -223,16 +224,19 @@ const getOption = () => {
},
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
color: {
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)" },
],
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
]),
},
},
{
@ -266,6 +270,20 @@ const getOption = () => {
data: data.list.year.map(() => 100),
barWidth: 50,
},
{
z: 1,
type: "pictorialBar",
symbolPosition: "end",
data: data.list1,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [21, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(23, 237, 255, 1)",
},
},
],
};
};