prod
parent
5649e954e6
commit
7c86879345
@ -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,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,185 @@
|
||||
<template>
|
||||
<div class="wxc-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 createOpt from "./opt"
|
||||
import moment from "moment";
|
||||
export default {
|
||||
name: 'wxCar',
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
time: '微型车销量排行榜',
|
||||
selTime: [],
|
||||
form: {
|
||||
token: '',
|
||||
sStartTime: '',
|
||||
sEndTime: '',
|
||||
sTimeType: 4,
|
||||
sSpec: 'a00'
|
||||
},
|
||||
opt: {},
|
||||
//表格
|
||||
pagination: {
|
||||
pageSize: 20,
|
||||
},
|
||||
tbData: [],
|
||||
tableLoading: false,
|
||||
columns: [
|
||||
{
|
||||
title: "排名",
|
||||
dataIndex: "id",
|
||||
key: "id",
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: "车型",
|
||||
dataIndex: "seriesname",
|
||||
key: "seriesname",
|
||||
},
|
||||
{
|
||||
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: 'a00'
|
||||
}
|
||||
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 id = value.seriesid
|
||||
console.log(id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.wxc-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,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,55 @@
|
||||
<template>
|
||||
<div class="sinfo-outter">
|
||||
<v-label-div :title="time">
|
||||
<v-btn @click="onTable">查看图表</v-btn>
|
||||
<v-btn @click="goBack">返回</v-btn>
|
||||
</v-label-div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getCheZhuCarSeriesList} from "@/api/SaleRank"
|
||||
export default {
|
||||
name: "SeriesInfo",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: '',
|
||||
iPageIndex: 1,
|
||||
iPageSize: 20,
|
||||
sBrand: '',
|
||||
sSeriesName: '',
|
||||
},
|
||||
time: '销量'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form.token = this.getToken;
|
||||
// this.form.sBrand = this.$route.query.sBrand || "";
|
||||
// this.form.sSeriesName = this.$route.query.sSeriesName || "";
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
let obj = Object.assign(this.form, {});
|
||||
getCheZhuCarSeriesList(obj).then(res => {
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
//查看图表
|
||||
onTable() {},
|
||||
//返回
|
||||
goBack() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.sinfo-outter {
|
||||
width: 1552px;
|
||||
// height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue