zx

src/views/SaleRank/ChineseCarSale/carBrandSale/index.vue

@@ -1,9 +1,15 @@
 <template>
     <div class="cbs-outter" v-loading="load">
-        <v-label-div :title="time">
+        <v-label-div-light v-if="getIsLight" :title="time">
+            <v-btn @click="moreBrand">更多品牌</v-btn>
+        </v-label-div-light>
+        <v-label-div v-else :title="time">
             <v-btn @click="moreBrand">更多品牌</v-btn>
         </v-label-div>
-        <div class="cbs-inner">
+        <div class="cbs-inner" v-if="getIsLight" style="background: #FFF">
+            <v-echarts :opt="opt2"></v-echarts>
+        </div>
+        <div class="cbs-inner" v-else>
             <v-echarts :opt="opt"></v-echarts>
         </div>
     </div>
@@ -12,6 +18,7 @@
 <script>
 import {getCheZhuBrandCount} from "@/api/SaleRank"
 import createOpt from "./opt"
+import createOptLight from "./optLight"
 export default {
     name: 'carBrandSale',
     data() {
@@ -21,7 +28,8 @@ export default {
             },
             time: '汽车品牌销量排行榜',
             load: false,
-            opt: {}
+            opt: {},
+            opt2: {},
         }
     },
     created() {
@@ -42,6 +50,7 @@ export default {
                     ds.push(ele.value)
                 })
                this.opt = createOpt(dx,ds);
+               this.opt2 = createOptLight(dx, ds)
                this.load = false
             })
         },

src/views/SaleRank/ChineseCarSale/carBrandSale/optLight.js

@@ -0,0 +1,111 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 09:12:13
+ * @LastEditTime: 2021-11-02 18:03:08
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
+ */
+import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+export default function createOptLight(dx,ds) {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "28px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+            formatter: function (params) {
+                var result = "";
+                var dotHtml =
+                    '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
+                params.forEach(function (item) {
+                    result += item.axisValue + "</br>" + dotHtml + item.data;
+                });
+                return result;
+            },
+        },
+        xAxis: {
+            type: "category",
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#000",
+                },
+            },
+            data: dx,
+        },
+        yAxis: {
+            type: "value",
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#000",
+                },
+            },
+            axisLabel: {
+                formatter: (value) => {
+                    let str = bigNumberTransform(value);
+                    return str;
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                name: "2001",
+                data: ds,
+                type: "bar",
+                barWidth: 24,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true, //开启显示
+                            position: 'top', //在上方显示
+                            textStyle: { //数值样式
+                                color: '#000',
+                                fontSize: 14
+                            }
+                        },
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            1,
+                            0,
+                            0,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "#78D3F866", // 0% 处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: "#78D3F8", // 100% 处的颜色#3373CC
+                                },
+                            ],
+                            false
+                        ),
+                    },
+                },
+            },
+        ],
+    }
+}

src/views/SaleRank/ChineseCarSale/carLevelSale/index.vue

@@ -1,9 +1,15 @@
 <template>
     <div class="cls-outter" v-loading="load">
-        <v-label-div :title="time">
+        <v-label-div-light v-if="getIsLight" :title="time">
+            <v-btn @click="moreInfo">更多信息</v-btn>
+        </v-label-div-light>
+        <v-label-div v-else :title="time">
             <v-btn @click="moreInfo">更多信息</v-btn>
         </v-label-div>
-        <div class="cls-inner">
+        <div class="cls-inner" v-if="getIsLight" style="background: #FFF">
+            <v-echarts :opt="opt2"></v-echarts>
+        </div>
+        <div class="cls-inner" v-else>
             <v-echarts :opt="opt"></v-echarts>
         </div>
     </div>
@@ -12,6 +18,7 @@
 <script>
 import {getCheZhuSpecCount} from "@/api/SaleRank"
 import createOpt from "./opt"
+import createOptLight from "./optLight"
 export default {
     name: 'carLevelSale',
     data() {
@@ -21,6 +28,7 @@ export default {
             },
             load: false,
             opt: {},
+            opt2: {},
             time: '各级别车型销量'
         }
     },
@@ -42,6 +50,7 @@ export default {
                     ds.push(ele.value)
                 })
                this.opt = createOpt(dx,ds);
