From e5ca6d7d713f6f541c10fb3fccdc86b3eba8ef26 Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Fri, 14 Jun 2024 11:53:51 +0800 Subject: [PATCH 1/2] 1 --- src/view/analyze.vue | 4 +- src/view/echart_analyze/right2.vue | 125 ++++++++++++++++++----------- 2 files changed, 79 insertions(+), 50 deletions(-) diff --git a/src/view/analyze.vue b/src/view/analyze.vue index e4c7d41..7250027 100644 --- a/src/view/analyze.vue +++ b/src/view/analyze.vue @@ -81,8 +81,8 @@ - - + +
diff --git a/src/view/echart_analyze/right2.vue b/src/view/echart_analyze/right2.vue index 1761bff..f318586 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,53 @@ 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, + }, }, - 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 +333,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 +413,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, + }, ], }; From 00b1554bc593709984688a1d46e7ed1c3a624706 Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Fri, 14 Jun 2024 11:58:03 +0800 Subject: [PATCH 2/2] 1 --- src/view/echart_analyze/right2.vue | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/src/view/echart_analyze/right2.vue b/src/view/echart_analyze/right2.vue index f318586..5acab87 100644 --- a/src/view/echart_analyze/right2.vue +++ b/src/view/echart_analyze/right2.vue @@ -194,7 +194,15 @@ const option = { xAxis: [ { type: "category", - data: ["小奔通", "两慢病", "水费", "就业招工", "零工市厂匹配", "医保", "交通出行"], + data: [ + "小奔通", + "两慢病", + "水费", + "就业招工", + "零工市厂匹配", + "医保", + "交通出行", + ], axisLine: { show: false, }, @@ -207,11 +215,22 @@ const option = { show: true, color: "#fff", fontSize: 16, + formatter: function (value) { + return value.length > 2 ? value.slice(0, 2) + "..." : value; + }, }, }, { type: "category", - data: ["小奔通", "两慢病", "水费", "就业招工", "零工市厂匹配", "医保", "交通出行"], + data: [ + "小奔通", + "两慢病", + "水费", + "就业招工", + "零工市厂匹配", + "医保", + "交通出行", + ], axisLine: { show: false, }, @@ -419,7 +438,7 @@ const option = { xAxisIndex: 1, label: { show: true, - fontSize:18, + fontSize: 18, position: "top", color: "#ffffff", formatter: function (data) { @@ -430,7 +449,7 @@ const option = { color: "rgba(221, 242, 255, 0)", }, - data: valueList.map((item) => item+5), + data: valueList.map((item) => item + 5), barWidth: 20, }, ],