Merge branch 'dev'

src/api/SaleRankMarket/index.js

@@ -0,0 +1,210 @@
+import httpService from "@/request"
+
+// 全车型竞争关系图谱
+export function getSalesCompetitionALLList(params) {
+    let obj =  Object.assign({action: 'getSalesCompetitionALLList', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 竞争分析
+export function getSalesCompetitionList(params) {
+    let obj =  Object.assign({action: 'getSalesCompetitionList', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 竞争分析单个车型添加
+export function getSalesCompetitionAnalysis(params) {
+    let obj =  Object.assign({action: 'getSalesCompetitionAnalysis', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 品牌总销量TOP20
+export function getSalesBrandTop20(params) {
+    let obj =  Object.assign({action: 'getSalesBrandTop20', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 车型总销量TOP20
+export function getSalesCarseriesTop20(params) {
+    let obj =  Object.assign({action: 'getSalesCarseriesTop20', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 乘用车 - 总销量 - 狭义乘用车
+export function getSalesGrowthRatio(params) {
+    let obj =  Object.assign({action: 'getSalesGrowthRatio', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 乘用车 - 总销量 - 新能源市场
+export function getSalesGrowthRatioByFuel(params) {
+    let obj =  Object.assign({action: 'getSalesGrowthRatioByFuel', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 乘用车 - 能源类型
+export function getSalesEnergyTypes(params) {
+    let obj =  Object.assign({action: 'getSalesEnergyTypes', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 传统燃油 - 国别占比
+export function getSalesCountrysTypes(params) {
+    let obj =  Object.assign({action: 'getSalesCountrysTypes', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 传统燃油 - 车型类别 - 轿车同比
+export function getSalesSpecName1TypesBySedan(params) {
+    let obj =  Object.assign({action: 'getSalesSpecName1TypesBySedan', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 传统燃油 - 车型类别 - suv同比
+export function getSalesSpecName1TypesBySuv(params) {
+    let obj =  Object.assign({action: 'getSalesSpecName1TypesBySuv', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 传统燃油 - 车型类别 - mpv同比
+export function getSalesSpecName1TypesByMpv(params) {
+    let obj =  Object.assign({action: 'getSalesSpecName1TypesByMpv', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 传统燃油 - 车型类别 - mpv suv 轿车对比
+export function getSalesSpecName1Types(params) {
+    let obj =  Object.assign({action: 'getSalesSpecName1Types', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 传统燃油 - 车型类别 - 细分车型total
+export function getSalesSpecNameTypes(params) {
+    let obj =  Object.assign({action: 'getSalesSpecNameTypes', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 传统燃油 - 车型类别 - 细分车型SUV
+export function getSalesSpecNameTypesBySuv(params) {
+    let obj =  Object.assign({action: 'getSalesSpecNameTypesBySuv', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 传统燃油 - 车型类别 - 细分车型轿车
+export function getSalesSpecNameTypesBySedan(params) {
+    let obj =  Object.assign({action: 'getSalesSpecNameTypesBySedan', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 传统燃油 - 车型类别 - 细分车型MPV
+export function getSalesSpecNameTypesByMpv(params) {
+    let obj =  Object.assign({action: 'getSalesSpecNameTypesByMpv', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}

src/api/SaleRankMarketCommon/index.js

@@ -0,0 +1,74 @@
+import httpService from "@/request"
+
+// 下拉-国别
+export function getCountryS(params) {
+    let obj =  Object.assign({action: 'getCountryS'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 下拉-能源类型
+export function getEnergyS(params) {
+    let obj =  Object.assign({action: 'getEnergyS'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 下拉-价格区间
+export function getPriceRangeS(params) {
+    let obj =  Object.assign({action: 'getPriceRangeS'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 下拉-级别
+export function getSpecName1(params) {
+    let obj =  Object.assign({action: 'getSpecName1'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 下拉-排量
+export function getDisplacementS(params) {
+    let obj =  Object.assign({action: 'getDisplacementS'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 下拉-座位数
+export function getSeatS(params) {
+    let obj =  Object.assign({action: 'getSeatS'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}

src/api/home/index.js

@@ -21,9 +21,9 @@ export function getEventsListH(params) {
     })
 }
 
-// 首页_传播重点阵地
+// 首页_传播媒体TOP
-export function getWebsiteHome0528(params) {
+export function getHomeSourceTop(params) {
-    let obj =  Object.assign({action: 'getWebsiteHome0528',sType: 'Home'}, params)
+    let obj =  Object.assign({action: 'getHomeSourceTop',sType: 'Home'}, params)
     return httpService({
         url: `/api/v6.ashx`,
         method: 'post',

src/router/index.js

@@ -307,6 +307,59 @@ const router = [
                         path: 'seriesInfo', //车型销量-销量
                         component: resolve => require(['@/views/SaleRank/SeriesInfo/index.vue'], resolve),
                     },
+                    ////////////////////
+                    {
+                        path: 'marketComp', //市场竞争格局图
+                        component: resolve => require(['@/views/SaleRank/MarketComp/index.vue'], resolve),
+                    },
+                    {
+                        path: 'mscTotal', //中国乘用车市场销量分析 - 总销量
+                        component: resolve => require(['@/views/SaleRank/MarketSaleChina/mscTotal/index.vue'], resolve),
+                    },
+                    {
+                        path: 'mscEnergyType', //中国乘用车市场销量分析 - 能源类型
+                        component: resolve => require(['@/views/SaleRank/MarketSaleChina/mscEnergyType/index.vue'], resolve),
+                    },
+                    {
+                        path: 'mscCompChart', //中国乘用车市场销量分析 - 全车型竞争关系图谱
+                        component: resolve => require(['@/views/SaleRank/MarketSaleChina/mscCompChart/index.vue'], resolve),
+                    },
+                    {
+                        path: 'mstCountryPercent', //传统燃油车市场销量分析 - 国别占比
+                        component: resolve => require(['@/views/SaleRank/MarketSaleTraditional/mstCountryPercent/index.vue'], resolve),
+                    },
+                    {
+                        path: 'mstSeriesType', //传统燃油车市场销量分析 - 车型类别
+                        component: resolve => require(['@/views/SaleRank/MarketSaleTraditional/mstSeriesType/index.vue'], resolve),
+                    },
+                    {
+                        path: 'mstPrecisionType', //传统燃油车市场销量分析 - 细分车型
+                        component: resolve => require(['@/views/SaleRank/MarketSaleTraditional/mstPrecisionType/index.vue'], resolve),
+                    },
+                    {
+                        path: 'mstMainPrice', //传统燃油车市场销量分析 - 主销价格区间
+                        component: resolve => require(['@/views/SaleRank/MarketSaleTraditional/mstMainPrice/index.vue'], resolve),
+                    },
+                    {
+                        path: 'mstMPPercent', //传统燃油车市场销量分析 - 车型主销价格占比
+                        component: resolve => require(['@/views/SaleRank/MarketSaleTraditional/mstMPPercent/index.vue'], resolve),
+                    },
+                    {
+                        path: 'mneEnergyType', //新能源车市场销量分析 - 能源类型
+                        component: resolve => require(['@/views/SaleRank/MarketSaleNE/mneEnergyType/index.vue'], resolve),
+                    },
+                    {
+                        path: 'mneCountryPercent', //新能源车市场销量分析 - 国别占比
+                        component: resolve => require(['@/views/SaleRank/MarketSaleNE/mneCountryPercent/index.vue'], resolve),
+                    },
+                    {
+                        path: 'mnePrecisionType', //新能源车市场销量分析 - 细分车型
+                        component: resolve => require(['@/views/SaleRank/MarketSaleNE/mnePrecisionType/index.vue'], resolve),
+                    },
+                    {
+                        path: 'mneMainPrice', //新能源车市场销量分析 - 主销价格区间
+                        component: resolve => require(['@/views/SaleRank/MarketSaleNE/mneMainPrice/index.vue'], resolve),
+                    },
                 ]
             },
            {

src/styles/antd.less

@@ -457,4 +457,14 @@ li.ant-calendar-time-picker-select-option-selected {
   font-size: 0.875rem !important;
   line-height: 1.5 !important;
   word-wrap: break-word !important; 
+}
+
+//多选
+.ant-select-selection--multiple .ant-select-selection__choice {
+  color: #63AECC !important;
+  border: 0.0625rem solid #63AECC !important;
+  background-color: #1B4163 !important;
+}
+.ant-select-selection--multiple .ant-select-selection__choice__remove {
+  color: #63AECC !important;
 }

src/views/BrandInsight/keyCommunicationPositions/index.vue

@@ -3,12 +3,12 @@
  * @Date: 2021-10-08 16:37:30
  * @LastEditTime: 2021-12-16 09:43:56
  * @LastEditors: Please set LastEditors
- * @Description: 传播重点阵地
+ * @Description: 传播媒体TOP
  * @FilePath: /data-show/src/views/Index/key-communication-positions/index.vue
 -->
 <template>
     <div class="kcp-outter" v-loading="load">
-        <v-label-div title="传播重点阵地"></v-label-div>
+        <v-label-div title="传播媒体TOP"></v-label-div>
         <vue-scroll>
         <div class="kcp-inner">
             <div class="d1">

src/views/EventDEC/keyCommunicationPositions/index.vue

@@ -8,7 +8,7 @@
 -->
 <template>
     <div class="fhtd-outter" v-loading="load">
-        <v-label-div title="传播重点阵地" :eStyle="{ 'border-style': 'none' }" />
+        <v-label-div title="传播媒体TOP" :eStyle="{ 'border-style': 'none' }" />
         <div class="fhtd-inner">
             <div class="d1">
                 <v-ranking-fhtd :num="index + 1" :label="item.label" :val="item.val" :lineShow="index === 0 ?false : true" v-for="(item,index) in d1" :key="index"></v-ranking-fhtd>

src/views/EventDEC/keyCommunicationPositionsStoken/index.vue

@@ -8,7 +8,7 @@
 -->
 <template>
     <div class="fhtd-outter">
-        <v-label-div title="传播重点阵地" :showLine="false" :eStyle="{ 'border-style': 'none' }" />
+        <v-label-div title="传播媒体TOP" :showLine="false" :eStyle="{ 'border-style': 'none' }" />
         <div class="fhtd-inner">
             <div class="d1">
                 <v-ranking-fhtd :num="index + 1" :label="item.key" :val="item.value" :lineShow="index === 0 ?false : true" v-for="(item,index) in d1" :key="index"></v-ranking-fhtd>

src/views/Index/index.vue

@@ -60,7 +60,7 @@ export default {
     name: "index",
     components: {
         realTimeEvent, // 实时事件
-        keyCommunicationPositions, // 传播重点阵地
+        keyCommunicationPositions, // 传播媒体TOP
         salesRank, // 热销排行
         userPortrait, // 用户画像
         spreadTheSound, // 传播声量TOP10

src/views/Index/keyCommunicationPositions/index.vue

@@ -3,7 +3,7 @@
  * @Date: 2021-10-08 16:37:30
  * @LastEditTime: 2021-12-16 09:43:56
  * @LastEditors: Please set LastEditors
- * @Description: 传播重点阵地
+ * @Description: 传播媒体TOP
  * @FilePath: /data-show/src/views/Index/key-communication-positions/index.vue
 -->
 <template>
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { getWebsiteHome0528 } from "@/api/home";
+import { getHomeSourceTop } from "@/api/home";
 export default {
     name: "key-communication-positions",
     data() {
@@ -47,7 +47,7 @@ export default {
         // 获取数据
         getData() {
           this.load = true;
-            getWebsiteHome0528(this.getCommTime).then((res) => {
+            getHomeSourceTop(this.getCommTime).then((res) => {
                 let data = res.data;
                 let vals = [];
                 for (let key in data) {

src/views/Index/spreadTheSound/index.vue

@@ -61,7 +61,9 @@ export default {
             this.load = true;
             let obj = Object.assign({}, this.getCommTime, this.form);
             getHomeBrandSourceType0528(obj).then((res) => {
+                
                 let data = res.data;
+                console.log(data)
                 this.pdata = data;
                 this.handlerData(data);
                 this.load = false;

src/views/ModelInsight/mlKeyCommunicationPositions/index.vue

@@ -3,12 +3,12 @@
  * @Date: 2021-10-08 16:37:30
  * @LastEditTime: 2021-12-16 09:43:56
  * @LastEditors: Please set LastEditors
- * @Description: 传播重点阵地
+ * @Description: 传播媒体TOP
  * @FilePath: /data-show/src/views/Index/key-communication-positions/index.vue
 -->
 <template>
     <div class="kcp-outter" v-loading="load">
-        <v-label-div title="传播重点阵地"></v-label-div>
+        <v-label-div title="传播媒体TOP"></v-label-div>
         <vue-scroll>
         <div class="kcp-inner">
             <div class="d1">

src/views/SaleRank/MarketComp/index.vue

@@ -0,0 +1,243 @@
+<template>
+    <div class="mcomp-outter">
+        <v-label-div title="中国汽车市场竞争格局图"></v-label-div>
+        <div class="d2">
+            <a-form-model layout="inline">
+                <a-form-model-item label="数据筛选">
+                    <a-select style="width: 200px" mode="multiple" v-model="countries" placeholder="选择国别" allowClear>
+                        <a-select-option v-for="(item) in countryList" :value="item.key" :key="item.value">
+                            {{item.value}}
+                        </a-select-option>
+                    </a-select>
+                    <a-select style="width: 200px" mode="multiple" v-model="energies" placeholder="选择能源" allowClear>
+                        <a-select-option v-for="(item) in energyList" :value="item.key" :key="item.value">
+                            {{item.value}}
+                        </a-select-option>
+                    </a-select>
+                    <a-select style="width: 200px" mode="multiple" v-model="prices" placeholder="选择价格" allowClear>
+                        <a-select-option v-for="(item) in priceList" :value="item.key" :key="item.value">
+                            {{item.value}}
+                        </a-select-option>
+                    </a-select>
+                    <a-select style="width: 200px" mode="multiple" v-model="specs" placeholder="选择级别" allowClear>
+                        <a-select-option v-for="(item) in specList" :value="item.key" :key="item.value">
+                            {{item.value}}
+                        </a-select-option>
+                    </a-select>
+                    <a-select style="width: 200px" mode="multiple" v-model="displacements" placeholder="选择排量" allowClear>
+                        <a-select-option v-for="(item) in displacementList" :value="item.key" :key="item.value">
+                            {{item.value}}
+                        </a-select-option>
+                    </a-select>
+                    <a-select style="width: 200px" mode="multiple" v-model="seats" placeholder="选择座位数" allowClear>
+                        <a-select-option v-for="(item) in seatList" :value="item.key" :key="item.value">
+                            {{item.value}}
+                        </a-select-option>
+                    </a-select>
+                    <a-button style="margin-left: 16px" @click="getData">查询</a-button>
+                </a-form-model-item>
+            </a-form-model>
+        </div>
+        <div class="d2">
+            <a-form-model layout="inline">
+                <a-form-model-item label="选择日期">
+                    <a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
+                    <a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
+                </a-form-model-item>
+            </a-form-model>
+        </div>
+        <div class="d2">
+            <div>
+                <span v-for="(item, index) in seriesList" :key="index">
+                    <a-button style="margin-left: 12px" @click="onDelete(index)" type="primary">{{item}}<a-icon type="close" /></a-button>
+                </span>
+                <a-button style="margin-left: 12px" type="primary" icon="plus" @click="hanlderAddSeries">本品车型</a-button>
+            </div>
+        </div>
+        <iSaleModelChoose :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSaleModelChoose>
+        <div class="d3">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getCountryS,getPriceRangeS,getSpecName1,getSeatS,getDisplacementS,getEnergyS} from "@/api/SaleRankMarketCommon";
+import {getSalesCompetitionALLList,getSalesCompetitionList,getSalesCompetitionAnalysis} from "@/api/SaleRankMarket";
+import createOpt from "./opt"
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+export default {
+    name: 'CitySale',
+    data() {
+        return {
+            form: {
+                token: '',
+                sCountryS: '',
+                sEnergyS: '',
+                sPriceRangeS: '',
+                sDisplacementS: '',
+                sSeatS: '',
+                sSpecName1: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime:'',
+            },
+            //中间数组
+            countries: [],
+            energies: [],
+            prices: [],
+            specs: [],
+            specs2: [],
+            displacements: [],
+            seats: [],
+            selTime: ['',''],
+            seriesList: [],
+            //选项数据
+            countryList: [],
+            energyList: [],
+            priceList: [],
+            specList: [],
+            displacementList: [],
+            seatList: [],
+            //chart数据
+            opt: {},
+            totalData: [],
+            extraData: [],
+            //车型选择框
+            modelShow: false,
+            brand: '奥迪',
+            model: '',
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.getApi();
+    },
+    methods: {
+        getApi() {
+            getCountryS({token: this.getToken}).then(res => {
+                this.countryList = res.data
+            });
+            getEnergyS({token: this.getToken}).then(res => {
+                this.energyList = res.data
+            });
+            getPriceRangeS({token: this.getToken}).then(res => {
+                this.priceList = res.data
+            });
+            getSpecName1({token: this.getToken}).then(res => {
+                this.specList = res.data
+            });
+            getDisplacementS({token: this.getToken}).then(res => {
+                this.displacementList = res.data
+            });
+            getSeatS({token: this.getToken}).then(res => {
+                this.seatList = res.data
+            });
+            getCheZhuLatestTime({token: this.form.token}).then(res => {
+                this.selTime = [res.data, res.data];
+                this.getData()
+            })
+        },
+        getData() {
+            let obj = {
+                token: this.form.token,
+                sCountryS: this.countries.join(','),
+                sEnergyS: this.energies.join(','),
+                sPriceRangeS: this.prices.join(','),
+                sDisplacementS: this.displacements.join(','),
+                sSeatS: this.seats.join(','),
+                sSpecName1: this.specs.join(','),
+                sSpecName2: this.specs2.join(','),
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+            }
+            getSalesCompetitionALLList(obj).then(res => {
+                let data = res.data;
+                // [ [车长，售价，销量，车名，'total'],[] ]
+                let arr = [];
+                data.forEach(ele => {
+                    if(ele.CheChang * 1 != 0) {
+                        let item = [ele.CheChang * 1, ele.MainPrice, ele.Count, ele.Name, 'total'];
+                        // let item = [ele.Count, ele.MainPrice, ele.CheChang * 1, ele.Name, 'total'];
+                        arr.push(item);
+                    }
+                });
+                this.totalData = arr;
+                this.opt = createOpt(this.totalData, this.extraData);
+            })
+        },
+        //添加车型
+        hanlderAddSeries() {
+            this.modelShow = true;
+        },
+        handlerBrand(val) {
+            if(val) { this.seriesList.push(val[1].name) };
+            let obj = {
+                token: this.form.token,
+                sSeriesName: this.seriesList.join(','),
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+            };
+            getSalesCompetitionAnalysis(obj).then(res => {
+                let data = res.data;
+                let extraArr = [];
+                // [ [车长，售价，销量，车名，'extra'],[] ]
+                data.forEach(ele => {
+                    let item = [ele.CheChang * 1, ele.MainPrice, ele.Count, ele.Name, 'extra'];
+                    extraArr.push(item);
+                });
+                this.extraData = extraArr;
+                this.opt = createOpt(this.totalData, this.extraData);
+            })
+            this.modelShow = false;
+        },
+        //删除车型
+        onDelete(index) {
+            this.seriesList.splice(index,1);
+            if(this.seriesList.length == 0) {
+                this.extraData = [];
+                this.opt = createOpt(this.totalData, this.extraData);
+            } else {
+                let obj = {
+                    token: this.form.token,
+                    sSeriesName: this.seriesList.join(','),
+                    sTimeType: 4,
+                    sStartTime: this.selTime[0],
+                    sEndTime: this.selTime[1],
+                };
+                getSalesCompetitionAnalysis(obj).then(res => {
+                    let data = res.data;
+                    let extraArr = [];
+                    // [ [车长，售价，销量，车名，'extra'],[] ]
+                    data.forEach(ele => {
+                        let item = [ele.CheChang * 1, ele.MainPrice, ele.Count, ele.Name, 'extra'];
+                        extraArr.push(item);
+                    });
+                    this.extraData = extraArr;
+                    this.opt = createOpt(this.totalData, this.extraData);
+                })
+            }
+        },
+    }
+}
+</script>
+
+<style lang="less">
+.mcomp-outter {
+    width: 1552px;
+    // height: 460px;
+    border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 8px 16px 0px 16px;
+    }
+    .d3 {
+        // padding: 0px 16px 16px 16px;
+        width: 100%;
+        height: 1060px;
+    }
+}
+</style>

src/views/SaleRank/MarketComp/opt.js

@@ -0,0 +1,69 @@
+import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+export default function createOpt(data = [],extraData = []) {
+    return {
+        grid: {
+            left: '6%',
+            // top: '10%'
+        },
+          xAxis: {
+            splitLine: false,
+            scale: true,
+            axisLabel: {
+                color: '#FFF'
+            }
+          },
+          yAxis: {
+            splitLine: false,
+            scale: true,
+            axisLabel: {
+                formatter: function(value) {
+                    return value / 10000 + '万元'
+                },
+                color: '#FFF'
+            }
+          },
+          series: [
+            {
+              name: 'total',
+              data: data,
+              type: 'scatter',
+              symbolSize: function (data) {
+                return data[2] / 600;
+              },
+              label: {
+                  show: true,
+                  formatter: function (param) {
+                    return param.data[3];
+                  },
+                  color: '#FFF',
+                  fontSize: 12,
+                  fontWeight: 550,
+                  position: 'inside'
+              },
+              itemStyle: {
+                color: '#3373CC',
+              }
+            },
+            {
+                name: 'extra',
+                data: extraData,
+                type: 'scatter',
+                symbolSize: function (data) {
+                  return data[2] / 200;
+                },
+                label: {
+                    show: true,
+                    formatter: function (param) {
+                      return param.data[3];
+                    },
+                    color: '##FFF',
+                    position: 'inside'
+                },
+                itemStyle: {
+                  color: '#CC9D12',
+                }
+            },
+          ]
+    }
+}

src/views/SaleRank/MarketSaleChina/index.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>中国乘用车市场销量分析</div>
+</template>
+
+<script>
+export default {
+    name: 'MarketSaleChina',
+    data() {
+        return {
+            
+        }
+    }
+}
+</script>
+
+<style lang="less">
+    
+</style>

src/views/SaleRank/MarketSaleChina/mscCompChart/index.vue

@@ -0,0 +1,245 @@
+<template>
+    <div class="mcomp-outter">
+        <v-label-div title="全车型竞争关系图谱"></v-label-div>
+        <div class="d2">
+            <a-form-model layout="inline">
+                <a-form-model-item label="数据筛选">
+                    <a-select style="width: 200px" mode="multiple" v-model="countries" placeholder="选择国别" allowClear>
+                        <a-select-option v-for="(item) in countryList" :value="item.key" :key="item.value">
+                            {{item.value}}
+                        </a-select-option>
+                    </a-select>
+                    <a-select style="width: 200px" mode="multiple" v-model="energies" placeholder="选择能源" allowClear>
+                        <a-select-option v-for="(item) in energyList" :value="item.key" :key="item.value">
+                            {{item.value}}
+                        </a-select-option>
+                    </a-select>
+                    <a-select style="width: 200px" mode="multiple" v-model="prices" placeholder="选择价格" allowClear>
+                        <a-select-option v-for="(item) in priceList" :value="item.key" :key="item.value">
+                            {{item.value}}
+                        </a-select-option>
+                    </a-select>
+                    <a-select style="width: 200px" mode="multiple" v-model="specs" placeholder="选择级别" allowClear>
+                        <a-select-option v-for="(item) in specList" :value="item.key" :key="item.value">
+                            {{item.value}}
+                        </a-select-option>
+                    </a-select>
+                    <a-select style="width: 200px" mode="multiple" v-model="displacements" placeholder="选择排量" allowClear>
+                        <a-select-option v-for="(item) in displacementList" :value="item.key" :key="item.value">
+                            {{item.value}}
+                        </a-select-option>
+                    </a-select>
+                    <a-select style="width: 200px" mode="multiple" v-model="seats" placeholder="选择座位数" allowClear>
+                        <a-select-option v-for="(item) in seatList" :value="item.key" :key="item.value">
+                            {{item.value}}
+                        </a-select-option>
+                    </a-select>
+                    <a-button style="margin-left: 16px" @click="getData">查询</a-button>
+                </a-form-model-item>
+            </a-form-model>
+        </div>
+        <div class="d2">
+            <a-form-model layout="inline">
+                <a-form-model-item label="选择日期">
+                    <a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
+                    <a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
+                </a-form-model-item>
+            </a-form-model>
+        </div>
+        <div class="d2">
+            <div>
+                <span v-for="(item, index) in seriesList" :key="index">
+                    <a-button style="margin-left: 12px" @click="onDelete(index)" type="primary">{{item}}<a-icon type="close" /></a-button>
+                </span>
+                <a-button style="margin-left: 12px" type="primary" icon="plus" @click="hanlderAddSeries">本品车型</a-button>
+            </div>
+        </div>
+        <iSaleModelChoose :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSaleModelChoose>
+        <div class="d3">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getCountryS,getPriceRangeS,getSpecName1,getSeatS,getDisplacementS,getEnergyS} from "@/api/SaleRankMarketCommon";
+import {getSalesCompetitionALLList,getSalesCompetitionList,getSalesCompetitionAnalysis} from "@/api/SaleRankMarket";
+import createOpt from "./opt"
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+export default {
+    name: 'CitySale',
+    data() {
+        return {
+            form: {
+                token: '',
+                sCountryS: '',
+                sEnergyS: '',
+                sPriceRangeS: '',
+                sDisplacementS: '',
+                sSerieS: '奥迪A3', ////
+                sSeatS: '', 
+                sSpecName1: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime:'',
+            },
+            //中间数组
+            countries: [],
+            energies: [],
+            prices: [],
+            specs: [],
+            specs2: [],
+            series: [], //
+            displacements: [],
+            seats: [],
+            selTime: ['',''],
+            seriesList: [],
+            //选项数据
+            countryList: [],
+            energyList: [],
+            priceList: [],
+            specList: [],
+            displacementList: [],
+            seatList: [],
+            //chart数据
+            opt: {},
+            totalData: [],
+            extraData: [],
+            //车型选择框
+            modelShow: false,
+            brand: '奥迪',
+            model: '',
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.getApi();
+    },
+    methods: {
+        getApi() {
+            getCountryS({token: this.getToken}).then(res => {
+                this.countryList = res.data
+            });
+            getEnergyS({token: this.getToken}).then(res => {
+                this.energyList = res.data
+            });
+            getPriceRangeS({token: this.getToken}).then(res => {
+                this.priceList = res.data
+            });
+            getSpecName1({token: this.getToken}).then(res => {
+                this.specList = res.data
+            });
+            getDisplacementS({token: this.getToken}).then(res => {
+                this.displacementList = res.data
+            });
+            getSeatS({token: this.getToken}).then(res => {
+                this.seatList = res.data
+            });
+            getCheZhuLatestTime({token: this.form.token}).then(res => {
+                this.selTime = [res.data, res.data];
+                this.getData()
+            })
+        },
+        getData() {
+            let obj = {
+                token: this.form.token,
+                sCountryS: this.countries.join(','),
+                sEnergyS: this.energies.join(','),
+                sPriceRangeS: this.prices.join(','),
+                sDisplacementS: this.displacements.join(','),
+                sSeatS: this.seats.join(','),
+                sSpecName1: this.specs.join(','),
+                sSpecName2: this.specs2.join(','),
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+            }
+            getSalesCompetitionList(obj).then(res => {
+                let data = res.data;
+                // [ [车长，售价，销量，车名，'total'],[] ]
+                let arr = [];
+                data.forEach(ele => {
+                    if(ele.CheChang * 1 != 0) {
+                        let item = [ele.CheChang * 1, ele.MainPrice, ele.Count, ele.Name, 'total'];
+                        // let item = [ele.Count, ele.MainPrice, ele.CheChang * 1, ele.Name, 'total'];
+                        arr.push(item);
+                    }
+                });
+                this.totalData = arr;
+                this.opt = createOpt(this.totalData, this.extraData);
+            })
+        },
+        //添加车型
+        hanlderAddSeries() {
+            this.modelShow = true;
+        },
+        handlerBrand(val) {
+            if(val) { this.seriesList.push(val[1].name) };
+            let obj = {
+                token: this.form.token,
+                sSeriesName: this.seriesList.join(','),
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+            };
+            getSalesCompetitionAnalysis(obj).then(res => {
+                let data = res.data;
+                let extraArr = [];
+                // [ [车长，售价，销量，车名，'extra'],[] ]
+                data.forEach(ele => {
+                    let item = [ele.CheChang * 1, ele.MainPrice, ele.Count, ele.Name, 'extra'];
+                    extraArr.push(item);
+                });
+                this.extraData = extraArr;
+                this.opt = createOpt(this.totalData, this.extraData);
+            })
+            this.modelShow = false;
+        },
+        //删除车型
+        onDelete(index) {
+            this.seriesList.splice(index,1);
+            if(this.seriesList.length == 0) {
+                this.extraData = [];
+                this.opt = createOpt(this.totalData, this.extraData);
+            } else {
+                let obj = {
+                    token: this.form.token,
+                    sSeriesName: this.seriesList.join(','),
+                    sTimeType: 4,
+                    sStartTime: this.selTime[0],
+                    sEndTime: this.selTime[1],
+                };
+                getSalesCompetitionAnalysis(obj).then(res => {
+                    let data = res.data;
+                    let extraArr = [];
+                    // [ [车长，售价，销量，车名，'extra'],[] ]
+                    data.forEach(ele => {
+                        let item = [ele.CheChang * 1, ele.MainPrice, ele.Count, ele.Name, 'extra'];
+                        extraArr.push(item);
+                    });
+                    this.extraData = extraArr;
+                    this.opt = createOpt(this.totalData, this.extraData);
+                })
+            }
+        },
+    }
+}
+</script>
+
+<style lang="less">
+.mcomp-outter {
+    width: 1552px;
+    // height: 460px;
+    border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 8px 16px 0px 16px;
+    }
+    .d3 {
+        // padding: 0px 16px 16px 16px;
+        width: 100%;
+        height: 1060px;
+    }
+}
+</style>

src/views/SaleRank/MarketSaleChina/mscCompChart/opt.js

@@ -0,0 +1,69 @@
+import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+export default function createOpt(data = [],extraData = []) {
+    return {
+        grid: {
+            left: '6%',
+            // top: '10%'
+        },
+          xAxis: {
+            splitLine: false,
+            scale: true,
+            axisLabel: {
+                color: '#FFF'
+            }
+          },
+          yAxis: {
+            splitLine: false,
+            scale: true,
+            axisLabel: {
+                formatter: function(value) {
+                    return value / 10000 + '万元'
+                },
+                color: '#FFF'
+            }
+          },
+          series: [
+            {
+              name: 'total',
+              data: data,
+              type: 'scatter',
+              symbolSize: function (data) {
+                return data[2] / 600;
+              },
+              label: {
+                  show: true,
+                  formatter: function (param) {
+                    return param.data[3];
+                  },
+                  color: '#FFF',
+                  fontSize: 12,
+                  fontWeight: 550,
+                  position: 'inside'
+              },
+              itemStyle: {
+                color: '#3373CC',
+              }
+            },
+            {
+                name: 'extra',
+                data: extraData,
+                type: 'scatter',
+                symbolSize: function (data) {
+                  return data[2] / 200;
+                },
+                label: {
+                    show: true,
+                    formatter: function (param) {
+                      return param.data[3];
+                    },
+                    color: '##FFF',
+                    position: 'inside'
+                },
+                itemStyle: {
+                  color: '#CC9D12',
+                }
+            },
+          ]
+    }
+}

src/views/SaleRank/MarketSaleChina/mscEnergyType/index.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="mscet-outter">
+        <v-label-div title="能源类型占比分布"></v-label-div>
+        <div class="d2">
+            <a-form-model layout="inline">
+                <a-form-model-item label="选择日期">
+                    <a-month-picker @change="getData" style="width: 146px" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
+                    <a-month-picker @change="getData" style="width: 146px" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
+                </a-form-model-item>
+            </a-form-model>
+        </div>
+        <div class="d3">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getSalesEnergyTypes} from "@/api/SaleRankMarket";
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+import createOpt from './opt'
+export default {
+    name: 'totalTop20',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            selTime: ['',''],
+            opt: {},
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        getCheZhuLatestTime({token: this.form.token}).then(res => {
+            var dt = new Date(res.data)
+            var newDt = new Date( (dt.setMonth(dt.getMonth() - 11)) ).toISOString();
+            this.selTime = [newDt.slice(0,7), res.data];
+            this.getData()
+        })
+    },
+    methods: {
+        getData() {
+            let obj = {
+                token: this.form.token,
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+            }
+            getSalesEnergyTypes(obj).then(res => {
+                let data = res.data
+                let dx = [];
+                let ds = [];
+                data.forEach((ele) => {
+                    let key = ele.Time;
+                    let value = ele.Data;
+                    dx.push(key);
+                    ds.push(value);
+                });
+                this.opt = createOpt(dx, ds);
+            })
+        },
+    }
+}
+</script>
+
+<style lang="less">
+.mscet-outter {
+    width: 1552px;
+    height: 760px;
+    border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 8px 16px 0px 16px;
+    }
+    .d3 {
+        // padding: 0px 16px 16px 16px;
+        width: 100%;
+        height: calc(100% - 112px);
+    }
+}
+</style>

src/views/SaleRank/MarketSaleChina/mscEnergyType/opt.js

@@ -0,0 +1,146 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 11:01:19
+ * @LastEditTime: 2021-12-23 16:37:35
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
+ */
+import * as echarts from "echarts";
+import {doStr} from "@/utils/gol/dataTool"
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+let colors = ['#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA'
+,'#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA']
+function createData(ds = []) {
+  let arr = [];
+  for (let i = 0; i < ds.length; i++) {
+    let arr1 = ds[i];
+    for (let j = 0; j < arr1.length; j++) {
+      let n = arr.findIndex(ele => {
+        return ele.name === arr1[j].Key;
+      })
+      if (n === -1) {
+        let obj =
+        {
+          name: arr1[j].Key,
+          type: 'bar',
+          stack: 'total',
+          barWidth: 48,
+          barGap: "-100%",
+          emphasis: {
+            focus: 'series'
+          },
+          label: {
+            show: true,
+            position: 'inside',
+            color: '#FFF',
+            fontWeight: 600,
+            formatter: (res) => {
+              return res.data + '%'
+            }
+          },
+          itemStyle: {
+            normal: {
+              //柱体的颜色
+              //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+              color: function () {
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: colors[j]
+                  },
+                  {
+                    offset: 1,
+                    color: colors[j]
+                  }
+                ], false);
+              }
+            }
+
+          },
+          data: [arr1[j].Value]
+        }
+        arr.push(obj)
+      } else {
+        arr[n].data.push(arr1[j].Value)
+      }
+    }
+  }
+  return arr;
+}
+export default function createOpt(dx = [], ds = []) {
+  const data = createData(ds);
+  return {
+    grid: {
+      left: 10,
+      right: 10,
+      bottom: 10,
+      containLabel: true
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "#08182F",
+      color: "#fff",
+      borderColor: "#3373CC",
+      textStyle: {
+        color: "#fff", //设置文字颜色
+      },
+      extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+    },
+    color: colors,
+    legend: {
+      textStyle: { //图例文字的样式
+        color: '#fff',
+        fontSize: 10
+      },
+      y: 10,
+      x: 10,
+      itemWidth: 12,
+      itemHeight: 12,
+      borderRadius: 1, //圆角半径
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel :{  
+          interval:0, 
+          formatter: (value) => {
+              let res = doStr(value, 8);
+              return res
+          }
+      }, 
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      data: dx
+    },
+    yAxis: {
+      type: 'value',
+      max: 100,
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      axisLabel: {
+        formatter: (value) => {
+          return value + '%'
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed", // y轴分割线类型
+          color: "#012b4b",
+        },
+      },
+    },
+    series: data
+  }
+
+}

src/views/SaleRank/MarketSaleChina/mscTotal/index.vue

@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <totalTop20></totalTop20>
+        <totalPassengerVehicle></totalPassengerVehicle>
+        <totalTraditionCar></totalTraditionCar>
+    </div>
+</template>
+
+<script>
+import totalTop20 from "./totalTop20"
+import totalPassengerVehicle from "./totalPassengerVehicle"
+import totalTraditionCar from "./totalTraditionCar"
+export default {
+    components: {
+        totalTop20,
+        totalPassengerVehicle,
+        totalTraditionCar
+    },
+    name: 'mscTotal',
+    data() {
+        return {
+            
+        }
+    }
+}
+</script>
+
+<style lang="less">
+    
+</style>

src/views/SaleRank/MarketSaleChina/mscTotal/totalPassengerVehicle/index.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="tpsv-outter">
+        <v-label-div title="狭义乘用车"></v-label-div>
+        <div class="d3">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from './opt'
+import {getSalesGrowthRatio} from "@/api/SaleRankMarket";
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+export default {
+    name: 'totalPassengerVehicle',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            opt: {},
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        getCheZhuLatestTime({token: this.form.token}).then(res => {
+            this.form.sStartTime = '2021-01';
+            this.form.sEndTime = res.data;
+            this.getData()
+        })
+    },
+    methods: {
+        getData() {
+            getSalesGrowthRatio(this.form).then(res => {
+                let data = res.data;
+                let firstYearData = []; //0 - 11 count
+                let secondYearData = []; //12+ count
+                let percent = []; //12+ YearOnYearGrowth
+                for(let i = 0;i<data.length;i++) {
+                    if(i < 12) {
+                        firstYearData.push(data[i].Count)
+                    } else {
+                        secondYearData.push(data[i].Count);
+                        percent.push(data[i].YearOnYearGrowth)
+                    }
+                };
+                this.opt = createOpt(firstYearData,secondYearData,percent)
+            })
+        },
+    }
+}
+</script>
+
+<style lang="less">
+.tpsv-outter {
+    width: 1552px;
+    height: 492px;
+    margin-top: 16px;
+    border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 8px 16px 0px 16px;
+    }
+    .d3 {
+        // padding: 0px 16px 16px 16px;
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/SaleRank/MarketSaleChina/mscTotal/totalPassengerVehicle/opt.js

@@ -0,0 +1,156 @@
+
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+import * as echarts from "echarts";
+export default function createOpt(firstData = [], secondData = [], percent = []) {
+    return {
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            axisPointer: {
+                type: 'cross',
+                crossStyle: {
+                  color: '#999'
+                }
+            },
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+          },
+          grid: {
+            left: 10,
+            right: 10,
+            bottom: 10,
+            containLabel: true
+          },
+          legend: {
+              textStyle: { //图例文字的样式
+                color: '#fff',
+                fontSize: 10
+              },
+              y: 10,
+              x: 10,
+              itemWidth: 12,
+              itemHeight: 12,
+              borderRadius: 1, //圆角半径
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
+              axisPointer: {
+                type: 'shadow'
+              },
+              axisLabel: {
+                color: '#FFF'
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              axisLabel: {
+                formatter: (value) => {
+                    return bigNumberTransform(value);
+                },
+                color: '#FFF'
+              },
+              splitLine:{
+                show:false
+              },
+            },
+            {
+              type: 'value',
+              axisLabel: {
+                formatter: '{value}%',
+                color: '#FFF'
+              },
+              splitLine:{
+                show:false
+              },
+            }
+          ],
+          series: [
+            {
+              name: '2021',
+              type: 'bar',
+              barWidth: 20,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value;
+                }
+              },
+              itemStyle: {
+                normal: {
+                  //柱体的颜色
+                  //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+                  color: function () {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: '#3373CC'
+                      },
+                      {
+                        offset: 1,
+                        color: '#3E8CF940'
+                      }
+                    ], false);
+                  }
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                color: '#FFF'
+              },
+              data: firstData
+            },
+            {
+              name: '2022',
+              type: 'bar',
+              barWidth: 20,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value;
+                }
+              },
+              itemStyle: {
+                normal: {
+                  //柱体的颜色
+                  //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+                  color: function () {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: '#54BF93'
+                      },
+                      {
+                        offset: 1,
+                        color: '#61DDAA30'
+                      }
+                    ], false);
+                  }
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                color: '#FFF'
+              },
+              data: secondData
+            },
+            {
+              name: '同比',
+              type: 'line',
+              yAxisIndex: 1,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value+'%';
+                }
+              },
+              data: percent
+            }
+          ]
+    }
+}

src/views/SaleRank/MarketSaleChina/mscTotal/totalTop20/index.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="tp20-outter">
+        <v-label-div title="品牌销量排行榜TOP20">
+            <v-tab-group :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerType"></v-tab-group>
+        </v-label-div>
+        <div class="d2">
+            <a-form-model layout="inline">
+                <a-form-model-item label="选择日期">
+                    <a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
+                    <a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
+                </a-form-model-item>
+            </a-form-model>
+        </div>
+        <div class="d3">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getSalesBrandTop20, getSalesCarseriesTop20} from "@/api/SaleRankMarket";
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+import createOpt from './opt'
+export default {
+    name: 'totalTop20',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            tValue: 0, //0品牌 1车型
+            btnTimes: ['品牌','车型'],
+            selTime: ['',''],
+            opt: {},
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        getCheZhuLatestTime({token: this.form.token}).then(res => {
+            var dt = new Date(res.data)
+            var newDt = new Date( (dt.setMonth(dt.getMonth() - 11)) ).toISOString();
+            this.selTime = [newDt.slice(0,7), res.data];
+            this.getData()
+        })
+    },
+    methods: {
+        getData() {
+            let obj = {
+                token: this.form.token,
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+            }
+            if(this.tValue == 0) {
+                getSalesBrandTop20(obj).then(res => {
+                    let data = res.data
+                    let dx = [];
+                    let ds = [];
+                    data.forEach((ele) => {
+                        let key = ele.Time;
+                        let value = ele.Data;
+                        dx.push(key);
+                        ds.push(value);
+                    });
+                    this.opt = createOpt(dx, ds);
+                })
+            } else {
+                getSalesCarseriesTop20(obj).then(res => {
+                    let data = res.data
+                    let dx = [];
+                    let ds = [];
+                    data.forEach((ele) => {
+                        let key = ele.Time;
+                        let value = ele.Data;
+                        dx.push(key);
+                        ds.push(value);
+                    });
+                    this.opt = createOpt(dx, ds);
+                })
+            }
+        },
+        handlerType(index) {
+            this.tValue = index;
+            this.getData();
+        },
+    }
+}
+</script>
+
+<style lang="less">
+.tp20-outter {
+    width: 1552px;
+    height: 965px;
+    border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 8px 16px 0px 16px;
+    }
+    .d3 {
+        // padding: 0px 16px 16px 16px;
+        width: 100%;
+        height: calc(100% - 112px);
+    }
+}
+</style>

src/views/SaleRank/MarketSaleChina/mscTotal/totalTop20/opt.js

@@ -0,0 +1,138 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 11:01:19
+ * @LastEditTime: 2021-12-23 16:37:35
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
+ */
+import * as echarts from "echarts";
+import {doStr} from "@/utils/gol/dataTool"
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+// let colors = ['rgba(84,111,197,1)', 'rgba(145,203,116,1)', 'rgba(90,203,156,1)', 'rgba(248,200,87,1)', 'rgba(237,101,101,1)', "rgba(114,191,222,1)", 'rgba(58,162,114,1)', 'rgba(251,131,81,1)']
+// let colors2 = ['rgba(84,111,197,0.6)', 'rgba(145,203,116,0.6)', 'rgba(90,203,156,0.6)', 'rgba(248,200,87,0.6)', 'rgba(237,101,101,0.6)', "rgba(114,191,222,0.6)", 'rgba(58,162,114,0.6)', 'rgba(251,131,81,0.6)']
+let colors = ['#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA']
+function createData(ds = []) {
+  let arr = [];
+  for (let i = 0; i < ds.length; i++) {
+    let arr1 = ds[i];
+    for (let j = 0; j < arr1.length; j++) {
+      let n = arr.findIndex(ele => {
+        return ele.name === arr1[j].Key;
+      })
+      if (n === -1) {
+        let obj =
+        {
+          name: arr1[j].Key,
+          type: 'bar',
+          stack: 'total',
+          barWidth: 18,
+          barGap: "-100%",
+          emphasis: {
+            focus: 'series'
+          },
+          itemStyle: {
+            normal: {
+              //柱体的颜色
+              //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+              color: function () {
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: colors[j]
+                  },
+                  {
+                    offset: 1,
+                    color: colors[j]
+                  }
+                ], false);
+              }
+            }
+
+          },
+          data: [arr1[j].Value]
+        }
+        arr.push(obj)
+      } else {
+        arr[n].data.push(arr1[j].Value)
+      }
+    }
+  }
+  return arr;
+}
+export default function createOpt(dx = [], ds = []) {
+  const data = createData(ds);
+  return {
+    grid: {
+      left: 10,
+      right: 10,
+      bottom: 10,
+      containLabel: true
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "#08182F",
+      color: "#fff",
+      borderColor: "#3373CC",
+      textStyle: {
+        color: "#fff", //设置文字颜色
+      },
+      extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+    },
+    color: colors,
+    legend: {
+      textStyle: { //图例文字的样式
+        color: '#fff',
+        fontSize: 10
+      },
+      y: 10,
+      x: 10,
+      itemWidth: 12,
+      itemHeight: 12,
+      borderRadius: 1, //圆角半径
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel :{  
+          interval:0, 
+          formatter: (value) => {
+              let res = doStr(value, 8);
+              return res
+          }
+      }, 
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      data: dx
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      axisLabel: {
+        formatter: (value) => {
+          let str = bigNumberTransform(value);
+          return str;
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed", // y轴分割线类型
+          color: "#012b4b",
+        },
+      },
+    },
+    series: data
+  }
+
+}

src/views/SaleRank/MarketSaleChina/mscTotal/totalTraditionCar/index.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="ttc-outter">
+        <v-label-div title="传统燃油车市场"></v-label-div>
+        <div class="d3">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from './opt'
+import {getSalesGrowthRatioByFuel} from "@/api/SaleRankMarket";
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+export default {
+    name: 'totalPassengerVehicle',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            opt: {},
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        getCheZhuLatestTime({token: this.form.token}).then(res => {
+            this.form.sStartTime = '2021-01';
+            this.form.sEndTime = res.data;
+            this.getData()
+        })
+    },
+    methods: {
+        getData() {
+            getSalesGrowthRatioByFuel(this.form).then(res => {
+                console.log(res);
+                let data = res.data;
+                let firstYearData = []; //0 - 11 count
+                let secondYearData = []; //12+ count
+                let percent = []; //12+ YearOnYearGrowth
+                for(let i = 0;i<data.length;i++) {
+                    if(i < 12) {
+                        firstYearData.push(data[i].Count)
+                    } else {
+                        secondYearData.push(data[i].Count);
+                        percent.push(data[i].YearOnYearGrowth)
+                    }
+                };
+                this.opt = createOpt(firstYearData,secondYearData,percent)
+            })
+        },
+    }
+}
+</script>
+
+<style lang="less">
+.ttc-outter {
+    width: 1552px;
+    height: 492px;
+    margin-top: 16px;
+    border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 8px 16px 0px 16px;
+    }
+    .d3 {
+        // padding: 0px 16px 16px 16px;
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/SaleRank/MarketSaleChina/mscTotal/totalTraditionCar/opt.js

@@ -0,0 +1,156 @@
+
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+import * as echarts from "echarts";
+export default function createOpt(firstData = [], secondData = [], percent = []) {
+    return {
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            axisPointer: {
+                type: 'cross',
+                crossStyle: {
+                  color: '#999'
+                }
+            },
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+          },
+          grid: {
+            left: 10,
+            right: 10,
+            bottom: 10,
+            containLabel: true
+          },
+          legend: {
+              textStyle: { //图例文字的样式
+                color: '#fff',
+                fontSize: 10
+              },
+              y: 10,
+              x: 10,
+              itemWidth: 12,
+              itemHeight: 12,
+              borderRadius: 1, //圆角半径
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
+              axisPointer: {
+                type: 'shadow'
+              },
+              axisLabel: {
+                color: '#FFF'
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              axisLabel: {
+                formatter: (value) => {
+                    return bigNumberTransform(value);
+                },
+                color: '#FFF'
+              },
+              splitLine:{
+                show:false
+              },
+            },
+            {
+              type: 'value',
+              axisLabel: {
+                formatter: '{value}%',
+                color: '#FFF'
+              },
+              splitLine:{
+                show:false
+              },
+            }
+          ],
+          series: [
+            {
+              name: '2021',
+              type: 'bar',
+              barWidth: 20,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value;
+                }
+              },
+              itemStyle: {
+                normal: {
+                  //柱体的颜色
+                  //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+                  color: function () {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: '#3373CC'
+                      },
+                      {
+                        offset: 1,
+                        color: '#3E8CF940'
+                      }
+                    ], false);
+                  }
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                color: '#FFF'
+              },
+              data: firstData
+            },
+            {
+              name: '2022',
+              type: 'bar',
+              barWidth: 20,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value;
+                }
+              },
+              itemStyle: {
+                normal: {
+                  //柱体的颜色
+                  //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+                  color: function () {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: '#54BF93'
+                      },
+                      {
+                        offset: 1,
+                        color: '#61DDAA30'
+                      }
+                    ], false);
+                  }
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                color: '#FFF'
+              },
+              data: secondData
+            },
+            {
+              name: '同比',
+              type: 'line',
+              yAxisIndex: 1,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value+'%';
+                }
+              },
+              data: percent
+            }
+          ]
+    }
+}

src/views/SaleRank/MarketSaleNE/index.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>新能源车市场销量分析</div>
+</template>
+
+<script>
+export default {
+    name: 'MarketSaleNE',
+    data() {
+        return {
+            
+        }
+    }
+}
+</script>
+
+<style lang="less">
+    
+</style>

src/views/SaleRank/MarketSaleNE/mneCountryPercent/index.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>新能源车市场销量分析-国别占比</div>
+</template>
+
+<script>
+export default {
+    name: 'mneCountryPercent',
+    data() {
+        return {
+            
+        }
+    }
+}
+</script>
+
+<style lang="less">
+    
+</style>

src/views/SaleRank/MarketSaleNE/mneEnergyType/index.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>新能源车市场销量分析-能源类型</div>
+</template>
+
+<script>
+export default {
+    name: 'mneEnergyType',
+    data() {
+        return {
+            
+        }
+    }
+}
+</script>
+
+<style lang="less">
+    
+</style>

src/views/SaleRank/MarketSaleNE/mneMainPrice/index.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>新能源车市场销量分析-主销价格区间</div>
+</template>
+
+<script>
+export default {
+    name: 'mneMainPrice',
+    data() {
+        return {
+            
+        }
+    }
+}
+</script>
+
+<style lang="less">
+    
+</style>

src/views/SaleRank/MarketSaleNE/mnePrecisionType/index.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>新能源车市场销量分析-细分车型</div>
+</template>
+
+<script>
+export default {
+    name: 'mnePrecisionType',
+    data() {
+        return {
+            
+        }
+    }
+}
+</script>
+
+<style lang="less">
+    
+</style>

src/views/SaleRank/MarketSaleTraditional/index.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>传统燃油车市场销量分析</div>
+</template>
+
+<script>
+export default {
+    name: 'MarketSaleTraditional',
+    data() {
+        return {
+            
+        }
+    }
+}
+</script>
+
+<style lang="less">
+    
+</style>

src/views/SaleRank/MarketSaleTraditional/mstCountryPercent/index.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="mscet-outter">
+        <v-label-div title="国别占比分布"></v-label-div>
+        <div class="d2">
+            <a-form-model layout="inline">
+                <a-form-model-item label="选择日期">
+                    <a-month-picker @change="getData" style="width: 146px" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
+                    <a-month-picker @change="getData" style="width: 146px" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
+                </a-form-model-item>
+            </a-form-model>
+        </div>
+        <div class="d3">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getSalesCountrysTypes} from "@/api/SaleRankMarket";
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+import createOpt from './opt'
+export default {
+    name: 'totalTop20',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            selTime: ['',''],
+            opt: {},
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        getCheZhuLatestTime({token: this.form.token}).then(res => {
+            var dt = new Date(res.data)
+            var newDt = new Date( (dt.setMonth(dt.getMonth() - 11)) ).toISOString();
+            this.selTime = [newDt.slice(0,7), res.data];
+            this.getData()
+        })
+    },
+    methods: {
+        getData() {
+            let obj = {
+                token: this.form.token,
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+            }
+            getSalesCountrysTypes(obj).then(res => {
+                let newData = [];
+                for(let i=0;i<res.data.length;i++) {
+                    let arr = [];
+                    let total = 0;
+                    res.data[i].Data.forEach(ele => {
+                        total = ele.Value*1 + total;
+                    });
+                    res.data[i].Data.forEach(ele => {
+                        let o = {
+                            Key: ele.Key,
+                            Value: (ele.Value*100/total).toFixed(2)
+                        };
+                        arr.push(o)
+                    });
+
+                    let obj = {
+                        Time: res.data[i].Time,
+                        Data: arr
+                    };
+                    newData.push(obj)
+                }
+                let dx = [];
+                let ds = [];
+                newData.forEach((ele) => {
+                    let key = ele.Time;
+                    let value = ele.Data;
+                    dx.push(key);
+                    ds.push(value);
+                });
+                this.opt = createOpt(dx, ds);
+            })
+        },
+    }
+}
+</script>
+
+<style lang="less">
+.mscet-outter {
+    width: 1552px;
+    height: 760px;
+    border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 8px 16px 0px 16px;
+    }
+    .d3 {
+        // padding: 0px 16px 16px 16px;
+        width: 100%;
+        height: calc(100% - 112px);
+    }
+}
+</style>

src/views/SaleRank/MarketSaleTraditional/mstCountryPercent/opt.js

@@ -0,0 +1,146 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 11:01:19
+ * @LastEditTime: 2021-12-23 16:37:35
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
+ */
+import * as echarts from "echarts";
+import {doStr} from "@/utils/gol/dataTool"
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+let colors = ['#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA'
+,'#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA']
+function createData(ds = []) {
+  let arr = [];
+  for (let i = 0; i < ds.length; i++) {
+    let arr1 = ds[i];
+    for (let j = 0; j < arr1.length; j++) {
+      let n = arr.findIndex(ele => {
+        return ele.name === arr1[j].Key;
+      })
+      if (n === -1) {
+        let obj =
+        {
+          name: arr1[j].Key,
+          type: 'bar',
+          stack: 'total',
+          barWidth: 48,
+          barGap: "-100%",
+          emphasis: {
+            focus: 'series'
+          },
+          label: {
+            show: true,
+            position: 'inside',
+            color: '#FFF',
+            fontWeight: 600,
+            formatter: (res) => {
+              return res.data + '%'
+            }
+          },
+          itemStyle: {
+            normal: {
+              //柱体的颜色
+              //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+              color: function () {
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: colors[j]
+                  },
+                  {
+                    offset: 1,
+                    color: colors[j]
+                  }
+                ], false);
+              }
+            }
+
+          },
+          data: [arr1[j].Value]
+        }
+        arr.push(obj)
+      } else {
+        arr[n].data.push(arr1[j].Value)
+      }
+    }
+  }
+  return arr;
+}
+export default function createOpt(dx = [], ds = []) {
+  const data = createData(ds);
+  return {
+    grid: {
+      left: 10,
+      right: 10,
+      bottom: 10,
+      containLabel: true
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "#08182F",
+      color: "#fff",
+      borderColor: "#3373CC",
+      textStyle: {
+        color: "#fff", //设置文字颜色
+      },
+      extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+    },
+    color: colors,
+    legend: {
+      textStyle: { //图例文字的样式
+        color: '#fff',
+        fontSize: 10
+      },
+      y: 10,
+      x: 10,
+      itemWidth: 12,
+      itemHeight: 12,
+      borderRadius: 1, //圆角半径
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel :{  
+          interval:0, 
+          formatter: (value) => {
+              let res = doStr(value, 8);
+              return res
+          }
+      }, 
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      data: dx
+    },
+    yAxis: {
+      type: 'value',
+      max: 100,
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      axisLabel: {
+        formatter: (value) => {
+          return value + '%'
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed", // y轴分割线类型
+          color: "#012b4b",
+        },
+      },
+    },
+    series: data
+  }
+
+}

src/views/SaleRank/MarketSaleTraditional/mstMPPercent/index.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>传统燃油车市场销量分析-主销价格占比</div>
+</template>
+
+<script>
+export default {
+    name: 'mstMPPercent',
+    data() {
+        return {
+            
+        }
+    }
+}
+</script>
+
+<style lang="less">
+    
+</style>

src/views/SaleRank/MarketSaleTraditional/mstMainPrice/index.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>传统燃油车市场销量分析-主销价格区间</div>
+</template>
+
+<script>
+export default {
+    name: 'mstMainPrice',
+    data() {
+        return {
+            
+        }
+    }
+}
+</script>
+
+<style lang="less">
+    
+</style>

src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <precPercent></precPercent>
+        <precSuvPercent></precSuvPercent>
+        <precAutoPercent></precAutoPercent>
+        <precMpvPercent></precMpvPercent>
+    </div>
+</template>
+
+<script>
+import precPercent from "./precPercent"
+import precSuvPercent from "./precSuvPercent"
+import precAutoPercent from "./precAutoPercent"
+import precMpvPercent from "./precMpvPercent"
+export default {
+    components: {
+        precPercent,
+        precSuvPercent,
+        precAutoPercent,
+        precMpvPercent
+    },
+    name: 'mscPrecisionType',
+    data() {
+        return {
+            
+        }
+    }
+}
+</script>
+
+<style lang="less">
+    
+</style>

src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precAutoPercent/index.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="tp20-outter">
+        <v-label-div title="轿车销量占比">
+            <a-button type="primary" @click="report">导出报告</a-button>
+        </v-label-div>
+        <div class="d2">
+            <a-form-model layout="inline">
+                <a-form-model-item label="选择日期">
+                    <a-month-picker style="width: 146px" @change="getData" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
+                    <a-month-picker style="width: 146px" @change="getData" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
+                </a-form-model-item>
+            </a-form-model>
+        </div>
+        <div class="d3">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getSalesSpecNameTypesBySedan} from "@/api/SaleRankMarket";
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+import createOpt from './opt'
+export default {
+    name: 'totalTop20',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            tValue: 0, //0品牌 1车型
+            btnTimes: ['品牌','车型'],
+            selTime: ['',''],
+            opt: {},
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        getCheZhuLatestTime({token: this.form.token}).then(res => {
+            var dt = new Date(res.data)
+            var newDt = new Date( (dt.setMonth(dt.getMonth() - 11)) ).toISOString();
+            this.selTime = [newDt.slice(0,7), res.data];
+            this.getData()
+        })
+    },
+    methods: {
+        getData() {
+            let obj = {
+                token: this.form.token,
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+            }
+            getSalesSpecNameTypesBySedan(obj).then(res => {
+                let dx = [];
+                let ds = [];
+                res.data.forEach((ele) => {
+                    let key = ele.Time;
+                    let value = ele.Data;
+                    dx.push(key);
+                    ds.push(value);
+                });
+                this.opt = createOpt(dx, ds);
+            })
+        },
+        report() {
+            let obj = {
+                token: this.form.token,
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+                isExcel: 1,
+            };
+            getSalesSpecNameTypesBySedan(obj).then(() => {
+                this.$notification.open({
+                    message: `数据生成中`,
+                    description: "请前往个人中心查看下载进度",
+                    placement: "bottomRight",
+                });
+            });
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.tp20-outter {
+    width: 1552px;
+    height: 542px;
+    margin-top: 16px;
+    border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 8px 16px 0px 16px;
+    }
+    .d3 {
+        // padding: 0px 16px 16px 16px;
+        width: 100%;
+        height: calc(100% - 112px);
+    }
+}
+</style>

src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precAutoPercent/opt.js

@@ -0,0 +1,147 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 11:01:19
+ * @LastEditTime: 2021-12-23 16:37:35
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
+ */
+import * as echarts from "echarts";
+import {doStr} from "@/utils/gol/dataTool"
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+let colors2 = ['#3373CC60', '#63AECC60', '#54BF9360', '#CC9D1260', '#FFDE9560', '#78D4F860', 'rgba(58,162,114,0.6)', 'rgba(251,131,81,0.6)']
+let colors = ['#3373CC','#63AECC','#54BF93','#CC9D12','#FFDE95','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA']
+function createData(ds = []) {
+  let arr = [];
+  for (let i = 0; i < ds.length; i++) {
+    let arr1 = ds[i];
+    for (let j = 0; j < arr1.length; j++) {
+      let n = arr.findIndex(ele => {
+        return ele.name === arr1[j].Key;
+      })
+      if (n === -1) {
+        let obj =
+        {
+          name: arr1[j].Key,
+          type: 'bar',
+          stack: 'total',
+          barWidth: 30,
+          barGap: "-100%",
+          emphasis: {
+            focus: 'series'
+          },
+          label: {
+            show: true,
+            position: 'inside',
+            color: '#FFF',
+            fontWeight: 600,
+            fontSize: 10,
+            formatter: (res) => {
+              return res.data + '%'
+            }
+          },
+          itemStyle: {
+            normal: {
+              //柱体的颜色
+              //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+              color: function () {
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: colors[j]
+                  },
+                  {
+                    offset: 1,
+                    color: colors2[j]
+                  }
+                ], false);
+              }
+            }
+          },
+          data: [arr1[j].Value]
+        }
+        arr.push(obj)
+      } else {
+        arr[n].data.push(arr1[j].Value)
+      }
+    }
+  }
+  return arr;
+}
+export default function createOpt(dx = [], ds = []) {
+  const data = createData(ds);
+  return {
+    grid: {
+      left: 10,
+      right: 10,
+      bottom: 10,
+      containLabel: true
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "#08182F",
+      color: "#fff",
+      borderColor: "#3373CC",
+      textStyle: {
+        color: "#fff", //设置文字颜色
+      },
+      extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+    },
+    color: colors,
+    legend: {
+      textStyle: { //图例文字的样式
+        color: '#fff',
+        fontSize: 10
+      },
+      y: 10,
+      x: 10,
+      itemWidth: 12,
+      itemHeight: 12,
+      borderRadius: 1, //圆角半径
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel :{  
+          interval:0, 
+          formatter: (value) => {
+              let res = doStr(value, 8);
+              return res
+          }
+      }, 
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      data: dx
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: 100,
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      axisLabel: {
+        formatter: (value) => {
+          return value + '%';
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed", // y轴分割线类型
+          color: "#012b4b",
+        },
+      },
+    },
+    series: data
+  }
+
+}

src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precMpvPercent/index.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="tp20-outter">
+        <v-label-div title="MPV销量占比">
+            <a-button type="primary" @click="report">导出报告</a-button>
+        </v-label-div>
+        <div class="d2">
+            <a-form-model layout="inline">
+                <a-form-model-item label="选择日期">
+                    <a-month-picker style="width: 146px" @change="getData" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
+                    <a-month-picker style="width: 146px" @change="getData" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
+                </a-form-model-item>
+            </a-form-model>
+        </div>
+        <div class="d3">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getSalesSpecNameTypesByMpv} from "@/api/SaleRankMarket";
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+import createOpt from './opt'
+export default {
+    name: 'totalTop20',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            tValue: 0, //0品牌 1车型
+            btnTimes: ['品牌','车型'],
+            selTime: ['',''],
+            opt: {},
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        getCheZhuLatestTime({token: this.form.token}).then(res => {
+            var dt = new Date(res.data)
+            var newDt = new Date( (dt.setMonth(dt.getMonth() - 11)) ).toISOString();
+            this.selTime = [newDt.slice(0,7), res.data];
+            this.getData()
+        })
+    },
+    methods: {
+        getData() {
+            let obj = {
+                token: this.form.token,
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+            }
+            getSalesSpecNameTypesByMpv(obj).then(res => {
+                let dx = [];
+                let ds = [];
+                res.data.forEach((ele) => {
+                    let key = ele.Time;
+                    let value = ele.Data;
+                    dx.push(key);
+                    ds.push(value);
+                });
+                this.opt = createOpt(dx, ds);
+            })
+        },
+        report() {
+            let obj = {
+                token: this.form.token,
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+                isExcel: 1,
+            };
+            getSalesSpecNameTypesByMpv(obj).then(() => {
+                this.$notification.open({
+                    message: `数据生成中`,
+                    description: "请前往个人中心查看下载进度",
+                    placement: "bottomRight",
+                });
+            });
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.tp20-outter {
+    width: 1552px;
+    height: 542px;
+    margin-top: 16px;
+    border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 8px 16px 0px 16px;
+    }
+    .d3 {
+        // padding: 0px 16px 16px 16px;
+        width: 100%;
+        height: calc(100% - 112px);
+    }
+}
+</style>

src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precMpvPercent/opt.js

@@ -0,0 +1,147 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 11:01:19
+ * @LastEditTime: 2021-12-23 16:37:35
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
+ */
+import * as echarts from "echarts";
+import {doStr} from "@/utils/gol/dataTool"
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+let colors2 = ['#3373CC60', '#63AECC60', '#54BF9360', '#CC9D1260', '#FFDE9560', '#78D4F860', 'rgba(58,162,114,0.6)', 'rgba(251,131,81,0.6)']
+let colors = ['#3373CC','#63AECC','#54BF93','#CC9D12','#FFDE95','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA']
+function createData(ds = []) {
+  let arr = [];
+  for (let i = 0; i < ds.length; i++) {
+    let arr1 = ds[i];
+    for (let j = 0; j < arr1.length; j++) {
+      let n = arr.findIndex(ele => {
+        return ele.name === arr1[j].Key;
+      })
+      if (n === -1) {
+        let obj =
+        {
+          name: arr1[j].Key,
+          type: 'bar',
+          stack: 'total',
+          barWidth: 30,
+          barGap: "-100%",
+          emphasis: {
+            focus: 'series'
+          },
+          label: {
+            show: true,
+            position: 'inside',
+            color: '#FFF',
+            fontWeight: 600,
+            fontSize: 10,
+            formatter: (res) => {
+              return res.data + '%'
+            }
+          },
+          itemStyle: {
+            normal: {
+              //柱体的颜色
+              //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+              color: function () {
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: colors[j]
+                  },
+                  {
+                    offset: 1,
+                    color: colors2[j]
+                  }
+                ], false);
+              }
+            }
+          },
+          data: [arr1[j].Value]
+        }
+        arr.push(obj)
+      } else {
+        arr[n].data.push(arr1[j].Value)
+      }
+    }
+  }
+  return arr;
+}
+export default function createOpt(dx = [], ds = []) {
+  const data = createData(ds);
+  return {
+    grid: {
+      left: 10,
+      right: 10,
+      bottom: 10,
+      containLabel: true
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "#08182F",
+      color: "#fff",
+      borderColor: "#3373CC",
+      textStyle: {
+        color: "#fff", //设置文字颜色
+      },
+      extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+    },
+    color: colors,
+    legend: {
+      textStyle: { //图例文字的样式
+        color: '#fff',
+        fontSize: 10
+      },
+      y: 10,
+      x: 10,
+      itemWidth: 12,
+      itemHeight: 12,
+      borderRadius: 1, //圆角半径
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel :{  
+          interval:0, 
+          formatter: (value) => {
+              let res = doStr(value, 8);
+              return res
+          }
+      }, 
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      data: dx
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: 100,
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      axisLabel: {
+        formatter: (value) => {
+          return value + '%';
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed", // y轴分割线类型
+          color: "#012b4b",
+        },
+      },
+    },
+    series: data
+  }
+
+}

src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precPercent/index.vue

@@ -0,0 +1,105 @@
+<template>
+    <div class="precp-outter">
+        <v-label-div title="细分车型占比">
+            <a-button type="primary" @click="report">导出报告</a-button>
+        </v-label-div>
+        <div class="d2">
+            <a-form-model layout="inline">
+                <a-form-model-item label="选择日期">
+                    <a-month-picker style="width: 146px" @change="getData" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
+                    <a-month-picker style="width: 146px" @change="getData" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
+                </a-form-model-item>
+            </a-form-model>
+        </div>
+        <div class="d3">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getSalesSpecNameTypes} from "@/api/SaleRankMarket";
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+import createOpt from './opt'
+export default {
+    name: 'totalTop20',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            tValue: 0, //0品牌 1车型
+            btnTimes: ['品牌','车型'],
+            selTime: ['',''],
+            opt: {},
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        getCheZhuLatestTime({token: this.form.token}).then(res => {
+            var dt = new Date(res.data)
+            var newDt = new Date( (dt.setMonth(dt.getMonth() - 11)) ).toISOString();
+            this.selTime = [newDt.slice(0,7), res.data];
+            this.getData()
+        })
+    },
+    methods: {
+        getData() {
+            let obj = {
+                token: this.form.token,
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+            }
+            getSalesSpecNameTypes(obj).then(res => {
+                let dx = [];
+                let ds = [];
+                res.data.forEach((ele) => {
+                    let key = ele.Time;
+                    let value = ele.Data;
+                    dx.push(key);
+                    ds.push(value);
+                });
+                this.opt = createOpt(dx, ds);
+            })
+        },
+        report() {
+            let obj = {
+                token: this.form.token,
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+                isExcel: 1,
+            };
+            getSalesSpecNameTypes(obj).then(() => {
+                this.$notification.open({
+                    message: `数据生成中`,
+                    description: "请前往个人中心查看下载进度",
+                    placement: "bottomRight",
+                });
+            });
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.precp-outter {
+    width: 1552px;
+    height: 798px;
+    border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 8px 16px 0px 16px;
+    }
+    .d3 {
+        // padding: 0px 16px 16px 16px;
+        width: 100%;
+        height: calc(100% - 112px);
+    }
+}
+</style>

src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precPercent/opt.js

@@ -0,0 +1,147 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 11:01:19
+ * @LastEditTime: 2021-12-23 16:37:35
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
+ */
+import * as echarts from "echarts";
+import {doStr} from "@/utils/gol/dataTool"
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+let colors = ['#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090',
+'#62DDAA','#9DF5CA','#9DF5CA','#FFD470','#FFDE95','#FFEBBF','#E19D62','#F7B075','#FDC388','#FDD69B']
+function createData(ds = []) {
+  let arr = [];
+  for (let i = 0; i < ds.length; i++) {
+    let arr1 = ds[i];
+    for (let j = 0; j < arr1.length; j++) {
+      let n = arr.findIndex(ele => {
+        return ele.name === arr1[j].Key;
+      })
+      if (n === -1) {
+        let obj =
+        {
+          name: arr1[j].Key,
+          type: 'bar',
+          stack: 'total',
+          barWidth: 36,
+          barGap: "-100%",
+          emphasis: {
+            focus: 'series'
+          },
+          label: {
+            show: true,
+            position: 'inside',
+            color: '#FFF',
+            fontWeight: 600,
+            fontSize: 12,
+            formatter: (res) => {
+              return res.data + '%'
+            }
+          },
+          itemStyle: {
+            normal: {
+              //柱体的颜色
+              //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+              color: function () {
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: colors[j]
+                  },
+                  {
+                    offset: 1,
+                    color: colors[j]
+                  }
+                ], false);
+              }
+            }
+          },
+          data: [arr1[j].Value]
+        }
+        arr.push(obj)
+      } else {
+        arr[n].data.push(arr1[j].Value)
+      }
+    }
+  }
+  return arr;
+}
+export default function createOpt(dx = [], ds = []) {
+  const data = createData(ds);
+  return {
+    grid: {
+      left: 10,
+      right: 10,
+      bottom: 10,
+      containLabel: true
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "#08182F",
+      color: "#fff",
+      borderColor: "#3373CC",
+      textStyle: {
+        color: "#fff", //设置文字颜色
+      },
+      extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+    },
+    color: colors,
+    legend: {
+      textStyle: { //图例文字的样式
+        color: '#fff',
+        fontSize: 10
+      },
+      y: 10,
+      x: 10,
+      itemWidth: 12,
+      itemHeight: 12,
+      borderRadius: 1, //圆角半径
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel :{  
+          interval:0, 
+          formatter: (value) => {
+              let res = doStr(value, 8);
+              return res
+          }
+      }, 
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      data: dx
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: 100,
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      axisLabel: {
+        formatter: (value) => {
+          return value + '%';
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed", // y轴分割线类型
+          color: "#012b4b",
+        },
+      },
+    },
+    series: data
+  }
+
+}

src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precSuvPercent/index.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="tp20-outter">
+        <v-label-div title="SUV销量占比">
+            <a-button type="primary" @click="report">导出报告</a-button>
+        </v-label-div>
+        <div class="d2">
+            <a-form-model layout="inline">
+                <a-form-model-item label="选择日期">
+                    <a-month-picker style="width: 146px" @change="getData" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
+                    <a-month-picker style="width: 146px" @change="getData" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
+                </a-form-model-item>
+            </a-form-model>
+        </div>
+        <div class="d3">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getSalesSpecNameTypesBySuv} from "@/api/SaleRankMarket";
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+import createOpt from './opt'
+export default {
+    name: 'totalTop20',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            tValue: 0, //0品牌 1车型
+            btnTimes: ['品牌','车型'],
+            selTime: ['',''],
+            opt: {},
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        getCheZhuLatestTime({token: this.form.token}).then(res => {
+            var dt = new Date(res.data)
+            var newDt = new Date( (dt.setMonth(dt.getMonth() - 11)) ).toISOString();
+            this.selTime = [newDt.slice(0,7), res.data];
+            this.getData()
+        })
+    },
+    methods: {
+        getData() {
+            let obj = {
+                token: this.form.token,
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+            }
+            getSalesSpecNameTypesBySuv(obj).then(res => {
+                let dx = [];
+                let ds = [];
+                res.data.forEach((ele) => {
+                    let key = ele.Time;
+                    let value = ele.Data;
+                    dx.push(key);
+                    ds.push(value);
+                });
+                this.opt = createOpt(dx, ds);
+            })
+        },
+        report() {
+            let obj = {
+                token: this.form.token,
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+                isExcel: 1,
+            };
+            getSalesSpecNameTypesBySuv(obj).then(() => {
+                this.$notification.open({
+                    message: `数据生成中`,
+                    description: "请前往个人中心查看下载进度",
+                    placement: "bottomRight",
+                });
+            });
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.tp20-outter {
+    width: 1552px;
+    height: 542px;
+    margin-top: 16px;
+    border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 8px 16px 0px 16px;
+    }
+    .d3 {
+        // padding: 0px 16px 16px 16px;
+        width: 100%;
+        height: calc(100% - 112px);
+    }
+}
+</style>

src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precSuvPercent/opt.js

@@ -0,0 +1,147 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 11:01:19
+ * @LastEditTime: 2021-12-23 16:37:35
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
+ */
+import * as echarts from "echarts";
+import {doStr} from "@/utils/gol/dataTool"
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+let colors2 = ['#3373CC60', '#63AECC60', '#54BF9360', '#CC9D1260', '#FFDE9560', "rgba(114,191,222,0.6)", 'rgba(58,162,114,0.6)', 'rgba(251,131,81,0.6)']
+let colors = ['#3373CC','#63AECC','#54BF93','#CC9D12','#FFDE95','#FFDE95','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA']
+function createData(ds = []) {
+  let arr = [];
+  for (let i = 0; i < ds.length; i++) {
+    let arr1 = ds[i];
+    for (let j = 0; j < arr1.length; j++) {
+      let n = arr.findIndex(ele => {
+        return ele.name === arr1[j].Key;
+      })
+      if (n === -1) {
+        let obj =
+        {
+          name: arr1[j].Key,
+          type: 'bar',
+          stack: 'total',
+          barWidth: 30,
+          barGap: "-100%",
+          emphasis: {
+            focus: 'series'
+          },
+          label: {
+            show: true,
+            position: 'inside',
+            color: '#FFF',
+            fontWeight: 600,
+            fontSize: 10,
+            formatter: (res) => {
+              return res.data + '%'
+            }
+          },
+          itemStyle: {
+            normal: {
+              //柱体的颜色
+              //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+              color: function () {
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: colors[j]
+                  },
+                  {
+                    offset: 1,
+                    color: colors2[j]
+                  }
+                ], false);
+              }
+            }
+          },
+          data: [arr1[j].Value]
+        }
+        arr.push(obj)
+      } else {
+        arr[n].data.push(arr1[j].Value)
+      }
+    }
+  }
+  return arr;
+}
+export default function createOpt(dx = [], ds = []) {
+  const data = createData(ds);
+  return {
+    grid: {
+      left: 10,
+      right: 10,
+      bottom: 10,
+      containLabel: true
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "#08182F",
+      color: "#fff",
+      borderColor: "#3373CC",
+      textStyle: {
+        color: "#fff", //设置文字颜色
+      },
+      extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+    },
+    color: colors,
+    legend: {
+      textStyle: { //图例文字的样式
+        color: '#fff',
+        fontSize: 10
+      },
+      y: 10,
+      x: 10,
+      itemWidth: 12,
+      itemHeight: 12,
+      borderRadius: 1, //圆角半径
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel :{  
+          interval:0, 
+          formatter: (value) => {
+              let res = doStr(value, 8);
+              return res
+          }
+      }, 
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      data: dx
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: 100,
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      axisLabel: {
+        formatter: (value) => {
+          return value + '%';
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed", // y轴分割线类型
+          color: "#012b4b",
+        },
+      },
+    },
+    series: data
+  }
+
+}

src/views/SaleRank/MarketSaleTraditional/mstSeriesType/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <seriesTotal></seriesTotal>
+        <seriesSuv></seriesSuv>
+        <seriesAuto></seriesAuto>
+        <seriesMpv></seriesMpv>
+    </div>
+</template>
+
+<script>
+import seriesTotal from "./seriesTotal"
+import seriesSuv from "./seriesSuv"
+import seriesAuto from "./seriesAuto"
+import seriesMpv from "./seriesMpv"
+export default {
+    components: {
+        seriesTotal,
+        seriesSuv,
+        seriesAuto,
+        seriesMpv
+    },
+    name: 'mscTotal',
+    data() {
+        return {
+            
+        }
+    }
+}
+</script>
+
+<style lang="less">
+    
+</style>

src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesAuto/index.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="ttc-outter">
+        <v-label-div title="轿车销量"></v-label-div>
+        <div class="d3">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from './opt'
+import {getSalesSpecName1TypesBySedan} from "@/api/SaleRankMarket";
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+export default {
+    name: 'totalPassengerVehicle',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            opt: {},
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        getCheZhuLatestTime({token: this.form.token}).then(res => {
+            this.form.sStartTime = '2021-01';
+            this.form.sEndTime = res.data;
+            this.getData()
+        })
+    },
+    methods: {
+        getData() {
+            getSalesSpecName1TypesBySedan(this.form).then(res => {
+                let data = res.data;
+                let firstYearData = []; //0 - 11 count
+                let secondYearData = []; //12+ count
+                let percent = []; //12+ YearOnYearGrowth
+                for(let i = 0;i<data.length;i++) {
+                    if(i < 12) {
+                        firstYearData.push(data[i].Count)
+                    } else {
+                        secondYearData.push(data[i].Count);
+                        percent.push(data[i].YearOnYearGrowth)
+                    }
+                };
+                this.opt = createOpt(firstYearData,secondYearData,percent)
+            })
+        },
+    }
+}
+</script>
+
+<style lang="less">
+.ttc-outter {
+    width: 1552px;
+    height: 492px;
+    margin-top: 16px;
+    border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 8px 16px 0px 16px;
+    }
+    .d3 {
+        // padding: 0px 16px 16px 16px;
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesAuto/opt.js

@@ -0,0 +1,156 @@
+
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+import * as echarts from "echarts";
+export default function createOpt(firstData = [], secondData = [], percent = []) {
+    return {
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            axisPointer: {
+                type: 'cross',
+                crossStyle: {
+                  color: '#999'
+                }
+            },
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+          },
+          grid: {
+            left: 10,
+            right: 10,
+            bottom: 10,
+            containLabel: true
+          },
+          legend: {
+              textStyle: { //图例文字的样式
+                color: '#fff',
+                fontSize: 10
+              },
+              y: 10,
+              x: 10,
+              itemWidth: 12,
+              itemHeight: 12,
+              borderRadius: 1, //圆角半径
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
+              axisPointer: {
+                type: 'shadow'
+              },
+              axisLabel: {
+                color: '#FFF'
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              axisLabel: {
+                formatter: (value) => {
+                    return bigNumberTransform(value);
+                },
+                color: '#FFF'
+              },
+              splitLine:{
+                show:false
+              },
+            },
+            {
+              type: 'value',
+              axisLabel: {
+                formatter: '{value}%',
+                color: '#FFF'
+              },
+              splitLine:{
+                show:false
+              },
+            }
+          ],
+          series: [
+            {
+              name: '2021',
+              type: 'bar',
+              barWidth: 20,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value;
+                }
+              },
+              itemStyle: {
+                normal: {
+                  //柱体的颜色
+                  //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+                  color: function () {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: '#3373CC'
+                      },
+                      {
+                        offset: 1,
+                        color: '#3E8CF940'
+                      }
+                    ], false);
+                  }
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                color: '#FFF'
+              },
+              data: firstData
+            },
+            {
+              name: '2022',
+              type: 'bar',
+              barWidth: 20,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value;
+                }
+              },
+              itemStyle: {
+                normal: {
+                  //柱体的颜色
+                  //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+                  color: function () {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: '#54BF93'
+                      },
+                      {
+                        offset: 1,
+                        color: '#61DDAA30'
+                      }
+                    ], false);
+                  }
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                color: '#FFF'
+              },
+              data: secondData
+            },
+            {
+              name: '同比',
+              type: 'line',
+              yAxisIndex: 1,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value+'%';
+                }
+              },
+              data: percent
+            }
+          ]
+    }
+}

src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesMpv/index.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="tpsv-outter">
+        <v-label-div title="MPV销量"></v-label-div>
+        <div class="d3">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from './opt'
+import {getSalesSpecName1TypesByMpv} from "@/api/SaleRankMarket";
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+export default {
+    name: 'totalPassengerVehicle',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            opt: {},
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        getCheZhuLatestTime({token: this.form.token}).then(res => {
+            this.form.sStartTime = '2021-01';
+            this.form.sEndTime = res.data;
+            this.getData()
+        })
+    },
+    methods: {
+        getData() {
+            getSalesSpecName1TypesByMpv(this.form).then(res => {
+                let data = res.data;
+                let firstYearData = []; //0 - 11 count
+                let secondYearData = []; //12+ count
+                let percent = []; //12+ YearOnYearGrowth
+                for(let i = 0;i<data.length;i++) {
+                    if(i < 12) {
+                        firstYearData.push(data[i].Count)
+                    } else {
+                        secondYearData.push(data[i].Count);
+                        percent.push(data[i].YearOnYearGrowth)
+                    }
+                };
+                this.opt = createOpt(firstYearData,secondYearData,percent)
+            })
+        },
+    }
+}
+</script>
+
+<style lang="less">
+.tpsv-outter {
+    width: 1552px;
+    height: 492px;
+    margin-top: 16px;
+    border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 8px 16px 0px 16px;
+    }
+    .d3 {
+        // padding: 0px 16px 16px 16px;
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesMpv/opt.js

@@ -0,0 +1,156 @@
+
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+import * as echarts from "echarts";
+export default function createOpt(firstData = [], secondData = [], percent = []) {
+    return {
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            axisPointer: {
+                type: 'cross',
+                crossStyle: {
+                  color: '#999'
+                }
+            },
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+          },
+          grid: {
+            left: 10,
+            right: 10,
+            bottom: 10,
+            containLabel: true
+          },
+          legend: {
+              textStyle: { //图例文字的样式
+                color: '#fff',
+                fontSize: 10
+              },
+              y: 10,
+              x: 10,
+              itemWidth: 12,
+              itemHeight: 12,
+              borderRadius: 1, //圆角半径
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
+              axisPointer: {
+                type: 'shadow'
+              },
+              axisLabel: {
+                color: '#FFF'
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              axisLabel: {
+                formatter: (value) => {
+                    return bigNumberTransform(value);
+                },
+                color: '#FFF'
+              },
+              splitLine:{
+                show:false
+              },
+            },
+            {
+              type: 'value',
+              axisLabel: {
+                formatter: '{value}%',
+                color: '#FFF'
+              },
+              splitLine:{
+                show:false
+              },
+            }
+          ],
+          series: [
+            {
+              name: '2021',
+              type: 'bar',
+              barWidth: 20,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value;
+                }
+              },
+              itemStyle: {
+                normal: {
+                  //柱体的颜色
+                  //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+                  color: function () {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: '#3373CC'
+                      },
+                      {
+                        offset: 1,
+                        color: '#3E8CF940'
+                      }
+                    ], false);
+                  }
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                color: '#FFF'
+              },
+              data: firstData
+            },
+            {
+              name: '2022',
+              type: 'bar',
+              barWidth: 20,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value;
+                }
+              },
+              itemStyle: {
+                normal: {
+                  //柱体的颜色
+                  //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+                  color: function () {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: '#54BF93'
+                      },
+                      {
+                        offset: 1,
+                        color: '#61DDAA30'
+                      }
+                    ], false);
+                  }
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                color: '#FFF'
+              },
+              data: secondData
+            },
+            {
+              name: '同比',
+              type: 'line',
+              yAxisIndex: 1,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value+'%';
+                }
+              },
+              data: percent
+            }
+          ]
+    }
+}

