prod
parent
2f2979d940
commit
d2b5a837f5
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ecy-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="柴油车销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'EnergyCY',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '柴油车销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sEnergyType: 2
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sEnergyType: 2
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.ecy-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ne-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="新能源车排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'EnergyNE',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '新能源车销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sEnergyType: 4
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sEnergyType: 4
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.ne-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="qh-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="轻混系统排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'EnergyNE',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '轻混系统销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sEnergyType: 5
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sEnergyType: 5
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.qh-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="eqy-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="汽油车销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'EnergyQY',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '汽油车销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sEnergyType: 1
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sEnergyType: 1
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.eqy-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ydh-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="油电混动销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'EnergyYDH',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '油电混动销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sEnergyType: 3
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sEnergyType: 3
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.ydh-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mpv-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="MPV销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'MPVCar',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: 'MPV销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sSpec: 'mpv'
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sSpec: 'mpv'
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.mpv-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="suv-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="SUV销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'SUVCar',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: 'SUV销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sSpec: 'suv'
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sSpec: 'suv'
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.suv-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="jc-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="紧凑型车销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'jcCar',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '紧凑型车销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sSpec: 'a'
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sSpec: 'a'
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.jc-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="xxc-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="小型车销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'xxCar',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '小型车销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sSpec: 'a0'
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sSpec: 'a0'
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.xxc-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="zdx-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="中大型车销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'zdxCar',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '中大型车销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sSpec: 'c'
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sSpec: 'c'
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.zdx-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="zx-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="中型车销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'ZXCar',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '中型车销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sSpec: 'b'
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sSpec: 'b'
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.zx-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="p10-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="10万以内销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'Price10',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '10万以内销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sPriceType: 1
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sPriceType: 1
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.p10-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="p1015-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="10万-15万销量排行榜销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'Price1015',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '10万-15万销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sPriceType: 2
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sPriceType: 2
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.p1015-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="p1525-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="15万-25万销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'Price1525',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '15万-25万销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sPriceType: 3
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sPriceType: 3
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.p1525-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="p2535-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="25万-35万销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'Price2535',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '25万-35万销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sPriceType: 4
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sPriceType: 4
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.p2535-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="p3550-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="35万-50万销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'Price3550',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '35万-50万销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sPriceType: 1
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sPriceType: 1
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.p3550-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<div class="p10-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
|
||||||
|
<v-btn @click="onTable">查看图表</v-btn>
|
||||||
|
<v-btn @click="goBack">返回</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="d2">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="d3">
|
||||||
|
<v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
|
||||||
|
<template slot="about" slot-scope="text, record">
|
||||||
|
<a-button type="primary" @click="onSale(record)">销量</a-button>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
|
</div>
|
||||||
|
<a-modal title="50万以上销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
|
||||||
|
<div class="modal-table">
|
||||||
|
<a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
|
||||||
|
<a-icon slot="suffixIcon" type="calendar" />
|
||||||
|
</a-range-picker>
|
||||||
|
<a-button @click="onSearch" type="primary" style="margin-left: 40px">查询</a-button>
|
||||||
|
<div class="tb-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarCategory} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import {getBrandName} from "@/api/comm"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
name: 'Price50',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '50万以上销量排行榜',
|
||||||
|
selTime: [],
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sPriceType: 6
|
||||||
|
},
|
||||||
|
opt: {},
|
||||||
|
//表格
|
||||||
|
pagination: {
|
||||||
|
pageSize: 20,
|
||||||
|
},
|
||||||
|
tbData: [],
|
||||||
|
tableLoading: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "排名",
|
||||||
|
dataIndex: "id",
|
||||||
|
key: "id",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型",
|
||||||
|
dataIndex: "seriesname",
|
||||||
|
key: "seriesname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "能源类型",
|
||||||
|
dataIndex: "energys",
|
||||||
|
key: "energys",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "销量",
|
||||||
|
dataIndex: "salescount",
|
||||||
|
key: "salescount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "售价(万元)",
|
||||||
|
dataIndex: "price",
|
||||||
|
key: "price",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "车型相关",
|
||||||
|
dataIndex: "about",
|
||||||
|
key: "about",
|
||||||
|
scopedSlots: { customRender: "about" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//图表
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let o = {token: this.getToken};
|
||||||
|
getCheZhuCountTime(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
sPriceType: 6
|
||||||
|
}
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
onSearch() {
|
||||||
|
this.form.sStartTime = this.selTime[0];
|
||||||
|
this.form.sEndTime = this.selTime[1];
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarCategory(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.tbData = data;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.forEach(ele => {
|
||||||
|
dx.push(ele.seriesname);
|
||||||
|
ds.push(ele.salescount);
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
disabledDate(current) {
|
||||||
|
return current > moment();
|
||||||
|
},
|
||||||
|
//点击销量
|
||||||
|
onSale(value) {
|
||||||
|
let seriesname = value.seriesname;
|
||||||
|
getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
|
||||||
|
let brandName = res.data;
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
path: '/saleRank/seriesInfo',
|
||||||
|
query: {
|
||||||
|
sBrand: brandName,
|
||||||
|
sSeriesName: seriesname
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.p10-outter {
|
||||||
|
width: 1552px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-table {
|
||||||
|
width: 1200px;
|
||||||
|
height: 460px;
|
||||||
|
.tb-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#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: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue