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