diff --git a/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js b/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js index 3724cd5..a1c247e 100644 --- a/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js +++ b/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js @@ -44,11 +44,12 @@ $(() => { } }), document.getElementById("distributionOfBadTypesInProductionLineByDay")); - barChartAndLineChart({ - xName: data.map(val => val.name), - yDataTwo: data.map(val => val.qty), - yDataTwoName: "质量" - }, document.getElementById("statisticOfAttribute")); + percentageRingDiagramTwo(null, document.getElementById("statisticOfAttribute")) + // barChartAndLineChart({ + // xName: data.map(val => val.name), + // yDataTwo: data.map(val => val.qty), + // yDataTwoName: "质量" + // }, document.getElementById("statisticOfAttribute")); }) }) diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js index de9e7b2..adfeda9 100644 --- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js +++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js @@ -592,26 +592,26 @@ const barChartAndLineChartTwo = function (data, id) { // 饼图 const pieChart = function (data, id) { let charts = echarts.init(id); - if (!data) { - data = [ - { - value: 285, - name: "类型1", - }, - { - value: 410, - name: "类型2", - }, - { - value: 274, - name: "类型3", - }, - { - value: 235, - name: "类型4", - }, - ] - } + // if (!data) { + // data = [ + // { + // value: 285, + // name: "类型1", + // }, + // { + // value: 410, + // name: "类型2", + // }, + // { + // value: 274, + // name: "类型3", + // }, + // { + // value: 235, + // name: "类型4", + // }, + // ] + // } let option = { tooltip: { trigger: "item", @@ -1880,6 +1880,126 @@ const percentageRingDiagram = function (data, id) { }; + charts.setOption(option); + $(window).resize(charts.resize); +} +const percentageRingDiagramTwo = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = [ + { + name: "数据1", + value: 54, + }, + { + name: "数据1", + value: 44, + }, + { + name: "数据1", + value: 35, + }, + { + name: "数据1", + value: 30, + }, + { + name: "数据1", + value: 44, + }, + ]; + } + + let titleArr = [], + seriesArr = []; + let colors = [ + ["#389af4", "#dfeaff"], + ["#ff8c37", "#ffdcc3"], + ["#ffc257", "#ffedcc"], + ["#fd6f97", "#fed4e0"], + ["#a181fc", "#e3d9fe"], + ["#389af4", "#dfeaff"], + ["#ff8c37", "#ffdcc3"], + ["#ffc257", "#ffedcc"], + ["#fd6f97", "#fed4e0"], + ]; + data.forEach(function (item, index) { + titleArr.push({ + text: item.name, + x: index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%", + y: '80%', + // top: '65%', + textAlign: "center", + textStyle: { + fontWeight: "normal", + fontSize: 0.8*vw, + color: colors[index][0], + textAlign: "center", + }, + }); + seriesArr.push({ + // name: item.name, + type: "pie", + clockWise: false, + radius: [2*vw, 2.5*vw], + itemStyle: { + normal: { + color: colors[index][0], + shadowColor: colors[index][0], + shadowBlur: 0, + label: { + show: false, + }, + labelLine: { + show: false, + }, + }, + }, + hoverAnimation: false, + center: [ + index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%", + '50%', + ], + data: [ + { + value: item.value, + label: { + normal: { + formatter: function (params) { + return params.value + "%"; + }, + position: "center", + show: true, + textStyle: { + fontSize: vw, + fontWeight: "bold", + color: colors[index][0], + }, + }, + }, + }, + { + value: 100 - item.value, + name: "invisible", + itemStyle: { + normal: { + color: colors[index][1], + }, + emphasis: { + color: colors[index][1], + }, + }, + }, + ], + }); + }); + + let option = { + title: titleArr, + series: seriesArr, + }; + + charts.setOption(option); $(window).resize(charts.resize); } \ No newline at end of file