xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

This commit is contained in:
duanxiaohai 2024-04-19 16:14:16 +08:00
parent ffef8d4b3a
commit a25268984c
3 changed files with 247 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/view/echarts_education/eP1.vue
View File

@ -8,7 +8,7 @@ import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用
// const data = [150, 230, 224, 218, 135, 147];
const data1 = ["2019年", "2020年", "2021年", "2022年", "2023年", "2024年"];
const data1 = ["中职", "高中", "初中", "小学", "幼儿园", "特殊教育"];
const data2 = [
"10000人",
"14000人",
@ -56,7 +56,6 @@ const option = {
axisTick: {
show: false, // 设置轴刻度不显示
},
// data: ["2019", "2019", "2019", "2019", "2019", "2019", "2019"],
},
],
yAxis: [
@ -127,7 +126,7 @@ const option = {
{
type: "bar",
data: newData2.map(() => Math.max(...newData2) * 1.02), // 外阴影铺满整个柱状图
barWidth: 6, //外阴影背景宽
barWidth: 8, //外阴影背景宽
silent: true, // 不响应事件
itemStyle: {
normal: {
@ -145,7 +144,7 @@ const option = {
{
type: "bar",
data: newData2,
barWidth: 5, //柱宽
barWidth: 7, //柱宽
barGap: -1.1 /*多个并排柱子设置柱子之间的间距*/,
itemStyle: {
normal: {
@ -177,9 +176,9 @@ const option = {
height: 8,
borderRadius: 1000,
color: "rgba(0,0,0,0)",
backgroundColor: "rgba(0, 230, 255, 1)",
shadowColor: "#00E6FF",
position: ["99%", -1.5],
backgroundColor: "rgba(0, 230, 255, 1)",
position: ["99%", -0.4],
shadowBlur: 6,
},
},

4
src/view/echarts_work/eP1.vue
View File

@ -170,11 +170,11 @@ const option = {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
color: "rgba(255, 243, 119, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
color: "rgba(255, 242, 142, 0.20)",
},
]),
},

346
src/view/echarts_work/ePjz.vue
View File

@ -1,80 +1,106 @@
<template>
<div ref="chart" style="width: 100%; height: 300px"></div>
<div ref="chart" style="width: 100%; height: 330px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用
// const data = [150, 230, 224, 218, 135, 147];
const data1 = ["2019年", "2020年", "2021年", "2022年", "2023年", "2024年"];
const data2 = [
"10000人",
"14000人",
"23000人",
"10000人",
"13200人",
"10000人",
];
const newData2 = data2.map((item) => parseInt(item.replace("人", "")));
const newMaxNumber = Math.max(...newData2) * 1.05;
const option = {
grid: {
top: "6%",
left: "9%",
right: "10%",
bottom: "0%",
containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
const data = [120, 200, 50, 80, 70];
const lineData = [150, 230, 24, 218, 135];
const max = data
.concat(lineData)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
// 背景颜色
const color = [
{
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 0.5,
color: "rgba(142, 187, 255, 0.5)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
],
},
];
const option = {
color,
calculable: true,
tooltip: {
show: true, //---是否显示提示框,默认为true
trigger: "axis",
formatter: "{b0}:{c0}" + "人",
formatter: "{b0}<br/> {a1}:{c0}<br/>{a2}:{c1}",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#3F82F7", //提示文字标题颜色
},
},
},
legend: {
data: ["总救助金额", "总救助人数"],
top: "8%",
bottom: "9%",
textStyle: {
fontSize: 12,
color: "#ffffff", //上文字标题颜色
},
},
grid: {
left: "6%",
right: "9%",
bottom: "7%",
containLabel: true,
color: "#ffffff",
},
xAxis: [
{
type: "value",
scale: false,
max: newMaxNumber,
type: "category",
axisLabel: {
//坐标轴分割线
show: false,
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false, // 取消x轴线
},
splitLine: {
show: false, //---grid 区域中的分隔线
},
axisTick: {
show: false, // 设置轴刻度不显示
},
// data: ["2019", "2019", "2019", "2019", "2019", "2019", "2019"],
data: ["2019", "2020", "2021", "2022", "2023"],
},
{
type: "category",
show: false,
data: ["2019", "2020", "2021", "2022", "2023"],
},
],
yAxis: [
{
type: "category",
type: "value",
scale: true,
// name: "时长/小时",
// max: data.length,
name: "救助人数",
max: max,
splitLine: {
//分割线配置
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
},
},
axisTick: {
show: false, // 设置轴刻度不显示
},
axisLabel: {
//y轴文字的配置
textStyle: {
@ -82,100 +108,208 @@ const option = {
},
},
axisLine: {
//分割线配置
//y轴线的颜色以及宽度
show: false,
// lineStyle: {
// color: "#ffffff",
// width: 1,
// type: "solid",
// },
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
data: data1,
},
{
type: "category",
show: true,
position: "right",
axisLine: {
//---坐标轴 轴线
show: false, // 取消轴线
type: "value",
scale: true,
min: 0,
max: max,
name: "救助金额/万",
splitLine: {
show: false,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//---坐标轴 标签
//y轴文字的配置
textStyle: {
color: "#ffffff",
},
},
axisTick: {
show: false, // 设置轴刻度不显示
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
data: data2,
},
],
series: [
// 数据低下的圆片
{
type: "bar",
data: newData2.map(() => Math.max(...newData2)* 1.05), // 外阴影铺满整个柱状图
// barGap: 0 /*多个并排柱子设置柱子之间的间距*/,
yAxisIndex: 1,
barWidth: 30, //外阴影背景宽
silent: true, // 不响应事件
name: "",
type: "pictorialBar",
symbolSize: [20, 5], // 宽，高
symbolOffset: [0, 2], // 左 上
z: 12,
symbol: 'circle', // 图形形状为圆
itemStyle: {
color: "rgba(0, 230, 255, 0.1)", //外阴影背景
color: "rgba(38, 191, 254, 1)",
// color: "red",
},
data: data,
},
// 数据的条形图
{
name: "总救助金额",
data: lineData,
type: "line", //线状图
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderWidth: 1,
color: "rgba(36, 104, 255, 1)",
borderColor: "#00FCFF",
},
},
// 数据的柱状图
{
name: "总救助人数",
data: data,
barWidth: 20,
type: "bar",
data: newData2.map(() => Math.max(...newData2)* 1.05), // 外阴影铺满整个柱状图
barWidth: 6, //外阴影背景宽
silent: true, // 不响应事件
itemStyle: {
color: "rgba(94, 178, 188, 0.1)", //外阴影背景
// borderColor: "#00FCFF",
// borderWidth: 1,
// color: "#00FCFF",
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(0, 204, 255, 1)",
},
{
offset: 1,
color: "rgba(0, 255, 213, 1)",
},
]),
},
},
//外阴影背景
{
type: "bar",
data: newData2,
barWidth: 5, //柱宽
barGap: -1.1 /*多个并排柱子设置柱子之间的间距*/,
xAxisIndex: 1,
itemStyle: {
normal: {
color: function (params) {
var colorList = [
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(0, 230, 255, 0)" },
{ offset: 0.5, color: "rgba(0, 230, 255, 0.5)" },
{ offset: 1, color: "rgba(0, 230, 255, 1)" },
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(0, 255, 208,0)" },
{ offset: 0.5, color: "rgba(0, 255, 208,0.5)" },
{ offset: 1, color: "rgba(0, 255, 208,1)" },
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(255, 234, 90, 0)" },
{ offset: 0.5, color: "rgba(255, 234, 90, 0.5)" },
{ offset: 1, color: "rgba(255, 234, 90, 1)" },
]),
];
return colorList[params.dataIndex % colorList.length];
color: "rgba(180, 180, 180, 0.2)", //背景颜色
},
data: data.map(() => max),
barWidth: 40, //外阴影背景宽
emphasis: {
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(64, 247, 176, 0.25)",
},
{
offset: 1,
color: "rgba(17, 34, 64, 0.25)",
},
],
},
},
},
label: {
show: true,
width: 8,
height: 8,
borderRadius: 1000,
color: "rgba(0,0,0,0)",
backgroundColor: "rgba(0, 230, 255, 1)",
shadowColor: "#00E6FF",
position: ["99%", -1.5],
shadowBlur: 6,
type: "bar",
},
// 数据顶部的样式
{
name: "",
type: "pictorialBar",
symbol: "circle",
symbolSize: [20, 8],
symbolOffset: [0, -4],
z: 3,
itemStyle: {
normal: {
// color: (params) => params.data.endColor,
color: "rgba(56, 251, 254, 1)",
label: {
show: false, // 开启显示
position: "top", // 在上方显示
textStyle: {
fontSize: "12",
color: "#B0E1FF",
},
},
},
},
symbolPosition: "end",
data: data,
},
],
// series: [
// // 数据低下的圆片
// {
// name: '',
// type: 'pictorialBar',
// symbolSize: [16, 8], // 宽，高
// symbolOffset: [0, 4], // 左 上
// z: 3,
// symbol: 'diamond',
// itemStyle: {
// color: params => params.data.startColor
// },
// data: this.data
// },
// // 数据的柱状图
// {
// name: '',
// type: 'bar',
// barWidth: 16, // 柱条的宽度，不设时自适应。
// barGap: '-100%', // 不同系列的柱间距离
// itemStyle: {
// color: (params) => {
// return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: params.data.startColor },
// { offset: 1, color: params.data.endColor }
// ]);
// },
// },
// data: this.data
// },
// // 数据顶部的样式
// {
// name: '',
// type: 'pictorialBar',
// symbol: 'diamond',
// symbolSize: [16, 8],
// symbolOffset: [0, -4],
// z: 3,
// itemStyle: {
// normal: {
// color: params => params.data.endColor,
// label: {
// show: true, // 开启显示
// position: 'top', // 在上方显示
// textStyle: {
// fontSize: '12',
// color: '#B0E1FF',
// }
// }
// }
// },
// symbolPosition: 'end',
// data: this.data
// },
// ]
};
onMounted(() => {