This commit is contained in:
parent
e373f23594
commit
abea3bc3af
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%;height: 250px"></div>
|
||||
<div ref="chart" style="width: 100%; height: 250px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -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",
|
||||
|
|
@ -80,14 +75,14 @@ const option = {
|
|||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 设置轴刻度不显示
|
||||
},
|
||||
data: ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",],
|
||||
show: false, // 设置轴刻度不显示
|
||||
},
|
||||
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",
|
||||
label:{
|
||||
show:true,
|
||||
position:'top',
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
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",
|
||||
formatter: function (data) {
|
||||
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)", //外阴影背景
|
||||
}
|
||||
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)",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(255, 242, 142, 0.20)",
|
||||
},
|
||||
]),
|
||||
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)" },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -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)",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(23, 237, 255, 0.20)",
|
||||
},
|
||||
]),
|
||||
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)" },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -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)",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(23, 237, 255, 0.20)",
|
||||
},
|
||||
]),
|
||||
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)" },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -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)",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue