diff --git a/src/view/echarts_education/pie5.vue b/src/view/echarts_education/pie5.vue index 529968d..d3b6832 100644 --- a/src/view/echarts_education/pie5.vue +++ b/src/view/echarts_education/pie5.vue @@ -20,11 +20,18 @@ const chart = ref(); // 创建DOM引用 const data = reactive({ list: [[], []], list1: [], + list2: [], + Max: null, option: {}, initialLegendData: ["县镇", "农村"], initialLegendData1: ["副高级", "正高级", "未定级", "员级", "中级", "助理级"], }); +// data.list(...data.list) +// const newData2 = data.list.map((item) => parseInt(item)); +// data.list1 = Math.max(...newData2) * 1.05; +// const newMaxNumber = Math.max(...newData2) * 1.05; + const getOption = () => { data.option = { tooltip: { @@ -50,6 +57,14 @@ const getOption = () => { xAxis: [ { type: "value", + max: data.Max, + splitLine: { + show: true, + lineStyle: { + color: "rgba(226, 226, 226, 0.3)", + width: 1, + }, + }, axisLabel: { //坐标轴刻度标签的相关设置 textStyle: { @@ -61,9 +76,6 @@ const getOption = () => { //y轴线的颜色以及宽度 show: false, // 取消x轴线 }, - splitLine: { - show: false, //---grid 区域中的分隔线 - }, axisTick: { show: false, // 设置轴刻度不显示 }, @@ -82,6 +94,9 @@ const getOption = () => { axisTick: { show: false, // 设置轴刻度不显示 }, + splitLine: { + show: false, //---grid 区域中的分隔线 + }, axisLabel: { //坐标轴刻度标签的相关设置 textStyle: { @@ -91,7 +106,6 @@ const getOption = () => { }, data: data.initialLegendData1, }, - ], series: [ { @@ -100,8 +114,8 @@ const getOption = () => { barGap: "-50%", type: "bar", data: data.list[1], - barWidth: "25%", //柱宽 - barGap: 1 /*多个并排柱子设置柱子之间的间距*/, + barWidth: "40%", //柱宽 + barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/, label: { show: true, position: "inside", @@ -111,16 +125,18 @@ const getOption = () => { }, }, itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: "rgba(254, 255, 142, 1)", + normal: { + color: function (params) { + var colorList = [ + 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)" }, + ]), + ]; + return colorList[params.dataIndex % colorList.length]; }, - { - offset: 1, - color: "rgba(251, 255, 142, 0.20)", - }, - ]), + }, }, }, { @@ -129,8 +145,8 @@ const getOption = () => { type: "bar", barGap: "-50%", data: data.list[0], - barWidth: "25%", //柱宽 - barGap: 1 /*多个并排柱子设置柱子之间的间距*/, + barWidth: "40%", //柱宽 + barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/, label: { show: true, position: "inside", @@ -140,16 +156,18 @@ const getOption = () => { }, }, itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: "rgba(23, 255, 206, 1)", + normal: { + color: function (params) { + var colorList = [ + 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)" }, + ]), + ]; + return colorList[params.dataIndex % colorList.length]; }, - { - offset: 1, - color: "rgba(23, 255, 202, 0.20)", - }, - ]), + }, }, }, ], @@ -162,20 +180,42 @@ const setChart = () => { myChart.setOption(data.option); }; const setChart1 = () => { - data.list[0].push(data.list1.xzjszcsl.xzfgj); //县镇复高级数量 - data.list[0].push(data.list1.xzjszcsl.xzzgj); //县镇正高级数量 - data.list[0].push(data.list1.xzjszcsl.xzwdj); //县镇未定级数量 - data.list[0].push(data.list1.xzjszcsl.xzyj); //县镇员级数量 - data.list[0].push(data.list1.xzjszcsl.xzzj); //县镇中级数量 - data.list[0].push(data.list1.xzjszcsl.xzzlj); //县镇助理级数量 - data.list[1].push(data.list1.ncjszcsl.ncfgj); //农村正高级数量 - data.list[1].push(data.list1.ncjszcsl.nczgj); //农村正高级数量 - data.list[1].push(data.list1.ncjszcsl.ncwdj); //农村中级数量 - data.list[1].push(data.list1.ncjszcsl.nczlj); //农村助理级数量 - data.list[1].push(data.list1.ncjszcsl.ncyj); //农村员级数量 - data.list[1].push(data.list1.ncjszcsl.ncwdj); //农村未定级数量 + // data.list[0].push(data.list1.xzjszcsl.xzfgj); //县镇复高级数量 + // data.list[0].push(data.list1.xzjszcsl.xzzgj); //县镇正高级数量 + // data.list[0].push(data.list1.xzjszcsl.xzwdj); //县镇未定级数量 + // data.list[0].push(data.list1.xzjszcsl.xzyj); //县镇员级数量 + // data.list[0].push(data.list1.xzjszcsl.xzzj); //县镇中级数量 + // data.list[0].push(data.list1.xzjszcsl.xzzlj); //县镇助理级数量 + // data.list[1].push(data.list1.ncjszcsl.ncfgj); //农村正高级数量 + // data.list[1].push(data.list1.ncjszcsl.nczgj); //农村正高级数量 + // data.list[1].push(data.list1.ncjszcsl.ncwdj); //农村中级数量 + // data.list[1].push(data.list1.ncjszcsl.nczlj); //农村助理级数量 + // data.list[1].push(data.list1.ncjszcsl.ncyj); //农村员级数量 + // data.list[1].push(data.list1.ncjszcsl.ncwdj); //农村未定级数量 - console.log(data.list, "乡镇1"); + const xzjszcsl = data.list1.xzjszcsl; + const ncjszcsl = data.list1.ncjszcsl; + const xzData = [ + xzjszcsl.xzfgj, + xzjszcsl.xzzgj, + xzjszcsl.xzwdj, + xzjszcsl.xzyj, + xzjszcsl.xzzj, + xzjszcsl.xzzlj, + ]; + const ncData = [ + ncjszcsl.ncfgj, + ncjszcsl.nczgj, + ncjszcsl.ncwdj, + ncjszcsl.nczlj, + ncjszcsl.ncyj, + ncjszcsl.ncwdj, + ]; + data.list[0].push(...xzData); // 县镇数据 + data.list[1].push(...ncData); // 农村数据 + data.list2 = [...data.list[0], ...data.list[1]]; + let Max = Math.max(...data.list2); + data.Max = Math.ceil((Max * 1.2) / 100) * 100; }; // 使用生命钩子