src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesSuv/index.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="tpsv-outter">
+        <v-label-div title="SUV销量"></v-label-div>
+        <div class="d3">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import createOpt from './opt'
+import {getSalesSpecName1TypesBySuv} from "@/api/SaleRankMarket";
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+export default {
+    name: 'totalPassengerVehicle',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            opt: {},
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        getCheZhuLatestTime({token: this.form.token}).then(res => {
+            this.form.sStartTime = '2021-01';
+            this.form.sEndTime = res.data;
+            this.getData()
+        })
+    },
+    methods: {
+        getData() {
+            getSalesSpecName1TypesBySuv(this.form).then(res => {
+                let data = res.data;
+                let firstYearData = []; //0 - 11 count
+                let secondYearData = []; //12+ count
+                let percent = []; //12+ YearOnYearGrowth
+                for(let i = 0;i<data.length;i++) {
+                    if(i < 12) {
+                        firstYearData.push(data[i].Count)
+                    } else {
+                        secondYearData.push(data[i].Count);
+                        percent.push(data[i].YearOnYearGrowth)
+                    }
+                };
+                this.opt = createOpt(firstYearData,secondYearData,percent)
+            })
+        },
+    }
+}
+</script>
+
+<style lang="less">
+.tpsv-outter {
+    width: 1552px;
+    height: 492px;
+    margin-top: 16px;
+    border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 8px 16px 0px 16px;
+    }
+    .d3 {
+        // padding: 0px 16px 16px 16px;
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesSuv/opt.js

@@ -0,0 +1,156 @@
+
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+import * as echarts from "echarts";
+export default function createOpt(firstData = [], secondData = [], percent = []) {
+    return {
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            axisPointer: {
+                type: 'cross',
+                crossStyle: {
+                  color: '#999'
+                }
+            },
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+          },
+          grid: {
+            left: 10,
+            right: 10,
+            bottom: 10,
+            containLabel: true
+          },
+          legend: {
+              textStyle: { //图例文字的样式
+                color: '#fff',
+                fontSize: 10
+              },
+              y: 10,
+              x: 10,
+              itemWidth: 12,
+              itemHeight: 12,
+              borderRadius: 1, //圆角半径
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
+              axisPointer: {
+                type: 'shadow'
+              },
+              axisLabel: {
+                color: '#FFF'
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              axisLabel: {
+                formatter: (value) => {
+                    return bigNumberTransform(value);
+                },
+                color: '#FFF'
+              },
+              splitLine:{
+                show:false
+              },
+            },
+            {
+              type: 'value',
+              axisLabel: {
+                formatter: '{value}%',
+                color: '#FFF'
+              },
+              splitLine:{
+                show:false
+              },
+            }
+          ],
+          series: [
+            {
+              name: '2021',
+              type: 'bar',
+              barWidth: 20,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value;
+                }
+              },
+              itemStyle: {
+                normal: {
+                  //柱体的颜色
+                  //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+                  color: function () {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: '#3373CC'
+                      },
+                      {
+                        offset: 1,
+                        color: '#3E8CF940'
+                      }
+                    ], false);
+                  }
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                color: '#FFF'
+              },
+              data: firstData
+            },
+            {
+              name: '2022',
+              type: 'bar',
+              barWidth: 20,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value;
+                }
+              },
+              itemStyle: {
+                normal: {
+                  //柱体的颜色
+                  //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+                  color: function () {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: '#54BF93'
+                      },
+                      {
+                        offset: 1,
+                        color: '#61DDAA30'
+                      }
+                    ], false);
+                  }
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                color: '#FFF'
+              },
+              data: secondData
+            },
+            {
+              name: '同比',
+              type: 'line',
+              yAxisIndex: 1,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value+'%';
+                }
+              },
+              data: percent
+            }
+          ]
+    }
+}

src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesTotal/index.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="tp20-outter">
+        <v-label-div title="销量占比"></v-label-div>
+        <div class="d2">
+            <a-form-model layout="inline">
+                <a-form-model-item label="选择日期">
+                    <a-month-picker style="width: 146px" @change="getData" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
+                    <a-month-picker style="width: 146px" @change="getData" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
+                </a-form-model-item>
+            </a-form-model>
+        </div>
+        <div class="d3">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getSalesSpecName1Types} from "@/api/SaleRankMarket";
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+import createOpt from './opt'
+export default {
+    name: 'totalTop20',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            tValue: 0, //0品牌 1车型
+            btnTimes: ['品牌','车型'],
+            selTime: ['',''],
+            opt: {},
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        getCheZhuLatestTime({token: this.form.token}).then(res => {
+            var dt = new Date(res.data)
+            var newDt = new Date( (dt.setMonth(dt.getMonth() - 11)) ).toISOString();
+            this.selTime = [newDt.slice(0,7), res.data];
+            this.getData()
+        })
+    },
+    methods: {
+        getData() {
+            let obj = {
+                token: this.form.token,
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+            }
+            getSalesSpecName1Types(obj).then(res => {
+                let newData = [];
+                for(let i=0;i<res.data.length;i++) {
+                    let arr = [];
+                    let total = 0;
+                    res.data[i].Data.forEach(ele => {
+                        total = ele.Value*1 + total;
+                    });
+                    res.data[i].Data.forEach(ele => {
+                        let o = {
+                            Key: ele.Key,
+                            Value: (ele.Value*100/total).toFixed(2)
+                        };
+                        arr.push(o)
+                    });
+
+                    let obj = {
+                        Time: res.data[i].Time,
+                        Data: arr
+                    };
+                    newData.push(obj)
+                }
+                let dx = [];
+                let ds = [];
+                newData.forEach((ele) => {
+                    let key = ele.Time;
+                    let value = ele.Data;
+                    dx.push(key);
+                    ds.push(value);
+                });
+                this.opt = createOpt(dx, ds);
+            })
+        },
+    }
+}
+</script>
+
+<style lang="less">
+.tp20-outter {
+    width: 1552px;
+    height: 542px;
+    border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 8px 16px 0px 16px;
+    }
+    .d3 {
+        // padding: 0px 16px 16px 16px;
+        width: 100%;
+        height: calc(100% - 112px);
+    }
+}
+</style>

