Bläddra i källkod

修改图表颜色

LXXXY 5 år sedan
förälder
incheckning
67e5dd0058

+ 2 - 2
src/api/point/httpUtil.js

@@ -35,7 +35,7 @@ export default {
         let ProjectId = storage.get("global_project_selected")
         let userName = storage.get("user_name")
         let vm = this;
-        fetch({ url: url, method: 'get', params: data, headers: {'ProjectId': ProjectId, 'Comming': 'adm' ,'Account': userName}}).then((response) => {
+        fetch({ url: url, method: 'get', params: data, headers: { 'ProjectId': ProjectId, 'Comming': 'adm', 'Account': userName } }).then((response) => {
             successResponse(vm, response, success, failed)
         }).catch(error => {
             errorResponse(vm, error, err);
@@ -45,7 +45,7 @@ export default {
         let ProjectId = storage.get("global_project_selected")
         let userName = storage.get("user_name")
         let vm = this;
-        fetch({ url: url, method: 'post', data: data, headers: {'ProjectId': ProjectId, 'Comming': 'adm' ,'Account': userName} }).then((response) => {
+        fetch({ url: url, method: 'post', data: data, headers: { 'ProjectId': ProjectId, 'Comming': 'adm', 'Account': userName } }).then((response) => {
             successResponse(vm, response, success, failed)
         }).catch(error => {
             errorResponse(vm, error, err);

+ 4 - 4
src/components/point/report/historyChart.vue

@@ -106,7 +106,7 @@ export default {
             handleStyle: {
               color: '#fff',
               shadowBlur: 3,
-              shadowColor: 'rgba(0, 0, 0, 0.6)',
+              shadowColor: 'rgb(144, 147, 153)',
               shadowOffsetX: 2,
               shadowOffsetY: 2
             }
@@ -119,15 +119,15 @@ export default {
               symbol: 'none',
               sampling: 'average',
               itemStyle: {
-                color: 'rgb(182,194,154)'
+                color: 'rgb(103, 194, 58)'
               },
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
-                  color: 'rgb(182,194,154)'
+                  color: 'rgb(225, 243, 216)'
                 }, {
                   offset: 1,
-                  color: 'rgb(138,151,123)'
+                  color: 'rgb(225, 243, 216)'
                 }])
               },
               data: this.chartData.map(item => item.data_value)

+ 49 - 38
src/components/point/report/integrateStatistics.vue

@@ -11,13 +11,8 @@
         1点位对多表号功能号:{{ pointData.oneToM }}
         <br />
         多点为对1表号功能号:{{ pointData.mToOne }}
-        <el-button
-          @click="showOverview"
-          type="info"
-          icon="el-icon-arrow-right"
-          circle
-          style="margin:-25px 0 0 50px;"
-        ></el-button>
+        <el-button @click="showOverview" type="info" icon="el-icon-arrow-right" circle
+          style="margin:-25px 0 0 50px;background:rgb(121, 187, 255);color:rgb(233, 233, 235);border:none;"></el-button>
       </div>
     </div>
     <!-- 图形图 -->
@@ -58,7 +53,7 @@ export default {
       barChartData: [],
       //表号功能号
       pointData: {
-        tabFuncNumSum:0,
+        tabFuncNumSum: 0,
         oneToM: 0,
         mToOne: 0,
         disConn: 0
@@ -75,30 +70,32 @@ export default {
     loadChart() {
       //获取环形图数据
       getIntegrateStatisticsToLoop({}, res => {
-        if(res.Result && res.Result == "success"){
+        if (res.Result && res.Result == "success") {
           this.pointData = {
             tabFuncNumSum: res.Content[0].Sum,
-            oneToM: res.Content[0].OtoM, 
+            oneToM: res.Content[0].OtoM,
             mToOne: res.Content[0].MtoO,
             disConn: res.Content[0].Disconn
-            };
+          };
         }
         this.loopChartData = [
           { value: res.Content[0].RelatedCount, name: "已对实例数量" },
           { value: res.Content[0].Sum - res.Content[0].RelatedCount, name: "未对应实例数量" }
         ];
 
+        let that = this;
         //环形图参数
         let loopOption = {
           tooltip: {
             trigger: "item",
             formatter: "{a} <br/>{b}: {c} ({d}%)"
           },
+          color: ['rgb(121, 187, 255)', 'rgb(233, 233, 235)'],
           legend: {
             orient: "vertical",
             x: "5%",
             y: "top",
-            data: this.loopChartData.map(item => item.name)
+            data: that.loopChartData.map(item => item.name)
           },
           graphic: {
             elements: [
@@ -109,7 +106,7 @@ export default {
                 style: {
                   text: (() => {
                     let s = 0;
-                    this.loopChartData.map(item => {
+                    that.loopChartData.map(item => {
                       s += item["value"];
                     });
                     return s + "\n总数";
@@ -122,31 +119,32 @@ export default {
             ]
           },
           series: [
-            {
-              name: "实例总数",
-              type: "pie",
-              radius: ["50%", "70%"],
-              avoidLabelOverlap: false,
-              label: {
-                normal: {
-                  show: false,
-                  position: "outside"
+                {
+                name: "实例总数",
+                type: "pie",
+                radius: ["50%", "70%"],
+                avoidLabelOverlap: false,
+                legendHoverLink: false,
+                selectedOffset: 0,
+                label: {
+                  normal: {
+                    show: true,
+                    position: "outside"
+                  }
+                },
+                labelLine: {
+                  normal: {
+                    show: true
+                  }
                 },
                 emphasis: {
-                  show: true,
-                  textStyle: {
-                    fontSize: "15",
-                    fontWeight: "bold"
+                  itemStyle: {
+                    // 高亮时点的颜色。
+                    color:undefined
                   }
-                }
-              },
-              labelLine: {
-                normal: {
-                  show: true
-                }
-              },
-              data: this.loopChartData
-            }
+                },
+                data: this.loopChartData
+              }
           ]
         };
 
@@ -154,11 +152,23 @@ export default {
         this.loopChart = echarts.init(this.$refs.loopchart);
         //设置参数并加载
         this.loopChart.setOption(loopOption);
-      });
+        //消除高亮
+        this.loopChart.on('mouseover', function (param) {
+          if (param.dataIndex == 1) {
+            loopOption.series[0].emphasis.itemStyle.color = 'rgb(233, 233, 235)';
+            that.loopChart.setOption(loopOption);
+          }
+          else{
+            loopOption.series[0].emphasis.itemStyle.color = 'rgb(121, 187, 255)';
+            that.loopChart.setOption(loopOption);
+          }
+        });
+      })
+
 
       //获取条形图数据
       getIntegrateStatisticsToBar({}, res => {
-        if(res.Result && res.Result == "success"){
+        if (res.Result && res.Result == "success") {
           this.barChartData = res.Content;
         }
 
@@ -180,6 +190,7 @@ export default {
               type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
             }
           },
+          color: ['rgb(121, 187, 255)', 'rgb(233, 233, 235)'],
           legend: {
             data: ["已接入", "未接入"]
           },
@@ -266,7 +277,7 @@ export default {
 }
 .statistics-chart {
   border: 1px solid rgba(0, 0, 0, 0.3);
-  min-height:50%;
+  min-height: 50%;
 }
 .chart-title {
   padding: 5px 5%;