zx

src/api/SaleRankMarket/index.js

@@ -378,4 +378,41 @@ export function getSalesSpecName1TypesE(params) {
             'content-type': 'application/x-www-form-urlencoded'
         }
     })
+}
+
+// 新能源 - 车型主销价格占比
+export function getSalesSpecNameByPriceRangeByEnergy(params) {
+    let obj =  Object.assign({action: 'getSalesSpecNameByPriceRangeByEnergy', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 新能源 - 主销价格区间 - 区间
+export function getSalesPriceRangeSTypesByEnergy(params) {
+    let obj =  Object.assign({action: 'getSalesPriceRangeSTypesByEnergy', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 新能源 - 主销价格区间 - 品牌
+export function getSalesPriceRangeSBrandByEnergy(params) {
+    let obj =  Object.assign({action: 'getSalesPriceRangeSBrandByEnergy', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
 }

src/router/index.js

@@ -357,9 +357,17 @@ const router = [
                         component: resolve => require(['@/views/SaleRank/MarketSaleNE/mnePrecisionType/index.vue'], resolve),
                     },
                     {
-                        path: 'mneMainPrice', //新能源车市场销量分析 - 主销价格区间
+                        path: 'mneMainPrice', //新能源车市场销量分析 - 车型类别
                         component: resolve => require(['@/views/SaleRank/MarketSaleNE/mneMainPrice/index.vue'], resolve),
                     },
+                    {
+                        path: 'mneMP', //新能源车市场销量分析 - 主销价格区间
+                        component: resolve => require(['@/views/SaleRank/MarketSaleNE/mneMP/index.vue'], resolve),
+                    },
+                    {
+                        path: 'mneMPPercent', //新能源车市场销量分析 - 主销价格占比
+                        component: resolve => require(['@/views/SaleRank/MarketSaleNE/mneMPPercent/index.vue'], resolve),
+                    },
                 ]
             },
            {

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

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <mainCountry></mainCountry>
+        <mainBrand></mainBrand>
+    </div>
+</template>
+
+<script>
+import mainCountry from "./mainCountry"
+import mainBrand from "./mainBrand"
+export default {
+    components: {
+        mainCountry,
+        mainBrand
+    },
+    name: 'mstMainPrice',
+    data() {
+        return {
+            
+        }
+    }
+}
+</script>
+
+<style lang="less">
+    
+</style>

src/views/SaleRank/MarketSaleNE/mneMP/mainBrand/index.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="preauto-outter" :style="getIsLight?{background: '#FFF'}:{}">
+        <v-label-div v-if="!getIsLight" title="品牌销量top10主销价格区间占比">
+            <a-button type="primary" @click="report">导出报告</a-button>
+        </v-label-div>
+        <v-label-div-light v-else title="品牌销量top10主销价格区间占比" class="lightSy">
+            <a-button type="primary" @click="report">导出报告</a-button>
+        </v-label-div-light>
+        <div class="d3" v-if="getIsLight">
+            <v-echarts :opt="opt2"></v-echarts>
+        </div>
+        <div class="d3" v-else>
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getSalesPriceRangeSBrandByEnergy} from "@/api/SaleRankMarket";
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+import createOpt from './opt'
+import createOptLight from './optLight'
+export default {
+    name: 'totalTop20',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            tValue: 0, //0品牌 1车型
+            btnTimes: ['品牌','车型'],
+            selTime: ['',''],
+            opt: {},
+            opt2: {},
+        }
+    },
+    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],
+            }
+            getSalesPriceRangeSBrandByEnergy(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 = {
+                        Key: res.data[i].Key,
+                        Data: arr
+                    };
+                    newData.push(obj)
+                }
+                let dx = [];
+                let ds = [];
+                newData.forEach((ele) => {
+                    let key = ele.Key;
+                    let value = ele.Data;
+                    dx.push(key);
+                    ds.push(value);
+                });
+                this.opt = createOpt(dx, ds);
+                this.opt2 = createOptLight(dx, ds);
+            })
+        },
+        report() {
+            let obj = {
+                token: this.form.token,
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+                isExcel: 1,
+            };
+            let authBtns = this.getLevelBtn;
+            for(let i=0;i<authBtns.length;i++) {
+                if(authBtns[i].Id == '815') {
+                    getSalesPriceRangeSBrandByEnergy(obj).then(res => {
+                        let data = res.data;
+                        window.open(data);
+                    })
+                    return true;
+                };
+            };
+            this.$message.error('权限不足')
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.preauto-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/MarketSaleNE/mneMP/mainBrand/opt.js

@@ -0,0 +1,137 @@
+/*
+ * @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: 24,
+          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, 14);
+              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/MarketSaleNE/mneMP/mainBrand/optLight.js

@@ -0,0 +1,136 @@
+/*
+ * @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"
+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: 24,
+          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 createOptLight(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: '#000',
+        fontSize: 10
+      },
+      y: 10,
+      x: 10,
+      itemWidth: 12,
+      itemHeight: 12,
+      borderRadius: 1, //圆角半径
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel :{  
+          interval:0, 
+          formatter: (value) => {
+              let res = doStr(value, 14);
+              return res
+          }
+      }, 
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#000",
+        },
+      },
+      data: dx
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: 100,
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#000",
+        },
+      },
+      axisLabel: {
+        formatter: (value) => {
+          return value + '%';
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed", // y轴分割线类型
+          color: "#012b4b",
+        },
+      },
+    },
+    series: data
+  }
+
+}

src/views/SaleRank/MarketSaleNE/mneMP/mainCountry/index.vue

@@ -0,0 +1,139 @@
+<template>
+    <div class="mainc-outter" :style="getIsLight?{background: '#FFF'}:{}">
+        <v-label-div v-if="!getIsLight" title="国别主销价格区间占比">
+            <a-button type="primary" @click="report">导出报告</a-button>
+        </v-label-div>
+        <v-label-div-light v-else title="国别主销价格区间占比" class="lightSy">
+            <a-button type="primary" @click="report">导出报告</a-button>
+        </v-label-div-light>
+        <div class="d2">
+            <a-form-model :class="getIsLight?'lightSy':'dark'" 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;margin-left: 16px" @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-if="getIsLight">
+            <v-echarts :opt="opt2"></v-echarts>
+        </div>
+        <div class="d3" v-else>
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getSalesPriceRangeSTypesByEnergy} from "@/api/SaleRankMarket";
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+import createOpt from './opt'
+import createOptLight from './optLight'
+export default {
+    name: 'totalTop20',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            tValue: 0, //0品牌 1车型
+            btnTimes: ['品牌','车型'],
+            selTime: ['',''],
+            opt: {},
+            opt2: {},
+        }
+    },
+    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],
+            }
+            getSalesPriceRangeSTypesByEnergy(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].Key,
+                        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);
+                this.opt2 = createOptLight(dx, ds);
+            })
+        },
+        report() {
+            let obj = {
+                token: this.form.token,
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+                isExcel: 1,
+            };
+            let authBtns = this.getLevelBtn;
+            for(let i=0;i<authBtns.length;i++) {
+                if(authBtns[i].Id == '815') {
+                    getSalesPriceRangeSTypesByEnergy(obj).then(res => {
+                        let data = res.data;
+                        window.open(data);
+                    })
+                    return true;
+                };
+            };
+            this.$message.error('权限不足')
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.mainc-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/MarketSaleNE/mneMP/mainCountry/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, 10);
+              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/MarketSaleNE/mneMP/mainCountry/optLight.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"
+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: '#000',
+            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 createOptLight(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: '#000',
+        fontSize: 10
+      },
+      y: 10,
+      x: 10,
+      itemWidth: 12,
+      itemHeight: 12,
+      borderRadius: 1, //圆角半径
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel :{  
+          interval:0, 
+          formatter: (value) => {
+              let res = doStr(value, 10);
+              return res
+          }
+      }, 
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#000",
+        },
+      },
+      data: dx
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: 100,
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#000",
+        },
+      },
+      axisLabel: {
+        formatter: (value) => {
+          return value + '%';
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed", // y轴分割线类型
+          color: "#012b4b",
+        },
+      },
+    },
+    series: data
+  }
+
+}

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

@@ -0,0 +1,137 @@
+<template>
+    <div class="mscet-outter" :style="getIsLight?{background: '#FFF'}:{}">
+        <v-label-div v-if="!getIsLight" title="车型主销价格占比">
+            <a-button type="primary" @click="report">导出报告</a-button>
+        </v-label-div>
+        <v-label-div-light v-else title="车型主销价格占比" class="lightSy">
+            <a-button type="primary" @click="report">导出报告</a-button>
+        </v-label-div-light>
+        <div class="d2">
+            <a-form-model :class="getIsLight?'lightSy':'dark'" 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;margin-left: 16px" :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-if="getIsLight">
+            <v-echarts :opt="opt2"></v-echarts>
+        </div>
+        <div class="d3" v-else>
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getSalesSpecNameByPriceRangeByEnergy} from "@/api/SaleRankMarket";
+import {getCheZhuLatestTime} from "@/api/SaleRank"
+import createOpt from './opt'
+import createOptLight from './optLight'
+export default {
+    name: 'totalTop20',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            selTime: ['',''],
+            opt: {},
+            opt2: {},
+        }
+    },
+    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],
+            }
+            getSalesSpecNameByPriceRangeByEnergy(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].Key,
+                        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);
+                this.opt2 = createOptLight(dx, ds);
+            })
+        },
+        report() {
+            let obj = {
+                token: this.form.token,
+                sTimeType: 4,
+                sStartTime: this.selTime[0],
+                sEndTime: this.selTime[1],
+                isExcel: 1,
+            };
+            let authBtns = this.getLevelBtn;
+            for(let i=0;i<authBtns.length;i++) {
+                if(authBtns[i].Id == '815') {
+                    getSalesSpecNameByPriceRangeByEnergy(obj).then(res => {
+                        let data = res.data;
+                        window.open(data);
+                    })
+                    return true;
+                };
+            };
+            this.$message.error('权限不足')
+        }
+    }
+}
+</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/MarketSaleNE/mneMPPercent/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, 10);
+              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/MarketSaleNE/mneMPPercent/optLight.js

@@ -0,0 +1,145 @@
+/*
+ * @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"
+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: '#000',
+            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: '#000',
+        fontSize: 10
+      },
+      y: 10,
+      x: 10,
+      itemWidth: 12,
+      itemHeight: 12,
+      borderRadius: 1, //圆角半径
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel :{  
+          interval:0, 
+          formatter: (value) => {
+              let res = doStr(value, 10);
+              return res
+          }
+      }, 
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#000",
+        },
+      },
+      data: dx
+    },
+    yAxis: {
+      type: 'value',
+      max: 100,
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#000",
+        },
+      },
+      axisLabel: {
+        formatter: (value) => {
+          return value + '%'
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed", // y轴分割线类型
+          color: "#012b4b",
+        },
+      },
+    },
+    series: data
+  }
+
+}

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

@@ -104,7 +104,7 @@ export default function createOpt(dx = [], ds = []) {
       axisLabel :{  
           interval:0, 
           formatter: (value) => {
-              let res = doStr(value, 8);
+              let res = doStr(value, 10);
               return res
           }
       }, 

src/views/SaleRank/MarketSaleTraditional/mstMPPercent/optLight.js

@@ -103,7 +103,7 @@ export default function createOpt(dx = [], ds = []) {
       axisLabel :{  
           interval:0, 
           formatter: (value) => {
-              let res = doStr(value, 8);
+              let res = doStr(value, 10);
               return res
           }
       }, 

src/views/SaleRank/MarketSaleTraditional/mstMainPrice/mainBrand/opt.js

@@ -94,7 +94,7 @@ export default function createOpt(dx = [], ds = []) {
       axisLabel :{  
           interval:0, 
           formatter: (value) => {
-              let res = doStr(value, 8);
+              let res = doStr(value, 14);
               return res
           }
       }, 

src/views/SaleRank/MarketSaleTraditional/mstMainPrice/mainBrand/optLight.js

@@ -93,7 +93,7 @@ export default function createOptLight(dx = [], ds = []) {
       axisLabel :{  
           interval:0, 
           formatter: (value) => {
-              let res = doStr(value, 8);
+              let res = doStr(value, 14);
               return res
           }
       }, 

src/views/SaleRank/MarketSaleTraditional/mstMainPrice/mainCountry/opt.js

@@ -104,7 +104,7 @@ export default function createOpt(dx = [], ds = []) {
       axisLabel :{  
           interval:0, 
           formatter: (value) => {
-              let res = doStr(value, 8);
+              let res = doStr(value, 10);
               return res
           }
       }, 

src/views/SaleRank/MarketSaleTraditional/mstMainPrice/mainCountry/optLight.js

@@ -103,7 +103,7 @@ export default function createOptLight(dx = [], ds = []) {
       axisLabel :{  
           interval:0, 
           formatter: (value) => {
-              let res = doStr(value, 8);
+              let res = doStr(value, 10);
               return res
           }
       }, 

src/views/SaleRank/index.vue

@@ -97,6 +97,12 @@
                           <a-menu-item key="mnePrecisionType">
                               <router-link to="/saleRank/mnePrecisionType">细分车型</router-link>
                           </a-menu-item>
+                          <a-menu-item key="mneMP">
+                              <router-link to="/saleRank/mneMP">主销价格区间</router-link>
+                          </a-menu-item>
+                          <a-menu-item key="mneMPPercent">
+                              <router-link to="/saleRank/mneMPPercent">车型主销价格占比</router-link>
+                          </a-menu-item>
                       </a-sub-menu>
                   </a-menu>
               </div>