This commit is contained in:
duanxiaohai
parent
e3b5ddccfc
commit
36c6879b76
|
|
@ -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,
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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%",
|
||||
|
|
@ -32,12 +32,13 @@ const option = {
|
|||
tooltip: {
|
||||
show: true, //---是否显示提示框,默认为true
|
||||
trigger: "axis",
|
||||
formatter: "{b0}:{c0}",
|
||||
formatter: "{b0}:{c0}" + "人",
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "value",
|
||||
scale: false,
|
||||
max: newMaxNumber,
|
||||
axisLabel: {
|
||||
//坐标轴分割线
|
||||
show: false,
|
||||
|
|
@ -47,10 +48,10 @@ 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)",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue