diff --git a/src/api/SaleRankMarket/index.js b/src/api/SaleRankMarket/index.js index 1280a1a..f42f44e 100644 --- a/src/api/SaleRankMarket/index.js +++ b/src/api/SaleRankMarket/index.js @@ -35,4 +35,176 @@ export function getSalesCompetitionAnalysis(params) { 'content-type': 'application/x-www-form-urlencoded' } }) +} + +// 品牌总销量TOP20 +export function getSalesBrandTop20(params) { + let obj = Object.assign({action: 'getSalesBrandTop20', sType: 'Marketing'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} +// 车型总销量TOP20 +export function getSalesCarseriesTop20(params) { + let obj = Object.assign({action: 'getSalesCarseriesTop20', sType: 'Marketing'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} +// 乘用车 - 总销量 - 狭义乘用车 +export function getSalesGrowthRatio(params) { + let obj = Object.assign({action: 'getSalesGrowthRatio', sType: 'Marketing'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} +// 乘用车 - 总销量 - 新能源市场 +export function getSalesGrowthRatioByFuel(params) { + let obj = Object.assign({action: 'getSalesGrowthRatioByFuel', sType: 'Marketing'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} + +// 乘用车 - 能源类型 +export function getSalesEnergyTypes(params) { + let obj = Object.assign({action: 'getSalesEnergyTypes', sType: 'Marketing'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} + +// 传统燃油 - 国别占比 +export function getSalesCountrysTypes(params) { + let obj = Object.assign({action: 'getSalesCountrysTypes', sType: 'Marketing'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} +// 传统燃油 - 车型类别 - 轿车同比 +export function getSalesSpecName1TypesBySedan(params) { + let obj = Object.assign({action: 'getSalesSpecName1TypesBySedan', sType: 'Marketing'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} +// 传统燃油 - 车型类别 - suv同比 +export function getSalesSpecName1TypesBySuv(params) { + let obj = Object.assign({action: 'getSalesSpecName1TypesBySuv', sType: 'Marketing'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} +// 传统燃油 - 车型类别 - mpv同比 +export function getSalesSpecName1TypesByMpv(params) { + let obj = Object.assign({action: 'getSalesSpecName1TypesByMpv', sType: 'Marketing'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} +// 传统燃油 - 车型类别 - mpv suv 轿车对比 +export function getSalesSpecName1Types(params) { + let obj = Object.assign({action: 'getSalesSpecName1Types', sType: 'Marketing'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} + +// 传统燃油 - 车型类别 - 细分车型total +export function getSalesSpecNameTypes(params) { + let obj = Object.assign({action: 'getSalesSpecNameTypes', sType: 'Marketing'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} +// 传统燃油 - 车型类别 - 细分车型SUV +export function getSalesSpecNameTypesBySuv(params) { + let obj = Object.assign({action: 'getSalesSpecNameTypesBySuv', sType: 'Marketing'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} +// 传统燃油 - 车型类别 - 细分车型轿车 +export function getSalesSpecNameTypesBySedan(params) { + let obj = Object.assign({action: 'getSalesSpecNameTypesBySedan', sType: 'Marketing'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) +} +// 传统燃油 - 车型类别 - 细分车型MPV +export function getSalesSpecNameTypesByMpv(params) { + let obj = Object.assign({action: 'getSalesSpecNameTypesByMpv', sType: 'Marketing'}, params) + return httpService({ + url: `/api/v6.ashx`, + method: 'post', + data: obj, + headers: { + 'content-type': 'application/x-www-form-urlencoded' + } + }) } \ No newline at end of file diff --git a/src/views/Index/spreadTheSound/index.vue b/src/views/Index/spreadTheSound/index.vue index b49b6df..4928902 100644 --- a/src/views/Index/spreadTheSound/index.vue +++ b/src/views/Index/spreadTheSound/index.vue @@ -61,7 +61,9 @@ export default { this.load = true; let obj = Object.assign({}, this.getCommTime, this.form); getHomeBrandSourceType0528(obj).then((res) => { + let data = res.data; + console.log(data) this.pdata = data; this.handlerData(data); this.load = false; diff --git a/src/views/SaleRank/MarketComp/index.vue b/src/views/SaleRank/MarketComp/index.vue index 6368521..253636f 100644 --- a/src/views/SaleRank/MarketComp/index.vue +++ b/src/views/SaleRank/MarketComp/index.vue @@ -65,6 +65,7 @@ import {getCountryS,getPriceRangeS,getSpecName1,getSeatS,getDisplacementS,getEnergyS} from "@/api/SaleRankMarketCommon"; import {getSalesCompetitionALLList,getSalesCompetitionList,getSalesCompetitionAnalysis} from "@/api/SaleRankMarket"; import createOpt from "./opt" +import {getCheZhuLatestTime} from "@/api/SaleRank" export default { name: 'CitySale', data() { @@ -89,7 +90,7 @@ export default { specs2: [], displacements: [], seats: [], - selTime: ['2022-06','2022-06'], + selTime: ['',''], seriesList: [], //选项数据 countryList: [], @@ -111,7 +112,6 @@ export default { created() { this.form.token = this.getToken; this.getApi(); - this.getData() }, methods: { getApi() { @@ -133,6 +133,10 @@ export default { getSeatS({token: this.getToken}).then(res => { this.seatList = res.data }); + getCheZhuLatestTime({token: this.form.token}).then(res => { + this.selTime = [res.data, res.data]; + this.getData() + }) }, getData() { let obj = { diff --git a/src/views/SaleRank/MarketSaleChina/mscCompChart/index.vue b/src/views/SaleRank/MarketSaleChina/mscCompChart/index.vue index f6db63e..8e47e67 100644 --- a/src/views/SaleRank/MarketSaleChina/mscCompChart/index.vue +++ b/src/views/SaleRank/MarketSaleChina/mscCompChart/index.vue @@ -1,18 +1,245 @@ \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleChina/mscCompChart/opt.js b/src/views/SaleRank/MarketSaleChina/mscCompChart/opt.js new file mode 100644 index 0000000..61d84ab --- /dev/null +++ b/src/views/SaleRank/MarketSaleChina/mscCompChart/opt.js @@ -0,0 +1,69 @@ +import * as echarts from "echarts"; +import { bigNumberTransform } from "@/utils/gol/dataTool" +export default function createOpt(data = [],extraData = []) { + return { + grid: { + left: '6%', + // top: '10%' + }, + xAxis: { + splitLine: false, + scale: true, + axisLabel: { + color: '#FFF' + } + }, + yAxis: { + splitLine: false, + scale: true, + axisLabel: { + formatter: function(value) { + return value / 10000 + '万元' + }, + color: '#FFF' + } + }, + series: [ + { + name: 'total', + data: data, + type: 'scatter', + symbolSize: function (data) { + return data[2] / 600; + }, + label: { + show: true, + formatter: function (param) { + return param.data[3]; + }, + color: '#FFF', + fontSize: 12, + fontWeight: 550, + position: 'inside' + }, + itemStyle: { + color: '#3373CC', + } + }, + { + name: 'extra', + data: extraData, + type: 'scatter', + symbolSize: function (data) { + return data[2] / 200; + }, + label: { + show: true, + formatter: function (param) { + return param.data[3]; + }, + color: '##FFF', + position: 'inside' + }, + itemStyle: { + color: '#CC9D12', + } + }, + ] + } +} diff --git a/src/views/SaleRank/MarketSaleChina/mscEnergyType/index.vue b/src/views/SaleRank/MarketSaleChina/mscEnergyType/index.vue index d790d01..91a1f61 100644 --- a/src/views/SaleRank/MarketSaleChina/mscEnergyType/index.vue +++ b/src/views/SaleRank/MarketSaleChina/mscEnergyType/index.vue @@ -1,18 +1,86 @@ \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleChina/mscEnergyType/opt.js b/src/views/SaleRank/MarketSaleChina/mscEnergyType/opt.js new file mode 100644 index 0000000..d5a1240 --- /dev/null +++ b/src/views/SaleRank/MarketSaleChina/mscEnergyType/opt.js @@ -0,0 +1,146 @@ +/* + * @Author: your name + * @Date: 2021-10-09 11:01:19 + * @LastEditTime: 2021-12-23 16:37:35 + * @LastEditors: Please set LastEditors + * @Description: In User Settings Edit + * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js + */ +import * as echarts from "echarts"; +import {doStr} from "@/utils/gol/dataTool" +import { bigNumberTransform } from "@/utils/gol/dataTool" +let colors = ['#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA' +,'#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA'] +function createData(ds = []) { + let arr = []; + for (let i = 0; i < ds.length; i++) { + let arr1 = ds[i]; + for (let j = 0; j < arr1.length; j++) { + let n = arr.findIndex(ele => { + return ele.name === arr1[j].Key; + }) + if (n === -1) { + let obj = + { + name: arr1[j].Key, + type: 'bar', + stack: 'total', + barWidth: 48, + barGap: "-100%", + emphasis: { + focus: 'series' + }, + label: { + show: true, + position: 'inside', + color: '#FFF', + fontWeight: 600, + formatter: (res) => { + return res.data + '%' + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colors[j] + }, + { + offset: 1, + color: colors[j] + } + ], false); + } + } + + }, + data: [arr1[j].Value] + } + arr.push(obj) + } else { + arr[n].data.push(arr1[j].Value) + } + } + } + return arr; +} +export default function createOpt(dx = [], ds = []) { + const data = createData(ds); + return { + grid: { + left: 10, + right: 10, + bottom: 10, + containLabel: true + }, + tooltip: { + trigger: "axis", + backgroundColor: "#08182F", + color: "#fff", + borderColor: "#3373CC", + textStyle: { + color: "#fff", //设置文字颜色 + }, + extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;" + }, + color: colors, + legend: { + textStyle: { //图例文字的样式 + color: '#fff', + fontSize: 10 + }, + y: 10, + x: 10, + itemWidth: 12, + itemHeight: 12, + borderRadius: 1, //圆角半径 + }, + xAxis: { + type: 'category', + axisLabel :{ + interval:0, + formatter: (value) => { + let res = doStr(value, 8); + return res + } + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + data: dx + }, + yAxis: { + type: 'value', + max: 100, + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + axisLabel: { + formatter: (value) => { + return value + '%' + } + }, + splitLine: { + lineStyle: { + type: "dashed", // y轴分割线类型 + color: "#012b4b", + }, + }, + }, + series: data + } + +} \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleChina/mscTotal/index.vue b/src/views/SaleRank/MarketSaleChina/mscTotal/index.vue index e65ec2c..621a4aa 100644 --- a/src/views/SaleRank/MarketSaleChina/mscTotal/index.vue +++ b/src/views/SaleRank/MarketSaleChina/mscTotal/index.vue @@ -1,9 +1,21 @@ + + \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleChina/mscTotal/totalPassengerVehicle/opt.js b/src/views/SaleRank/MarketSaleChina/mscTotal/totalPassengerVehicle/opt.js new file mode 100644 index 0000000..fd7721b --- /dev/null +++ b/src/views/SaleRank/MarketSaleChina/mscTotal/totalPassengerVehicle/opt.js @@ -0,0 +1,156 @@ + +import { bigNumberTransform } from "@/utils/gol/dataTool" +import * as echarts from "echarts"; +export default function createOpt(firstData = [], secondData = [], percent = []) { + return { + tooltip: { + trigger: "axis", + backgroundColor: "#08182F", + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + }, + borderColor: "#3373CC", + textStyle: { + color: "#fff", //设置文字颜色 + }, + extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;" + }, + grid: { + left: 10, + right: 10, + bottom: 10, + containLabel: true + }, + legend: { + textStyle: { //图例文字的样式 + color: '#fff', + fontSize: 10 + }, + y: 10, + x: 10, + itemWidth: 12, + itemHeight: 12, + borderRadius: 1, //圆角半径 + }, + xAxis: [ + { + type: 'category', + data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',], + axisPointer: { + type: 'shadow' + }, + axisLabel: { + color: '#FFF' + } + } + ], + yAxis: [ + { + type: 'value', + axisLabel: { + formatter: (value) => { + return bigNumberTransform(value); + }, + color: '#FFF' + }, + splitLine:{ + show:false + }, + }, + { + type: 'value', + axisLabel: { + formatter: '{value}%', + color: '#FFF' + }, + splitLine:{ + show:false + }, + } + ], + series: [ + { + name: '2021', + type: 'bar', + barWidth: 20, + tooltip: { + valueFormatter: function (value) { + return value; + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#3373CC' + }, + { + offset: 1, + color: '#3E8CF940' + } + ], false); + } + } + }, + label: { + show: true, + position: 'top', + color: '#FFF' + }, + data: firstData + }, + { + name: '2022', + type: 'bar', + barWidth: 20, + tooltip: { + valueFormatter: function (value) { + return value; + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#54BF93' + }, + { + offset: 1, + color: '#61DDAA30' + } + ], false); + } + } + }, + label: { + show: true, + position: 'top', + color: '#FFF' + }, + data: secondData + }, + { + name: '同比', + type: 'line', + yAxisIndex: 1, + tooltip: { + valueFormatter: function (value) { + return value+'%'; + } + }, + data: percent + } + ] + } +} \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleChina/mscTotal/totalTop20/index.vue b/src/views/SaleRank/MarketSaleChina/mscTotal/totalTop20/index.vue new file mode 100644 index 0000000..7e92849 --- /dev/null +++ b/src/views/SaleRank/MarketSaleChina/mscTotal/totalTop20/index.vue @@ -0,0 +1,109 @@ + + + + + \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleChina/mscTotal/totalTop20/opt.js b/src/views/SaleRank/MarketSaleChina/mscTotal/totalTop20/opt.js new file mode 100644 index 0000000..244f78e --- /dev/null +++ b/src/views/SaleRank/MarketSaleChina/mscTotal/totalTop20/opt.js @@ -0,0 +1,138 @@ +/* + * @Author: your name + * @Date: 2021-10-09 11:01:19 + * @LastEditTime: 2021-12-23 16:37:35 + * @LastEditors: Please set LastEditors + * @Description: In User Settings Edit + * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js + */ +import * as echarts from "echarts"; +import {doStr} from "@/utils/gol/dataTool" +import { bigNumberTransform } from "@/utils/gol/dataTool" +// let colors = ['rgba(84,111,197,1)', 'rgba(145,203,116,1)', 'rgba(90,203,156,1)', 'rgba(248,200,87,1)', 'rgba(237,101,101,1)', "rgba(114,191,222,1)", 'rgba(58,162,114,1)', 'rgba(251,131,81,1)'] +// let colors2 = ['rgba(84,111,197,0.6)', 'rgba(145,203,116,0.6)', 'rgba(90,203,156,0.6)', 'rgba(248,200,87,0.6)', 'rgba(237,101,101,0.6)', "rgba(114,191,222,0.6)", 'rgba(58,162,114,0.6)', 'rgba(251,131,81,0.6)'] +let colors = ['#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA'] +function createData(ds = []) { + let arr = []; + for (let i = 0; i < ds.length; i++) { + let arr1 = ds[i]; + for (let j = 0; j < arr1.length; j++) { + let n = arr.findIndex(ele => { + return ele.name === arr1[j].Key; + }) + if (n === -1) { + let obj = + { + name: arr1[j].Key, + type: 'bar', + stack: 'total', + barWidth: 18, + barGap: "-100%", + emphasis: { + focus: 'series' + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colors[j] + }, + { + offset: 1, + color: colors[j] + } + ], false); + } + } + + }, + data: [arr1[j].Value] + } + arr.push(obj) + } else { + arr[n].data.push(arr1[j].Value) + } + } + } + return arr; +} +export default function createOpt(dx = [], ds = []) { + const data = createData(ds); + return { + grid: { + left: 10, + right: 10, + bottom: 10, + containLabel: true + }, + tooltip: { + trigger: "axis", + backgroundColor: "#08182F", + color: "#fff", + borderColor: "#3373CC", + textStyle: { + color: "#fff", //设置文字颜色 + }, + extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;" + }, + color: colors, + legend: { + textStyle: { //图例文字的样式 + color: '#fff', + fontSize: 10 + }, + y: 10, + x: 10, + itemWidth: 12, + itemHeight: 12, + borderRadius: 1, //圆角半径 + }, + xAxis: { + type: 'category', + axisLabel :{ + interval:0, + formatter: (value) => { + let res = doStr(value, 8); + return res + } + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + data: dx + }, + yAxis: { + type: 'value', + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + axisLabel: { + formatter: (value) => { + let str = bigNumberTransform(value); + return str; + } + }, + splitLine: { + lineStyle: { + type: "dashed", // y轴分割线类型 + color: "#012b4b", + }, + }, + }, + series: data + } + +} \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleChina/mscTotal/totalTraditionCar/index.vue b/src/views/SaleRank/MarketSaleChina/mscTotal/totalTraditionCar/index.vue new file mode 100644 index 0000000..096cf0f --- /dev/null +++ b/src/views/SaleRank/MarketSaleChina/mscTotal/totalTraditionCar/index.vue @@ -0,0 +1,75 @@ + + + + + \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleChina/mscTotal/totalTraditionCar/opt.js b/src/views/SaleRank/MarketSaleChina/mscTotal/totalTraditionCar/opt.js new file mode 100644 index 0000000..fd7721b --- /dev/null +++ b/src/views/SaleRank/MarketSaleChina/mscTotal/totalTraditionCar/opt.js @@ -0,0 +1,156 @@ + +import { bigNumberTransform } from "@/utils/gol/dataTool" +import * as echarts from "echarts"; +export default function createOpt(firstData = [], secondData = [], percent = []) { + return { + tooltip: { + trigger: "axis", + backgroundColor: "#08182F", + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + }, + borderColor: "#3373CC", + textStyle: { + color: "#fff", //设置文字颜色 + }, + extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;" + }, + grid: { + left: 10, + right: 10, + bottom: 10, + containLabel: true + }, + legend: { + textStyle: { //图例文字的样式 + color: '#fff', + fontSize: 10 + }, + y: 10, + x: 10, + itemWidth: 12, + itemHeight: 12, + borderRadius: 1, //圆角半径 + }, + xAxis: [ + { + type: 'category', + data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',], + axisPointer: { + type: 'shadow' + }, + axisLabel: { + color: '#FFF' + } + } + ], + yAxis: [ + { + type: 'value', + axisLabel: { + formatter: (value) => { + return bigNumberTransform(value); + }, + color: '#FFF' + }, + splitLine:{ + show:false + }, + }, + { + type: 'value', + axisLabel: { + formatter: '{value}%', + color: '#FFF' + }, + splitLine:{ + show:false + }, + } + ], + series: [ + { + name: '2021', + type: 'bar', + barWidth: 20, + tooltip: { + valueFormatter: function (value) { + return value; + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#3373CC' + }, + { + offset: 1, + color: '#3E8CF940' + } + ], false); + } + } + }, + label: { + show: true, + position: 'top', + color: '#FFF' + }, + data: firstData + }, + { + name: '2022', + type: 'bar', + barWidth: 20, + tooltip: { + valueFormatter: function (value) { + return value; + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#54BF93' + }, + { + offset: 1, + color: '#61DDAA30' + } + ], false); + } + } + }, + label: { + show: true, + position: 'top', + color: '#FFF' + }, + data: secondData + }, + { + name: '同比', + type: 'line', + yAxisIndex: 1, + tooltip: { + valueFormatter: function (value) { + return value+'%'; + } + }, + data: percent + } + ] + } +} \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstCountryPercent/index.vue b/src/views/SaleRank/MarketSaleTraditional/mstCountryPercent/index.vue index 49d7bbf..9a96c8e 100644 --- a/src/views/SaleRank/MarketSaleTraditional/mstCountryPercent/index.vue +++ b/src/views/SaleRank/MarketSaleTraditional/mstCountryPercent/index.vue @@ -1,18 +1,106 @@ \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstCountryPercent/opt.js b/src/views/SaleRank/MarketSaleTraditional/mstCountryPercent/opt.js new file mode 100644 index 0000000..d5a1240 --- /dev/null +++ b/src/views/SaleRank/MarketSaleTraditional/mstCountryPercent/opt.js @@ -0,0 +1,146 @@ +/* + * @Author: your name + * @Date: 2021-10-09 11:01:19 + * @LastEditTime: 2021-12-23 16:37:35 + * @LastEditors: Please set LastEditors + * @Description: In User Settings Edit + * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js + */ +import * as echarts from "echarts"; +import {doStr} from "@/utils/gol/dataTool" +import { bigNumberTransform } from "@/utils/gol/dataTool" +let colors = ['#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA' +,'#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA'] +function createData(ds = []) { + let arr = []; + for (let i = 0; i < ds.length; i++) { + let arr1 = ds[i]; + for (let j = 0; j < arr1.length; j++) { + let n = arr.findIndex(ele => { + return ele.name === arr1[j].Key; + }) + if (n === -1) { + let obj = + { + name: arr1[j].Key, + type: 'bar', + stack: 'total', + barWidth: 48, + barGap: "-100%", + emphasis: { + focus: 'series' + }, + label: { + show: true, + position: 'inside', + color: '#FFF', + fontWeight: 600, + formatter: (res) => { + return res.data + '%' + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colors[j] + }, + { + offset: 1, + color: colors[j] + } + ], false); + } + } + + }, + data: [arr1[j].Value] + } + arr.push(obj) + } else { + arr[n].data.push(arr1[j].Value) + } + } + } + return arr; +} +export default function createOpt(dx = [], ds = []) { + const data = createData(ds); + return { + grid: { + left: 10, + right: 10, + bottom: 10, + containLabel: true + }, + tooltip: { + trigger: "axis", + backgroundColor: "#08182F", + color: "#fff", + borderColor: "#3373CC", + textStyle: { + color: "#fff", //设置文字颜色 + }, + extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;" + }, + color: colors, + legend: { + textStyle: { //图例文字的样式 + color: '#fff', + fontSize: 10 + }, + y: 10, + x: 10, + itemWidth: 12, + itemHeight: 12, + borderRadius: 1, //圆角半径 + }, + xAxis: { + type: 'category', + axisLabel :{ + interval:0, + formatter: (value) => { + let res = doStr(value, 8); + return res + } + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + data: dx + }, + yAxis: { + type: 'value', + max: 100, + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + axisLabel: { + formatter: (value) => { + return value + '%' + } + }, + splitLine: { + lineStyle: { + type: "dashed", // y轴分割线类型 + color: "#012b4b", + }, + }, + }, + series: data + } + +} \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/index.vue b/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/index.vue index 951e67c..ca07bfc 100644 --- a/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/index.vue +++ b/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/index.vue @@ -1,10 +1,25 @@ + + \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precAutoPercent/opt.js b/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precAutoPercent/opt.js new file mode 100644 index 0000000..5ad1a5f --- /dev/null +++ b/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precAutoPercent/opt.js @@ -0,0 +1,147 @@ +/* + * @Author: your name + * @Date: 2021-10-09 11:01:19 + * @LastEditTime: 2021-12-23 16:37:35 + * @LastEditors: Please set LastEditors + * @Description: In User Settings Edit + * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js + */ +import * as echarts from "echarts"; +import {doStr} from "@/utils/gol/dataTool" +import { bigNumberTransform } from "@/utils/gol/dataTool" +let colors2 = ['#3373CC60', '#63AECC60', '#54BF9360', '#CC9D1260', '#FFDE9560', '#78D4F860', 'rgba(58,162,114,0.6)', 'rgba(251,131,81,0.6)'] +let colors = ['#3373CC','#63AECC','#54BF93','#CC9D12','#FFDE95','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA'] +function createData(ds = []) { + let arr = []; + for (let i = 0; i < ds.length; i++) { + let arr1 = ds[i]; + for (let j = 0; j < arr1.length; j++) { + let n = arr.findIndex(ele => { + return ele.name === arr1[j].Key; + }) + if (n === -1) { + let obj = + { + name: arr1[j].Key, + type: 'bar', + stack: 'total', + barWidth: 30, + barGap: "-100%", + emphasis: { + focus: 'series' + }, + label: { + show: true, + position: 'inside', + color: '#FFF', + fontWeight: 600, + fontSize: 10, + formatter: (res) => { + return res.data + '%' + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colors[j] + }, + { + offset: 1, + color: colors2[j] + } + ], false); + } + } + }, + data: [arr1[j].Value] + } + arr.push(obj) + } else { + arr[n].data.push(arr1[j].Value) + } + } + } + return arr; +} +export default function createOpt(dx = [], ds = []) { + const data = createData(ds); + return { + grid: { + left: 10, + right: 10, + bottom: 10, + containLabel: true + }, + tooltip: { + trigger: "axis", + backgroundColor: "#08182F", + color: "#fff", + borderColor: "#3373CC", + textStyle: { + color: "#fff", //设置文字颜色 + }, + extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;" + }, + color: colors, + legend: { + textStyle: { //图例文字的样式 + color: '#fff', + fontSize: 10 + }, + y: 10, + x: 10, + itemWidth: 12, + itemHeight: 12, + borderRadius: 1, //圆角半径 + }, + xAxis: { + type: 'category', + axisLabel :{ + interval:0, + formatter: (value) => { + let res = doStr(value, 8); + return res + } + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + data: dx + }, + yAxis: { + type: 'value', + min: 0, + max: 100, + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + axisLabel: { + formatter: (value) => { + return value + '%'; + } + }, + splitLine: { + lineStyle: { + type: "dashed", // y轴分割线类型 + color: "#012b4b", + }, + }, + }, + series: data + } + +} \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precMpvPercent/index.vue b/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precMpvPercent/index.vue new file mode 100644 index 0000000..fb71a6a --- /dev/null +++ b/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precMpvPercent/index.vue @@ -0,0 +1,106 @@ + + + + + \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precMpvPercent/opt.js b/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precMpvPercent/opt.js new file mode 100644 index 0000000..5ad1a5f --- /dev/null +++ b/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precMpvPercent/opt.js @@ -0,0 +1,147 @@ +/* + * @Author: your name + * @Date: 2021-10-09 11:01:19 + * @LastEditTime: 2021-12-23 16:37:35 + * @LastEditors: Please set LastEditors + * @Description: In User Settings Edit + * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js + */ +import * as echarts from "echarts"; +import {doStr} from "@/utils/gol/dataTool" +import { bigNumberTransform } from "@/utils/gol/dataTool" +let colors2 = ['#3373CC60', '#63AECC60', '#54BF9360', '#CC9D1260', '#FFDE9560', '#78D4F860', 'rgba(58,162,114,0.6)', 'rgba(251,131,81,0.6)'] +let colors = ['#3373CC','#63AECC','#54BF93','#CC9D12','#FFDE95','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA'] +function createData(ds = []) { + let arr = []; + for (let i = 0; i < ds.length; i++) { + let arr1 = ds[i]; + for (let j = 0; j < arr1.length; j++) { + let n = arr.findIndex(ele => { + return ele.name === arr1[j].Key; + }) + if (n === -1) { + let obj = + { + name: arr1[j].Key, + type: 'bar', + stack: 'total', + barWidth: 30, + barGap: "-100%", + emphasis: { + focus: 'series' + }, + label: { + show: true, + position: 'inside', + color: '#FFF', + fontWeight: 600, + fontSize: 10, + formatter: (res) => { + return res.data + '%' + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colors[j] + }, + { + offset: 1, + color: colors2[j] + } + ], false); + } + } + }, + data: [arr1[j].Value] + } + arr.push(obj) + } else { + arr[n].data.push(arr1[j].Value) + } + } + } + return arr; +} +export default function createOpt(dx = [], ds = []) { + const data = createData(ds); + return { + grid: { + left: 10, + right: 10, + bottom: 10, + containLabel: true + }, + tooltip: { + trigger: "axis", + backgroundColor: "#08182F", + color: "#fff", + borderColor: "#3373CC", + textStyle: { + color: "#fff", //设置文字颜色 + }, + extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;" + }, + color: colors, + legend: { + textStyle: { //图例文字的样式 + color: '#fff', + fontSize: 10 + }, + y: 10, + x: 10, + itemWidth: 12, + itemHeight: 12, + borderRadius: 1, //圆角半径 + }, + xAxis: { + type: 'category', + axisLabel :{ + interval:0, + formatter: (value) => { + let res = doStr(value, 8); + return res + } + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + data: dx + }, + yAxis: { + type: 'value', + min: 0, + max: 100, + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + axisLabel: { + formatter: (value) => { + return value + '%'; + } + }, + splitLine: { + lineStyle: { + type: "dashed", // y轴分割线类型 + color: "#012b4b", + }, + }, + }, + series: data + } + +} \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precPercent/index.vue b/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precPercent/index.vue new file mode 100644 index 0000000..d9305f8 --- /dev/null +++ b/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precPercent/index.vue @@ -0,0 +1,105 @@ + + + + + \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precPercent/opt.js b/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precPercent/opt.js new file mode 100644 index 0000000..42d4327 --- /dev/null +++ b/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precPercent/opt.js @@ -0,0 +1,147 @@ +/* + * @Author: your name + * @Date: 2021-10-09 11:01:19 + * @LastEditTime: 2021-12-23 16:37:35 + * @LastEditors: Please set LastEditors + * @Description: In User Settings Edit + * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js + */ +import * as echarts from "echarts"; +import {doStr} from "@/utils/gol/dataTool" +import { bigNumberTransform } from "@/utils/gol/dataTool" +let colors = ['#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090', +'#62DDAA','#9DF5CA','#9DF5CA','#FFD470','#FFDE95','#FFEBBF','#E19D62','#F7B075','#FDC388','#FDD69B'] +function createData(ds = []) { + let arr = []; + for (let i = 0; i < ds.length; i++) { + let arr1 = ds[i]; + for (let j = 0; j < arr1.length; j++) { + let n = arr.findIndex(ele => { + return ele.name === arr1[j].Key; + }) + if (n === -1) { + let obj = + { + name: arr1[j].Key, + type: 'bar', + stack: 'total', + barWidth: 36, + barGap: "-100%", + emphasis: { + focus: 'series' + }, + label: { + show: true, + position: 'inside', + color: '#FFF', + fontWeight: 600, + fontSize: 12, + formatter: (res) => { + return res.data + '%' + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colors[j] + }, + { + offset: 1, + color: colors[j] + } + ], false); + } + } + }, + data: [arr1[j].Value] + } + arr.push(obj) + } else { + arr[n].data.push(arr1[j].Value) + } + } + } + return arr; +} +export default function createOpt(dx = [], ds = []) { + const data = createData(ds); + return { + grid: { + left: 10, + right: 10, + bottom: 10, + containLabel: true + }, + tooltip: { + trigger: "axis", + backgroundColor: "#08182F", + color: "#fff", + borderColor: "#3373CC", + textStyle: { + color: "#fff", //设置文字颜色 + }, + extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;" + }, + color: colors, + legend: { + textStyle: { //图例文字的样式 + color: '#fff', + fontSize: 10 + }, + y: 10, + x: 10, + itemWidth: 12, + itemHeight: 12, + borderRadius: 1, //圆角半径 + }, + xAxis: { + type: 'category', + axisLabel :{ + interval:0, + formatter: (value) => { + let res = doStr(value, 8); + return res + } + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + data: dx + }, + yAxis: { + type: 'value', + min: 0, + max: 100, + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + axisLabel: { + formatter: (value) => { + return value + '%'; + } + }, + splitLine: { + lineStyle: { + type: "dashed", // y轴分割线类型 + color: "#012b4b", + }, + }, + }, + series: data + } + +} \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precSuvPercent/index.vue b/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precSuvPercent/index.vue new file mode 100644 index 0000000..453abbc --- /dev/null +++ b/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precSuvPercent/index.vue @@ -0,0 +1,106 @@ + + + + + \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precSuvPercent/opt.js b/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precSuvPercent/opt.js new file mode 100644 index 0000000..b62661a --- /dev/null +++ b/src/views/SaleRank/MarketSaleTraditional/mstPrecisionType/precSuvPercent/opt.js @@ -0,0 +1,147 @@ +/* + * @Author: your name + * @Date: 2021-10-09 11:01:19 + * @LastEditTime: 2021-12-23 16:37:35 + * @LastEditors: Please set LastEditors + * @Description: In User Settings Edit + * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js + */ +import * as echarts from "echarts"; +import {doStr} from "@/utils/gol/dataTool" +import { bigNumberTransform } from "@/utils/gol/dataTool" +let colors2 = ['#3373CC60', '#63AECC60', '#54BF9360', '#CC9D1260', '#FFDE9560', "rgba(114,191,222,0.6)", 'rgba(58,162,114,0.6)', 'rgba(251,131,81,0.6)'] +let colors = ['#3373CC','#63AECC','#54BF93','#CC9D12','#FFDE95','#FFDE95','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA'] +function createData(ds = []) { + let arr = []; + for (let i = 0; i < ds.length; i++) { + let arr1 = ds[i]; + for (let j = 0; j < arr1.length; j++) { + let n = arr.findIndex(ele => { + return ele.name === arr1[j].Key; + }) + if (n === -1) { + let obj = + { + name: arr1[j].Key, + type: 'bar', + stack: 'total', + barWidth: 30, + barGap: "-100%", + emphasis: { + focus: 'series' + }, + label: { + show: true, + position: 'inside', + color: '#FFF', + fontWeight: 600, + fontSize: 10, + formatter: (res) => { + return res.data + '%' + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colors[j] + }, + { + offset: 1, + color: colors2[j] + } + ], false); + } + } + }, + data: [arr1[j].Value] + } + arr.push(obj) + } else { + arr[n].data.push(arr1[j].Value) + } + } + } + return arr; +} +export default function createOpt(dx = [], ds = []) { + const data = createData(ds); + return { + grid: { + left: 10, + right: 10, + bottom: 10, + containLabel: true + }, + tooltip: { + trigger: "axis", + backgroundColor: "#08182F", + color: "#fff", + borderColor: "#3373CC", + textStyle: { + color: "#fff", //设置文字颜色 + }, + extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;" + }, + color: colors, + legend: { + textStyle: { //图例文字的样式 + color: '#fff', + fontSize: 10 + }, + y: 10, + x: 10, + itemWidth: 12, + itemHeight: 12, + borderRadius: 1, //圆角半径 + }, + xAxis: { + type: 'category', + axisLabel :{ + interval:0, + formatter: (value) => { + let res = doStr(value, 8); + return res + } + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + data: dx + }, + yAxis: { + type: 'value', + min: 0, + max: 100, + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + axisLabel: { + formatter: (value) => { + return value + '%'; + } + }, + splitLine: { + lineStyle: { + type: "dashed", // y轴分割线类型 + color: "#012b4b", + }, + }, + }, + series: data + } + +} \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/index.vue b/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/index.vue index 35d4bf8..bfc1408 100644 --- a/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/index.vue +++ b/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/index.vue @@ -1,10 +1,25 @@ + + \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesAuto/opt.js b/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesAuto/opt.js new file mode 100644 index 0000000..fd7721b --- /dev/null +++ b/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesAuto/opt.js @@ -0,0 +1,156 @@ + +import { bigNumberTransform } from "@/utils/gol/dataTool" +import * as echarts from "echarts"; +export default function createOpt(firstData = [], secondData = [], percent = []) { + return { + tooltip: { + trigger: "axis", + backgroundColor: "#08182F", + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + }, + borderColor: "#3373CC", + textStyle: { + color: "#fff", //设置文字颜色 + }, + extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;" + }, + grid: { + left: 10, + right: 10, + bottom: 10, + containLabel: true + }, + legend: { + textStyle: { //图例文字的样式 + color: '#fff', + fontSize: 10 + }, + y: 10, + x: 10, + itemWidth: 12, + itemHeight: 12, + borderRadius: 1, //圆角半径 + }, + xAxis: [ + { + type: 'category', + data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',], + axisPointer: { + type: 'shadow' + }, + axisLabel: { + color: '#FFF' + } + } + ], + yAxis: [ + { + type: 'value', + axisLabel: { + formatter: (value) => { + return bigNumberTransform(value); + }, + color: '#FFF' + }, + splitLine:{ + show:false + }, + }, + { + type: 'value', + axisLabel: { + formatter: '{value}%', + color: '#FFF' + }, + splitLine:{ + show:false + }, + } + ], + series: [ + { + name: '2021', + type: 'bar', + barWidth: 20, + tooltip: { + valueFormatter: function (value) { + return value; + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#3373CC' + }, + { + offset: 1, + color: '#3E8CF940' + } + ], false); + } + } + }, + label: { + show: true, + position: 'top', + color: '#FFF' + }, + data: firstData + }, + { + name: '2022', + type: 'bar', + barWidth: 20, + tooltip: { + valueFormatter: function (value) { + return value; + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#54BF93' + }, + { + offset: 1, + color: '#61DDAA30' + } + ], false); + } + } + }, + label: { + show: true, + position: 'top', + color: '#FFF' + }, + data: secondData + }, + { + name: '同比', + type: 'line', + yAxisIndex: 1, + tooltip: { + valueFormatter: function (value) { + return value+'%'; + } + }, + data: percent + } + ] + } +} \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesMpv/index.vue b/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesMpv/index.vue new file mode 100644 index 0000000..9e6448f --- /dev/null +++ b/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesMpv/index.vue @@ -0,0 +1,74 @@ + + + + + \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesMpv/opt.js b/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesMpv/opt.js new file mode 100644 index 0000000..fd7721b --- /dev/null +++ b/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesMpv/opt.js @@ -0,0 +1,156 @@ + +import { bigNumberTransform } from "@/utils/gol/dataTool" +import * as echarts from "echarts"; +export default function createOpt(firstData = [], secondData = [], percent = []) { + return { + tooltip: { + trigger: "axis", + backgroundColor: "#08182F", + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + }, + borderColor: "#3373CC", + textStyle: { + color: "#fff", //设置文字颜色 + }, + extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;" + }, + grid: { + left: 10, + right: 10, + bottom: 10, + containLabel: true + }, + legend: { + textStyle: { //图例文字的样式 + color: '#fff', + fontSize: 10 + }, + y: 10, + x: 10, + itemWidth: 12, + itemHeight: 12, + borderRadius: 1, //圆角半径 + }, + xAxis: [ + { + type: 'category', + data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',], + axisPointer: { + type: 'shadow' + }, + axisLabel: { + color: '#FFF' + } + } + ], + yAxis: [ + { + type: 'value', + axisLabel: { + formatter: (value) => { + return bigNumberTransform(value); + }, + color: '#FFF' + }, + splitLine:{ + show:false + }, + }, + { + type: 'value', + axisLabel: { + formatter: '{value}%', + color: '#FFF' + }, + splitLine:{ + show:false + }, + } + ], + series: [ + { + name: '2021', + type: 'bar', + barWidth: 20, + tooltip: { + valueFormatter: function (value) { + return value; + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#3373CC' + }, + { + offset: 1, + color: '#3E8CF940' + } + ], false); + } + } + }, + label: { + show: true, + position: 'top', + color: '#FFF' + }, + data: firstData + }, + { + name: '2022', + type: 'bar', + barWidth: 20, + tooltip: { + valueFormatter: function (value) { + return value; + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#54BF93' + }, + { + offset: 1, + color: '#61DDAA30' + } + ], false); + } + } + }, + label: { + show: true, + position: 'top', + color: '#FFF' + }, + data: secondData + }, + { + name: '同比', + type: 'line', + yAxisIndex: 1, + tooltip: { + valueFormatter: function (value) { + return value+'%'; + } + }, + data: percent + } + ] + } +} \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesSuv/index.vue b/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesSuv/index.vue new file mode 100644 index 0000000..a1c7a94 --- /dev/null +++ b/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesSuv/index.vue @@ -0,0 +1,74 @@ + + + + + \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesSuv/opt.js b/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesSuv/opt.js new file mode 100644 index 0000000..fd7721b --- /dev/null +++ b/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesSuv/opt.js @@ -0,0 +1,156 @@ + +import { bigNumberTransform } from "@/utils/gol/dataTool" +import * as echarts from "echarts"; +export default function createOpt(firstData = [], secondData = [], percent = []) { + return { + tooltip: { + trigger: "axis", + backgroundColor: "#08182F", + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + }, + borderColor: "#3373CC", + textStyle: { + color: "#fff", //设置文字颜色 + }, + extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;" + }, + grid: { + left: 10, + right: 10, + bottom: 10, + containLabel: true + }, + legend: { + textStyle: { //图例文字的样式 + color: '#fff', + fontSize: 10 + }, + y: 10, + x: 10, + itemWidth: 12, + itemHeight: 12, + borderRadius: 1, //圆角半径 + }, + xAxis: [ + { + type: 'category', + data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',], + axisPointer: { + type: 'shadow' + }, + axisLabel: { + color: '#FFF' + } + } + ], + yAxis: [ + { + type: 'value', + axisLabel: { + formatter: (value) => { + return bigNumberTransform(value); + }, + color: '#FFF' + }, + splitLine:{ + show:false + }, + }, + { + type: 'value', + axisLabel: { + formatter: '{value}%', + color: '#FFF' + }, + splitLine:{ + show:false + }, + } + ], + series: [ + { + name: '2021', + type: 'bar', + barWidth: 20, + tooltip: { + valueFormatter: function (value) { + return value; + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#3373CC' + }, + { + offset: 1, + color: '#3E8CF940' + } + ], false); + } + } + }, + label: { + show: true, + position: 'top', + color: '#FFF' + }, + data: firstData + }, + { + name: '2022', + type: 'bar', + barWidth: 20, + tooltip: { + valueFormatter: function (value) { + return value; + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#54BF93' + }, + { + offset: 1, + color: '#61DDAA30' + } + ], false); + } + } + }, + label: { + show: true, + position: 'top', + color: '#FFF' + }, + data: secondData + }, + { + name: '同比', + type: 'line', + yAxisIndex: 1, + tooltip: { + valueFormatter: function (value) { + return value+'%'; + } + }, + data: percent + } + ] + } +} \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesTotal/index.vue b/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesTotal/index.vue new file mode 100644 index 0000000..ecf073b --- /dev/null +++ b/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesTotal/index.vue @@ -0,0 +1,108 @@ + + + + + \ No newline at end of file diff --git a/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesTotal/opt.js b/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesTotal/opt.js new file mode 100644 index 0000000..dec374b --- /dev/null +++ b/src/views/SaleRank/MarketSaleTraditional/mstSeriesType/seriesTotal/opt.js @@ -0,0 +1,149 @@ +/* + * @Author: your name + * @Date: 2021-10-09 11:01:19 + * @LastEditTime: 2021-12-23 16:37:35 + * @LastEditors: Please set LastEditors + * @Description: In User Settings Edit + * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js + */ +import * as echarts from "echarts"; +import {doStr} from "@/utils/gol/dataTool" +import { bigNumberTransform } from "@/utils/gol/dataTool" +// let colors = ['rgba(84,111,197,1)', 'rgba(145,203,116,1)', 'rgba(90,203,156,1)', 'rgba(248,200,87,1)', 'rgba(237,101,101,1)', "rgba(114,191,222,1)", 'rgba(58,162,114,1)', 'rgba(251,131,81,1)'] +let colors2 = ['#3373CC60', '#63AECC60', '#54BF9360', 'rgba(248,200,87,0.6)', 'rgba(237,101,101,0.6)', "rgba(114,191,222,0.6)", 'rgba(58,162,114,0.6)', 'rgba(251,131,81,0.6)'] +let colors = ['#3373CC','#63AECC','#54BF93','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA'] +function createData(ds = []) { + let arr = []; + for (let i = 0; i < ds.length; i++) { + let arr1 = ds[i]; + for (let j = 0; j < arr1.length; j++) { + let n = arr.findIndex(ele => { + return ele.name === arr1[j].Key; + }) + if (n === -1) { + let obj = + { + name: arr1[j].Key, + type: 'bar', + stack: 'total', + barWidth: 36, + barGap: "-100%", + emphasis: { + focus: 'series' + }, + label: { + show: true, + position: 'inside', + color: '#FFF', + fontWeight: 600, + fontSize: 10, + formatter: (res) => { + return res.data + '%' + } + }, + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function () { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colors[j] + }, + { + offset: 1, + color: colors2[j] + } + ], false); + } + } + + }, + data: [arr1[j].Value] + } + arr.push(obj) + } else { + arr[n].data.push(arr1[j].Value) + } + } + } + return arr; +} +export default function createOpt(dx = [], ds = []) { + const data = createData(ds); + return { + grid: { + left: 10, + right: 10, + bottom: 10, + containLabel: true + }, + tooltip: { + trigger: "axis", + backgroundColor: "#08182F", + color: "#fff", + borderColor: "#3373CC", + textStyle: { + color: "#fff", //设置文字颜色 + }, + extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;" + }, + color: colors, + legend: { + textStyle: { //图例文字的样式 + color: '#fff', + fontSize: 10 + }, + y: 10, + x: 10, + itemWidth: 12, + itemHeight: 12, + borderRadius: 1, //圆角半径 + }, + xAxis: { + type: 'category', + axisLabel :{ + interval:0, + formatter: (value) => { + let res = doStr(value, 8); + return res + } + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + data: dx + }, + yAxis: { + type: 'value', + min: 0, + max: 100, + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + axisLabel: { + formatter: (value) => { + return value + '%'; + } + }, + splitLine: { + lineStyle: { + type: "dashed", // y轴分割线类型 + color: "#012b4b", + }, + }, + }, + series: data + } + +} \ No newline at end of file