src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesTotal/opt.js

@@ -0,0 +1,149 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-09 11:01:19
+ * @LastEditTime: 2021-12-23 16:37:35
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
+ */
+import * as echarts from "echarts";
+import {doStr} from "@/utils/gol/dataTool"
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+// let colors = ['rgba(84,111,197,1)', 'rgba(145,203,116,1)', 'rgba(90,203,156,1)', 'rgba(248,200,87,1)', 'rgba(237,101,101,1)', "rgba(114,191,222,1)", 'rgba(58,162,114,1)', 'rgba(251,131,81,1)']
+let colors2 = ['#3373CC60', '#63AECC60', '#54BF9360', 'rgba(248,200,87,0.6)', 'rgba(237,101,101,0.6)', "rgba(114,191,222,0.6)", 'rgba(58,162,114,0.6)', 'rgba(251,131,81,0.6)']
+let colors = ['#3373CC','#63AECC','#54BF93','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA']
+function createData(ds = []) {
+  let arr = [];
+  for (let i = 0; i < ds.length; i++) {
+    let arr1 = ds[i];
+    for (let j = 0; j < arr1.length; j++) {
+      let n = arr.findIndex(ele => {
+        return ele.name === arr1[j].Key;
+      })
+      if (n === -1) {
+        let obj =
+        {
+          name: arr1[j].Key,
+          type: 'bar',
+          stack: 'total',
+          barWidth: 36,
+          barGap: "-100%",
+          emphasis: {
+            focus: 'series'
+          },
+          label: {
+            show: true,
+            position: 'inside',
+            color: '#FFF',
+            fontWeight: 600,
+            fontSize: 10,
+            formatter: (res) => {
+              return res.data + '%'
+            }
+          },
+          itemStyle: {
+            normal: {
+              //柱体的颜色
+              //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+              color: function () {
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: colors[j]
+                  },
+                  {
+                    offset: 1,
+                    color: colors2[j]
+                  }
+                ], false);
+              }
+            }
+
+          },
+          data: [arr1[j].Value]
+        }
+        arr.push(obj)
+      } else {
+        arr[n].data.push(arr1[j].Value)
+      }
+    }
+  }
+  return arr;
+}
+export default function createOpt(dx = [], ds = []) {
+  const data = createData(ds);
+  return {
+    grid: {
+      left: 10,
+      right: 10,
+      bottom: 10,
+      containLabel: true
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "#08182F",
+      color: "#fff",
+      borderColor: "#3373CC",
+      textStyle: {
+        color: "#fff", //设置文字颜色
+      },
+      extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+    },
+    color: colors,
+    legend: {
+      textStyle: { //图例文字的样式
+        color: '#fff',
+        fontSize: 10
+      },
+      y: 10,
+      x: 10,
+      itemWidth: 12,
+      itemHeight: 12,
+      borderRadius: 1, //圆角半径
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel :{  
+          interval:0, 
+          formatter: (value) => {
+              let res = doStr(value, 8);
+              return res
+          }
+      }, 
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      data: dx
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: 100,
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      axisLabel: {
+        formatter: (value) => {
+          return value + '%';
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed", // y轴分割线类型
+          color: "#012b4b",
+        },
+      },
+    },
+    series: data
+  }
+
+}

