Răsfoiți Sursa

样式修改

zpf 10 luni în urmă
părinte
comite
c867f3aa80
1 a modificat fișierele cu 33 adăugiri și 16 ștergeri
  1. 33 16
      src/views/cockpit/common/ThreeStackedBarAndLine.vue

+ 33 - 16
src/views/cockpit/common/ThreeStackedBarAndLine.vue

@@ -23,14 +23,33 @@ export default {
             let y1Data = [110, 90, 120, 70, 60]
             let option = {
                 backgroundColor: 'rgba(0, 0, 0, 0)',
+                // tooltip: {
+                //     trigger: 'axis',
+                //     extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
+                //     backgroundColor: '#3A4667', // 背景
+                //     borderColor: '#3A4667',
+                //     textStyle: {
+                //         color: '#fff'
+                //     },
+                // },
                 tooltip: {
-                    trigger: 'axis',
-                    extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
-                    backgroundColor: '#3A4667', // 背景
-                    borderColor: '#3A4667',
-                    textStyle: {
-                        color: '#fff'
-                    },
+                    backgroundColor: 'RGBA(20, 106, 178, 0.4)',
+                    trigger: "axis",
+                    textStyle: { fontSize: '100%' },
+                    formatter: params => {
+                        let rander = params.map(item =>
+                            `
+                        
+                    <div style='
+                        border:none;
+                        border-radius:3px;
+                        color:#FFF;
+                        font-size:12px
+                        '>
+                            ${item.seriesName}: ${item.value}
+                    </div>`).join('')
+                        return rander
+                    }
                 },
                 grid: {
                     top: '20%',
@@ -42,10 +61,8 @@ export default {
                 color: ['#efc943', '#4ee1ac', '#186bb8'],
 
                 legend: {
-                    // data: ['收储面积', '收储个数'],
-                    data: ['收储个数', '意向', '进行中', '已完成'],
+                    data: ['临时用地面积', '正常使用', '剩余1个月', '已到期',],
 
-                    left: '7%',
                     top: '1%',
                     // textStyle: {
                     //     color: "#666666"
@@ -53,7 +70,7 @@ export default {
                     textStyle: {
                         fontSize: 12,
                         color: '#fff',
-                        padding: [5, 0, 0, 2],
+                        padding: [0, 0, 0, 0],
                         rich: {
                             a: {
                                 verticalAlign: 'middle',
@@ -62,7 +79,7 @@ export default {
                     },
                     itemWidth: 15,
                     itemHeight: 10,
-                    itemGap: 25
+                    itemGap: 15
                 },
                 xAxis: [{
                     type: 'category',
@@ -141,7 +158,7 @@ export default {
                 series: [
                     {
 
-                        name: "收储个数",
+                        name: "正常使用",
                         type: 'line',
                         smooth: true,
                         itemStyle: {
@@ -152,7 +169,7 @@ export default {
                         yAxisIndex: 1, // 指定使用第二个Y轴  
                         data: y1Data,
                     }, {
-                        name: '意向',
+                        name: '剩余1个月',
                         type: 'bar',
                         stack: '渠道1',
                         barWidth: 14,
@@ -160,7 +177,7 @@ export default {
                         data: [12, 12, 12, 12, 1, 2],
                     },
                     {
-                        name: '进行中',
+                        name: '已到期',
                         type: 'bar',
                         stack: '渠道1',
                         barWidth: 14,
@@ -168,7 +185,7 @@ export default {
                         data: [24, 12, 12, 0, 1, 2],
                     },
                     {
-                        name: '已完成',
+                        name: '临时用地面积',
                         barWidth: 14,
 
                         type: 'bar',