diff --git a/src/components/baozuo-demo/BottomCharts.vue b/src/components/baozuo-demo/BottomCharts.vue index f763195..4339c89 100644 --- a/src/components/baozuo-demo/BottomCharts.vue +++ b/src/components/baozuo-demo/BottomCharts.vue @@ -51,6 +51,7 @@ export default { // 计算完成百分比 const completionRate = ((completedQuantity / orderQuantity) * 100).toFixed(2) + '%'; + // eslint-disable-next-line no-inner-declarations function createProgressCircle(percentage) { let color, content; if (percentage === 0) { @@ -89,6 +90,7 @@ export default { const completionRate3 = Math.floor(Math.random() * 100); const newDataItem = []; if(_this.dataType == '整机') { + // eslint-disable-next-line no-const-assign newDataItem = [ `PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号 title, // 固定值 @@ -103,9 +105,11 @@ export default { createProgressCircle(completionRate2), completedQuantity // 完成数量 ]; + // eslint-disable-next-line brace-style } // 创建新的数据项 else if (title === 'U1机芯') { + // eslint-disable-next-line no-const-assign newDataItem = [ `PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号 title, // 固定值 @@ -118,6 +122,7 @@ export default { completedQuantity // 完成数量 ]; } else { + // eslint-disable-next-line no-const-assign newDataItem = [ `PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号 title, // 固定值 @@ -244,7 +249,7 @@ export default { top: 50%; left: 50%; transform: translate(-50%, -50%); - font-size: 0.16rem; + font-size: 0.2rem; color: #333; } diff --git a/src/components/baozuo-demo/CenterCmp.vue b/src/components/baozuo-demo/CenterCmp.vue index 1d38dd3..26bbd5f 100644 --- a/src/components/baozuo-demo/CenterCmp.vue +++ b/src/components/baozuo-demo/CenterCmp.vue @@ -5,7 +5,7 @@
-
本月总产量
+
本月总产量
1
1
3
@@ -57,7 +57,7 @@
- + +
-

{{ testchartData[0].value }}

-
+

{{ testchartData[0].value }}

+

{{ testchartData[0].name }}

@@ -49,6 +50,30 @@ }, data() { return { + config: { + data: [ + { + value: 520, + name: "机芯产量", + }, + { + value: 280, + name: "盖板产量", + }, + { + value: 100, + name: "整机产量", + }, + { + value: 100, + name: "组件产量", + }, + ], + color: ['#3de7c9','#88a8f4','#ffdc9d','#eb7e41'], + lineWidth: 40, + radius: '55%', + activeRadius: '60%' + }, testchartData:[ { value: 520, @@ -79,6 +104,7 @@ }, methods: { createData() { + const chartData = [ { value: 520, @@ -138,7 +164,7 @@ // color: "#E5F2A7", // }, // ]), - '#f8ffff','#88a8f4','#ffdc9d','#eb7e41' + '#3de7c9','#88a8f4','#ffdc9d','#eb7e41' ]; const sum = chartData.reduce((per, cur) => per + cur.value, 0); const gap = (1 * sum) / 100; @@ -181,6 +207,7 @@ pieData2.push(gapData); } var myChart = echarts.init(document.getElementById('pieId-new')); + const chartDom = document.getElementById('pieId-new'); this.option = { title: [ { @@ -276,6 +303,21 @@ show: false, }, data: pieData1, + emphasis: { // 高亮时的样式(放大) + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + radius: ['35%', '65%'], // 放大后的半径 + transition: ['radius'], // 开启动画过渡 + } + }, + blur: { // 非高亮时的样式(缩小) + itemStyle: { + radius: ['25%', '55%'] // 缩小后的半径 + } + }, + animationDuration: 1000, // 动画时长 + animationEasing: 'cubicInOut' // 缓动效果 }, { type: "pie", @@ -294,6 +336,23 @@ ], }; myChart.setOption(this.option); + // 轮播逻辑 + let currentIndex = -1; + const dataLen = pieData1.length; + const timer = setInterval(() => { + // 取消之前的高亮 + myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: currentIndex }); + // 计算下一个索引 + currentIndex = (currentIndex + 1) % dataLen; + // 高亮当前项 + myChart.dispatchAction({ + type: 'highlight', + seriesIndex: 0, + dataIndex: currentIndex + }); + }, 2000); // 2秒切换一次 + + }, }, diff --git a/src/img/icons/16.png b/src/img/icons/16.png new file mode 100644 index 0000000..260425c Binary files /dev/null and b/src/img/icons/16.png differ