This commit is contained in:
duanxiaohai 2024-04-19 13:24:07 +08:00
parent e3b5ddccfc
commit 36c6879b76
2 changed files with 65 additions and 153 deletions

View File

@ -41,7 +41,7 @@ const data = reactive({
// const datas = {
// value: 18,
// };
var colors = ["#4EC2FF", "#FF805C", "#12F7D5", "#268FFF", "#FFE986"];
var colors = ["#00FFFB", "#FF9E2C", "#F74951", "#D7FF00", "#0050FF", "#00FB7D"];
const getOption = () => {
data.option = {
color: colors,
@ -54,7 +54,7 @@ const getOption = () => {
{
type: "pie",
center: ["50%", "50%"],
radius: ["60%", "82%"],
radius: ["60%", "80%"],
hoverAnimation: false,
clockWise: false,
itemStyle: {
@ -70,6 +70,9 @@ const getOption = () => {
label: {
show: false,
},
labelLayout: {
hideOverlap: false, //
},
data: [100],
},
/*内心原型图,展示整体数据概览*/
@ -82,12 +85,14 @@ const getOption = () => {
clockWise: true,
startAngle: 180,
minShowLabelAngle: 30,
minAngle: 50, //
startAngle: 100, //
// hoverAnimation: false,
label: {
// {b}{c}
//{a|}rich a
//{hr|}
formatter: "{hr|} {a|{b} {c}}\n\n",
formatter: "{hr|}{a|{b} {c}}\n\n",
color: "#fffdef", //线
borderWidth: 10,
borderRadius: 4,
@ -100,10 +105,10 @@ const getOption = () => {
borderRadius: 3,
width: 3,
height: 3,
padding: [3, 3, 0, -12],
padding: [3, 13, 0, -22],
},
a: {
padding: [-12, 10, -20, 15],
padding: [-16, 10, -20, 20],
},
},
@ -111,7 +116,6 @@ const getOption = () => {
color: "white", //
fontSize: 13, //
},
},
labelLine: {
show: true, //线
@ -123,9 +127,11 @@ const getOption = () => {
},
},
},
labelLayout: {
hideOverlap: false, //
},
data: data.list,
},
],
};
};

View File

@ -7,7 +7,7 @@ import { onMounted, reactive, ref } from "vue";
import * as echarts from "echarts";
const chart = ref(); // DOM
const data = [150, 230, 224, 218, 135, 147];
// const data = [150, 230, 224, 218, 135, 147];
const data1 = ["2019年", "2020年", "2021年", "2022年", "2023年", "2024年"];
const data2 = [
"10000人",
@ -18,10 +18,10 @@ const data2 = [
"10000人",
];
// const max = data.concat(lineData).reduce((pre, cur) => (pre > cur ? pre : cur), 0); //
const newData2 = data2.map((item) => parseInt(item.replace("人", "")));
const newMaxNumber = Math.max(...newData2) * 1.05;
const option = {
// color,
// calculable: true,
grid: {
top: "6%",
left: "9%",
@ -31,13 +31,14 @@ const option = {
},
tooltip: {
show: true, //---,true
trigger: "axis",
formatter: "{b0}:{c0}",
trigger: "axis",
formatter: "{b0}:{c0}" + "人",
},
xAxis: [
{
type: "value",
scale: false,
max: newMaxNumber,
axisLabel: {
//线
show: false,
@ -47,11 +48,11 @@ const option = {
},
axisLine: {
//y线
show: false // x线
show: false, // x线
},
splitLine: {
show: false,//---grid 线
},
show: false, //---grid 线
},
axisTick: {
show: false, //
},
@ -97,7 +98,7 @@ const option = {
position: "right",
axisLine: {
//--- 线
show: false // 线
show: false, // 线
},
axisLabel: {
//---
@ -112,116 +113,53 @@ const option = {
},
],
series: [
{
type: "bar",
data: data,
data: newData2.map(() => Math.max(...newData2)* 1.05), //
// barGap: 0 /**/,
yAxisIndex: 1,
barWidth: 30, //
silent: true, //
itemStyle: {
color: "rgba(0, 230, 255, 0.1)", //
},
},
{
type: "bar",
data: newData2.map(() => Math.max(...newData2)* 1.05), //
barWidth: 6, //
silent: true, //
itemStyle: {
color: "rgba(94, 178, 188, 0.2)", //
},
},
{
type: "bar",
data: newData2,
barWidth: 5, //
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
// 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)" },
// ]),
// // color: [{new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// // { offset: 0, color: "rgba(26, 255, 217, 0)" },
// // { offset: 1, color: "rgba(0, 230, 255, 1)" },
// // ])},
// // {new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// // { offset: 0, color: "rgba(26, 255, 217, 0)" },
// // { offset: 1, color: "rgba(0, 255, 208,1)" },
// // ])},
// // {new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// // { offset: 0, color: "rgba(26, 255, 217, 0)" },
// // { offset: 1, color: "rgba(255, 234, 90, 1)" },
// // ])},
// // ],
// },
// },
barGap: -1.1 /*多个并排柱子设置柱子之间的间距*/,
itemStyle: {
normal: {
color: function (params) {
let colorList = [
["rgba(0, 230, 255, 1)", "rgba(0, 230, 255, 0.2)"],
["rgba(0, 255, 208,1)", "rgba(0, 255, 208, 0.20)"],
["rgba(255, 234, 90, 1)", "rgba(255, 234, 90, 0.20)"],
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)" },
]),
];
if (params.dataIndex == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
],
false
);
} else if (params.dataIndex % 3 == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
],
false
);
} else if (params.dataIndex % 2 == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(255, 243, 119, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 0.20)",
},
],
false
);
} else {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
],
false
);
}
return colorList[params.dataIndex % colorList.length];
},
},
},
@ -233,42 +171,10 @@ const option = {
color: "rgba(0,0,0,0)",
backgroundColor: "rgba(0, 230, 255, 1)",
shadowColor: "#00E6FF",
position: ["99%", -1],
position: ["99%", -1.5],
shadowBlur: 6,
},
},
{
yAxisIndex: 1,
showBackground: true,
barWidth: 30, //
itemStyle: {
color: "rgba(0, 230, 255, 0)", //
},
// data: data.map(() => data),
data: data,
type: "bar",
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)",
},
],
},
},
},
},
],
};