diff --git a/src/view/echart_analyze/right2.vue b/src/view/echart_analyze/right2.vue
index 1761bff..5acab87 100644
--- a/src/view/echart_analyze/right2.vue
+++ b/src/view/echart_analyze/right2.vue
@@ -31,7 +31,7 @@ const colors = [
bottom: "rgba(60, 143, 255, .46)",
front: "rgba(60, 143, 255, .66)",
},
- {
+ {
left: "rgba(234, 162, 57, .16)",
right: "rgba(234, 162, 57, .6)",
top: "rgba(234, 162, 57, 1)",
@@ -52,7 +52,7 @@ const colors = [
bottom: "rgba(60, 143, 255, .46)",
front: "rgba(60, 143, 255, .66)",
},
- {
+ {
left: "rgba(234, 162, 57, .16)",
right: "rgba(234, 162, 57, .6)",
top: "rgba(234, 162, 57, 1)",
@@ -66,10 +66,9 @@ const colors = [
bottom: "rgba(14, 252, 255, .46)",
front: "rgba(14, 252, 255, .66)",
},
-
];
-const maxList = [90, 90, 90, 90, 90,90,90];
-const valueList = [20, 53, 47, 65, 29,11,50];
+const maxList = [90, 90, 90, 90, 90, 90, 90];
+const valueList = [20, 53, 47, 65, 29, 11, 50];
// 注册5个面图形:左侧、前面、右面、上面、下面
//c0:左下角，c1：右下角,c2:右上角，c3：左上角
@@ -83,8 +82,8 @@ const CubeLeft_1 = echarts.graphic.extendShape({
// 会canvas的应该都能看得懂，shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x - 20, shape.y];
- const c1 = [shape.x - 2, shape.y - 14];
- const c2 = [xAxisPoint[0] - 2, xAxisPoint[1] - 14];
+ const c1 = [shape.x - 7, shape.y - 14];
+ const c2 = [xAxisPoint[0] - 7, xAxisPoint[1] - 14];
const c3 = [xAxisPoint[0] - 20, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
@@ -103,8 +102,8 @@ const CubeFront_1 = echarts.graphic.extendShape({
// 会canvas的应该都能看得懂，shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x - 20, shape.y];
- const c1 = [shape.x + 18, shape.y];
- const c2 = [xAxisPoint[0] + 18, xAxisPoint[1]];
+ const c1 = [shape.x + 2, shape.y];
+ const c2 = [xAxisPoint[0] + 2, xAxisPoint[1]];
const c3 = [xAxisPoint[0] - 20, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
@@ -121,10 +120,10 @@ const CubeRight_1 = echarts.graphic.extendShape({
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
- const c0 = [shape.x + 18, shape.y];
- const c1 = [shape.x + 36, shape.y - 14];
- const c2 = [xAxisPoint[0] + 36, xAxisPoint[1] - 14];
- const c3 = [xAxisPoint[0] + 18, xAxisPoint[1]];
+ const c0 = [shape.x + 2, shape.y];
+ const c1 = [shape.x + 15, shape.y - 14];
+ const c2 = [xAxisPoint[0] + 15, xAxisPoint[1] - 14];
+ const c3 = [xAxisPoint[0] + 2, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
@@ -140,9 +139,9 @@ const CubeTop_1 = echarts.graphic.extendShape({
},
buildPath: function (ctx, shape) {
const c0 = [shape.x - 20, shape.y];
- const c1 = [shape.x + 18, shape.y];
- const c2 = [shape.x + 36, shape.y - 14];
- const c3 = [shape.x - 2, shape.y - 14];
+ const c1 = [shape.x + 2, shape.y];
+ const c2 = [shape.x + 15, shape.y - 14];
+ const c3 = [shape.x - 7, shape.y - 14];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
@@ -161,9 +160,9 @@ const CubeBottom_1 = echarts.graphic.extendShape({
const xAxisPoint = shape.xAxisPoint;
const c0 = [xAxisPoint[0] - 20, xAxisPoint[1]];
- const c1 = [xAxisPoint[0] + 18, xAxisPoint[1]];
- const c2 = [xAxisPoint[0] + 36, xAxisPoint[1] - 14];
- const c3 = [xAxisPoint[0] - 2, xAxisPoint[1] - 14];
+ const c1 = [xAxisPoint[0] + 2, xAxisPoint[1]];
+ const c2 = [xAxisPoint[0] + 15, xAxisPoint[1] - 14];
+ const c3 = [xAxisPoint[0] - 7, xAxisPoint[1] - 14];
ctx
.moveTo(c0[0], c0[1])
@@ -181,31 +180,72 @@ echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1);
const option = {
+ tooltip: {
+ trigger: "axis",
+ formatter: "{b0}:{c1}",
+ },
grid: {
left: 10,
- right: 40,
+ right: 0,
bottom: 20,
top: 20,
containLabel: true,
},
- xAxis: {
- type: "category",
- data: ["小奔通", "两慢病", "水费", "就业招工", "零工市场匹配",'医保','交通出行'],
- axisLine: {
- show: false,
- },
- offset: 10,
+ xAxis: [
+ {
+ type: "category",
+ data: [
+ "小奔通",
+ "两慢病",
+ "水费",
+ "就业招工",
+ "零工市厂匹配",
+ "医保",
+ "交通出行",
+ ],
+ axisLine: {
+ show: false,
+ },
+ offset: 10,
- axisTick: {
- show: false,
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ show: true,
+ color: "#fff",
+ fontSize: 16,
+ formatter: function (value) {
+ return value.length > 2 ? value.slice(0, 2) + "..." : value;
+ },
+ },
},
- axisLabel: {
- show: true,
- color: "#fff",
- fontSize: 16,
- align: "left",
+ {
+ type: "category",
+ data: [
+ "小奔通",
+ "两慢病",
+ "水费",
+ "就业招工",
+ "零工市厂匹配",
+ "医保",
+ "交通出行",
+ ],
+ axisLine: {
+ show: false,
+ },
+ offset: 10,
+
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ show: false,
+ color: "#fff",
+ fontSize: 16,
+ },
},
- },
+ ],
yAxis: {
min: 0,
max: 100,
@@ -312,19 +352,7 @@ const option = {
type: "custom",
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
- var color =
- api.value(1) > 10000
- ? "red"
- : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "#5cc4eb",
- },
- {
- offset: 0.8,
- color: "#21658c",
- },
- ]);
+
return {
type: "group",
children: [
@@ -404,6 +432,26 @@ const option = {
data: valueList,
},
+ //顶部字体
+ {
+ type: "bar",
+ xAxisIndex: 1,
+ label: {
+ show: true,
+ fontSize: 18,
+ position: "top",
+ color: "#ffffff",
+ formatter: function (data) {
+ return data.value;
+ },
+ },
+ itemStyle: {
+ color: "rgba(221, 242, 255, 0)",
+ },
+
+ data: valueList.map((item) => item + 5),
+ barWidth: 20,
+ },
],
};
-
+
+