src/views/SaleRank/index.vue

@@ -52,6 +52,51 @@
                       <a-menu-item key="citySale">
                           <router-link to="/saleRank/citySale">城市销量</router-link>
                       </a-menu-item>
+                      <a-menu-item key="marketComp">
+                          <router-link to="/saleRank/marketComp">市场竞争格局图</router-link>
+                      </a-menu-item>
+                      <a-sub-menu title="中国乘用车市场销量分析" key="sub4">
+                          <a-menu-item key="mscTotal">
+                              <router-link to="/saleRank/mscTotal">总销量</router-link>
+                          </a-menu-item>
+                          <a-menu-item key="mscEnergyType">
+                              <router-link to="/saleRank/mscEnergyType">能源类型</router-link>
+                          </a-menu-item>
+                          <a-menu-item key="mscCompChart">
+                              <router-link to="/saleRank/mscCompChart">全车型竞争关系图谱</router-link>
+                          </a-menu-item>
+                      </a-sub-menu>
+                      <a-sub-menu title="传统燃油车市场销量分析" key="sub5">
+                          <a-menu-item key="mstCountryPercent">
+                              <router-link to="/saleRank/mstCountryPercent">国别占比</router-link>
+                          </a-menu-item>
+                          <a-menu-item key="mstSeriesType">
+                              <router-link to="/saleRank/mstSeriesType">车型类别</router-link>
+                          </a-menu-item>
+                          <a-menu-item key="mstPrecisionType">
+                              <router-link to="/saleRank/mstPrecisionType">细分车型</router-link>
+                          </a-menu-item>
+                          <a-menu-item key="mstMainPrice">
+                              <router-link to="/saleRank/mstMainPrice">主销价格区间</router-link>
+                          </a-menu-item>
+                          <a-menu-item key="mstMPPercent">
+                              <router-link to="/saleRank/mstMPPercent">车型主销价格占比</router-link>
+                          </a-menu-item>
+                      </a-sub-menu>
+                      <a-sub-menu title="新能源车市场销量分析" key="sub6">
+                          <a-menu-item key="mneEnergyType">
+                              <router-link to="/saleRank/mneEnergyType">能源类型</router-link>
+                          </a-menu-item>
+                          <a-menu-item key="mneCountryPercent">
+                              <router-link to="/saleRank/mneCountryPercent">国别占比</router-link>
+                          </a-menu-item>
+                          <a-menu-item key="mnePrecisionType">
+                              <router-link to="/saleRank/mnePrecisionType">细分车型</router-link>
+                          </a-menu-item>
+                          <a-menu-item key="mneMainPrice">
+                              <router-link to="/saleRank/mneMainPrice">主销价格区间</router-link>
+                          </a-menu-item>
+                      </a-sub-menu>
                   </a-menu>
               </div>
               <div class="sr-view">