+               this.opt2 = createOptLight(dx, ds)
                this.load = false
             })
         },

src/views/SaleRank/ChineseCarSale/carLevelSale/optLight.js

@@ -0,0 +1,111 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 09:12:13
+ * @LastEditTime: 2021-11-02 18:03:08
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
+ */
+import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+export default function createOptLight(dx,ds) {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "28px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+            formatter: function (params) {
+                var result = "";
+                var dotHtml =
+                    '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
+                params.forEach(function (item) {
+                    result += item.axisValue + "</br>" + dotHtml + item.data;
+                });
+                return result;
+            },
+        },
+        xAxis: {
+            type: "category",
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#000",
+                },
+            },
+            data: dx,
+        },
+        yAxis: {
+            type: "value",
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#000",
+                },
+            },
+            axisLabel: {
+                formatter: (value) => {
+                    let str = bigNumberTransform(value);
+                    return str;
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                name: "2001",
+                data: ds,
+                type: "bar",
+                barWidth: 24,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true, //开启显示
+                            position: 'top', //在上方显示
+                            textStyle: { //数值样式
+                                color: '#000',
+                                fontSize: 14
+                            }
+                        },
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            1,
+                            0,
+                            0,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "#54BF9366", // 0% 处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: "#54BF93", // 100% 处的颜色#3373CC
+                                },
+                            ],
+                            false
+                        ),
+                    },
+                },
+            },
+        ],
+    }
+}

src/views/SaleRank/ChineseCarSale/carSeriesSale/index.vue

@@ -1,9 +1,15 @@
 <template>
     <div class="css-outter">
-        <v-label-div :title="time">
+        <v-label-div-light v-if="getIsLight" :title="time">
+            <v-btn @click="moreSeries">更多车型</v-btn>
+        </v-label-div-light>
+        <v-label-div v-else :title="time">
             <v-btn @click="moreSeries">更多车型</v-btn>
         </v-label-div>
-        <div class="css-inner">
+        <div class="css-inner" v-if="getIsLight" style="background: #FFF">
+            <v-echarts :opt="opt2"></v-echarts>
+        </div>
+        <div class="css-inner" v-else>
             <v-echarts :opt="opt"></v-echarts>
         </div>
     </div>
@@ -12,6 +18,7 @@
 <script>
 import {getCheZhuCarSeriesCount} from "@/api/SaleRank"
 import createOpt from "./opt"
+import createOptLight from "./optLight"
 export default {
     name: 'carSeriesSale',
     data() {
@@ -21,6 +28,7 @@ export default {
             },
             load: false,
             opt: {},
+            opt2: {},
             time: '车型销量排行榜'
         }
     },
@@ -42,6 +50,7 @@ export default {
                     ds.push(ele.value)
                 })
                this.opt = createOpt(dx,ds);
+               this.opt2 = createOptLight(dx, ds);
                this.load = false
             })
         },

src/views/SaleRank/ChineseCarSale/carSeriesSale/optLight.js

@@ -0,0 +1,111 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 09:12:13
+ * @LastEditTime: 2021-11-02 18:03:08
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
+ */
+import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+export default function createOptLight(dx,ds) {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "28px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+            formatter: function (params) {
+                var result = "";
+                var dotHtml =
+                    '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
+                params.forEach(function (item) {
+                    result += item.axisValue + "</br>" + dotHtml + item.data;
+                });
+                return result;
+            },
+        },
+        xAxis: {
+            type: "category",
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#000",
+                },
+            },
+            data: dx,
+        },
+        yAxis: {
+            type: "value",
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#000",
+                },
+            },
+            axisLabel: {
+                formatter: (value) => {
+                    let str = bigNumberTransform(value);
+                    return str;
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                name: "2001",
+                data: ds,
+                type: "bar",
+                barWidth: 24,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true, //开启显示
+                            position: 'top', //在上方显示
+                            textStyle: { //数值样式
+                                color: '#000',
+                                fontSize: 14
+                            }
+                        },
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            1,
+                            0,
+                            0,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "#CC9D1266", // 0% 处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: "#CC9D12", // 100% 处的颜色#3373CC
+                                },
+                            ],
+                            false
+                        ),
+                    },
+                },
+            },
+        ],
+    }
+}