cxw-010203

src/components/v-ranking/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-08 16:44:08
- * @LastEditTime: 2021-10-12 16:59:50
+ * @LastEditTime: 2021-10-29 09:16:21
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/components/v-ranking/index.vue
@@ -133,7 +133,7 @@ export default {
     text-align: center;
     line-height: 40px;
     .s1 {
-      color: #ffffff;
+      color: #9ba4af;
       font-size: 16px;
       line-height: 40px;
       font-family: Bebas;

src/views/Index/barometer/opt.js

@@ -2,11 +2,14 @@
 /*
  * @Author: your name
  * @Date: 2021-10-09 11:38:06
- * @LastEditTime: 2021-10-26 13:53:19
+ * @LastEditTime: 2021-10-29 10:43:30
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/barometer/opt.js
  */
+import * as echarts from "echarts";
+
+let colors = ['#3172ca', '#459c97', '#ab8921']
 function createData(ds = []) {
     let arr = [];
     for (let i = 0; i < ds.length; i++) {
@@ -21,8 +24,19 @@ function createData(ds = []) {
                     name: arr1[j].key,
                     type: 'line',
                     symbol: 'none',
+                    itemStyle: {
+                        color: colors[j]
+                    },
                     areaStyle: {
-                        opacity: 0.4
+                        normal: {
+                            opacity: 0.3,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0, color: colors[j] // 0% 处的颜色
+                            }, {
+                                offset: 1, color: '#000' // 100% 处的颜色
+                            }]
+                            )
+                        }
                     },
                     emphasis: {
                         focus: 'series'
@@ -37,7 +51,7 @@ function createData(ds = []) {
     }
     return arr;
 }
-export default function createOpt(dx = [],ds = []) {
+export default function createOpt(dx = [], ds = []) {
     const data = createData(ds);
     return {
         grid: {
@@ -54,7 +68,7 @@ export default function createOpt(dx = [],ds = []) {
             start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
             end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
             zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
-          }],
+        }],
         tooltip: {
             trigger: "axis",
             backgroundColor: "#08182F",
@@ -84,9 +98,9 @@ export default function createOpt(dx = [],ds = []) {
                     color: "#fff",
                 },
             },
-            axisLabel : {
+            axisLabel: {
                 formatter: (value) => {
-                    let str = value.substring(10,16)
+                    let str = value.substring(10, 16)
                     return str;
                 }
             },

src/views/Index/spreadTheSound/opt.js

@@ -1,12 +1,14 @@
 /*
  * @Author: your name
  * @Date: 2021-10-09 11:01:19
- * @LastEditTime: 2021-10-28 15:33:03
+ * @LastEditTime: 2021-10-29 10:46:31
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
  */
-let colors = ['#3572c5', '#589ab8', '#439e7e', '#a78214', '#995d2d', "#a54347", '#452b74', '#71686f']
+import * as echarts from "echarts";
+let colors = ['#CC7733', '#CC9D12','#54BF93','#63AECC','#3373CC', "#c1c487", '#46914a', '#3fbfc5']
+
 function createData(ds = []) {
   let arr = [];
   for (let i = 0; i < ds.length; i++) {
@@ -21,10 +23,30 @@ function createData(ds = []) {
           name: arr1[j].key,
           type: 'bar',
           stack: 'total',
-          barWidth: 24,
+          barWidth: 20,
           emphasis: {
             focus: 'series'
           },
+          itemStyle:{
+            normal:{
+                //柱体的颜色
+                //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+                color: function(params){
+                    console.log(params);              
+                    return new echarts.graphic.LinearGradient(0,0,0,1,[
+                                {
+                                    offset:0,
+                                    color:params.color
+                                },
+                                {
+                                    offset:1,
+                                    color:'#000'
+                                }
+                                ],false);
+                    }
+                }
+                                
+        },
           data: [arr1[j].value]
         }
         arr.push(obj)

src/views/Index/tailInsight/opt.js

@@ -3,11 +3,12 @@
 /*
  * @Author: your name
  * @Date: 2021-10-09 12:38:34
- * @LastEditTime: 2021-10-21 12:56:48
+ * @LastEditTime: 2021-10-29 10:17:04
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/tailInsight/opt.js
  */
+import * as echarts from "echarts";
 export default function createOpt(dy=[],ds=[]) {
     return {
         grid: {
@@ -60,7 +61,28 @@ export default function createOpt(dy=[],ds=[]) {
             {
                 type: 'bar',
                 barWidth: 24,
-                data: ds
+                data: ds,
+                itemStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            1,
+                            0,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: "#3373CC", // 100% 处的颜色#3373CC
+                                },
+                            ],
+                            false
+                        ),
+                    },
+                },
             }
         ]
     }