diff --git a/src/view/echarts_education/edXX.vue b/src/view/echarts_education/edXX.vue index ed50147..9d5aac2 100644 --- a/src/view/echarts_education/edXX.vue +++ b/src/view/echarts_education/edXX.vue @@ -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, }, - ], }; }; diff --git a/src/view/echarts_work/ePjz.vue b/src/view/echarts_work/ePjz.vue index de954ea..295dea9 100644 --- a/src/view/echarts_work/ePjz.vue +++ b/src/view/echarts_work/ePjz.vue @@ -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)", - }, - ], - }, - }, - }, - }, ], };