Merge branch 'dev'

prod
校文 3 years ago
commit efb321d70c

@ -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'
}
})
}

@ -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'
}
})
}

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

@ -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),
},
]
},
{

@ -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;
}

@ -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">

@ -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>

@ -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>

@ -60,7 +60,7 @@ export default {
name: "index",
components: {
realTimeEvent, //
keyCommunicationPositions, //
keyCommunicationPositions, // TOP
salesRank, //
userPortrait, //
spreadTheSound, // TOP10

@ -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) {

@ -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;

@ -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">

@ -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>

@ -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',
}
},
]
}
}

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

@ -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>

@ -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',
}
},
]
}
}

@ -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>

@ -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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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
}
}

@ -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>

@ -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>

@ -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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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
}
]
}
}

@ -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>

@ -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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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
}
}

@ -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>

@ -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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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
}
]
}
}

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

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

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

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

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

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

@ -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>

@ -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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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
}
}

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

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

@ -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>

@ -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>

@ -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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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
}
}

@ -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>

@ -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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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
}
}

@ -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>

@ -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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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
}
}

@ -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>

@ -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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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
}
}

@ -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>

@ -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>

@ -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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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
}
]
}
}

@ -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>

@ -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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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
}
]
}
}

@ -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>

@ -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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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
}
]
}
}

@ -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>

@ -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: {
//柱体的颜色
//右1000表示从正右开始向左渐变
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
}
}

@ -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">

Loading…
Cancel
Save