yunyang
/
carInsightSystem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

zx-品牌对比-至尾翼

Browse Source
prod
张雄 4 years ago
parent 40cf6e4979
commit e0e8b733cb
16 changed files with 961 additions and 661 deletions
Show Stats Download Patch File Download Diff File

53
src/api/BrandComparison/BbsBrand.js
Unescape View File

@ -0,0 +1,53 @@
import httpService from "@/request"
// 品牌对比-论坛信息概括对比
export function getCount0528C(params) {
let obj = Object.assign({action: 'getCount0528C', sType: 'BbsBrand', iContrastType: 1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 品牌对比-论坛发帖趋势对比
export function getCountTime0528C(params) {
let obj = Object.assign({action: 'getCountTime0528C', sType: 'BbsBrand', iContrastType: 1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 品牌对比-论坛调性对比
export function getAffectionsC(params) {
let obj = Object.assign({action: 'getAffectionsC', sType: 'BbsBrand', iContrastType: 1, iBBsType: 1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 品牌对比-论坛正面/负面话题对比
export function getTopicPosAndTopicNeg0528C(params) {
let obj = Object.assign({action: 'getTopicPosAndTopicNeg0528C', sType: 'BbsBrand', iContrastType: 1, iBBsType: 1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

15
src/api/BrandComparison/BrandWeibo.js
Unescape View File

@ -68,7 +68,20 @@ export function getDirect0528C(params) {
// 品牌对比-用户区域分布
export function getRegionWeiBoC(params) {
let obj = Object.assign({action: 'getRegionWeiBoC', sType: 'BrandWeiBo', iContrastType: 1}, params)
return httpService({
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 品牌对比-微博用户画像
export function getSexMergeWeiBoC(params) {
let obj = Object.assign({action: 'getSexMergeWeiBoC', sType: 'BrandWeiBo', iContrastType: 1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,

78
src/views/BrandComparison/comparisonOfForumPostingTrends/index.vue
Unescape View File

@ -7,33 +7,73 @@
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfForumPostingTrends/index.vue
-->
<template>
<div class="cop-outter">
<v-label-div title="论坛发帖趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
<div class="cop-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="cop-outter">
<v-label-div
title="论坛发帖趋势对比"
:showLine="false"
:eStyle="{ 'border-style': 'none' }"
/>
<div class="cop-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
import { getCountTime0528C } from "@/api/BrandComparison/BbsBrand.js";
import createOpt from "./opt";
export default {
name: "comparisonOfForumPostingTrends",
data() {
return {
opt: createOpt()
}
}
}
name: "comparisonOfForumPostingTrends",
data() {
return {
form: {
token: "",
sBrand: "",
},
opt: {},
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
getCountTime0528C(obj)
.then((res) => {
let data = res.data || [];
let dx = [];
let ds = [];
data.forEach((ele) => {
let key = ele.key;
let value = ele.value;
dx.push(key);
ds.push(value);
});
this.opt = createOpt(dx, ds);
})
},
},
};
</script>
<style lang="less" scoped>
.cop-outter {
width: 944px;
height: 412px;
.cop-inner {
width: 100%;
height: calc(100% - 48px);
}
width: 944px;
height: 412px;
.cop-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

129
src/views/BrandComparison/comparisonOfForumPostingTrends/opt.js
Unescape View File

@ -6,7 +6,38 @@
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
*/
export default function createOpt() {
import { bigNumberTransform } from "@/utils/gol/dataTool"
function createData(ds = []) {
let testData = {}
ds.forEach(item => {
item.forEach(val => {
if (testData[val.key] === undefined) {
testData[val.key] = {
name: val.key,
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [val.value]
}
} else {
testData[val.key].data.push(val.value)
}
})
})
let arr = [];
for(let key in testData) {
arr.push(testData[key])
}
return arr
}
export default function createOpt(dx = [], ds = []) {
let data = createData(ds);
return {
grid: {
left: 16,
@ -39,13 +70,19 @@ export default function createOpt() {
axisTick: {
show: false,
},
axisLabel: {
formatter: (value) => {
let str = value.substring(10, 16)
return str;
}
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
data: dx
},
yAxis: {
type: 'value',
@ -55,6 +92,12 @@ export default function createOpt() {
color: "#fff",
},
},
axisLabel: {
formatter: (value) => {
let str = bigNumberTransform(value);
return str;
}
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
@ -62,86 +105,6 @@ export default function createOpt() {
},
},
},
series: [
{
name: '奥迪',
type: 'line',
stack: 'Total',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
},
{
name: '宝马',
type: 'line',
stack: 'Total',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
},
{
name: '奔驰',
type: 'line',
stack: 'Total',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
},
{
name: '吉利',
type: 'line',
stack: 'Total',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
},
{
name: '大众',
type: 'line',
stack: 'Total',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
},
{
name: '别克',
type: 'line',
stack: 'Total',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
},
]
series: data
}
}

215
src/views/BrandComparison/comparisonOfNegativeTopicsInForums/index.vue
Unescape View File

@ -7,82 +7,169 @@
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
-->
<template>
<div class="cpt-outter">
<v-label-div title="论坛负面话题对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
<div class="cpt-inner">
<div class="cpt-item" v-for="(item,index) in list" :key="index">
<span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
<div class="d1">
<v-echarts :opt="item.drawOpt"></v-echarts>
</div>
</div>
<div class="cpt-outter">
<v-label-div
title="论坛负面话题对比"
:showLine="false"
:eStyle="{ 'border-style': 'none' }"
/>
<div class="cpt-inner">
<div class="cpt-item" v-for="(item, index) in showData" :key="index">
<span class="s1" :style="{ color: colors[index] }">{{
item.name
}}</span>
<div class="d1">
<v-echarts :opt="item.drawOpt"></v-echarts>
</div>
</div>
</div>
</div>
</template>
<script>
import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
import { getTopicPosAndTopicNeg0528C } from "@/api/BrandComparison/BbsBrand.js";
import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
export default {
name: "comparisonOfPositiveTopicsInTheForum",
data() {
return {
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
list: [
{
name: '奥迪',
drawOpt: createSideSingleColumn(['全屏', '高度','长度','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
},
{
name: '宝马',
drawOpt: createSideSingleColumn(['异味', '舒适度','刹车','全景','内容'], [400, 500, 600, 800, 1000], '#bd9312'),
},
{
name: '奔驰',
drawOpt: createSideSingleColumn(['舒适度', '高度','宽度','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
},
{
name: '吉利',
drawOpt: createSideSingleColumn(['底盘', '加速度','全景','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
},
{
name: '大众',
drawOpt: createSideSingleColumn(['刹车', '加速度','大小','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
},
{
name: '别克',
drawOpt: createSideSingleColumn(['空间', '长度','高度','舒适度','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
}
]
}
}
}
name: "comparisonOfPositiveTopicsInTheForum",
data() {
return {
colors: [
"#3373CC",
"#63AECC",
"#54BF93",
"#CC9D12",
"#CC7733",
"#CC5B41",
],
form: {
token: "",
sBrand: "",
},
showData: [],
list: [
{
name: "奥迪",
drawOpt: createSideSingleColumn(
["全屏", "高度", "长度", "空间", "内饰"],
[400, 500, 600, 800, 1000],
"#bd9312"
),
},
{
name: "宝马",
drawOpt: createSideSingleColumn(
["异味", "舒适度", "刹车", "全景", "内容"],
[400, 500, 600, 800, 1000],
"#bd9312"
),
},
{
name: "奔驰",
drawOpt: createSideSingleColumn(
["舒适度", "高度", "宽度", "空间", "内饰"],
[400, 500, 600, 800, 1000],
"#bd9312"
),
},
{
name: "吉利",
drawOpt: createSideSingleColumn(
["底盘", "加速度", "全景", "空间", "内饰"],
[400, 500, 600, 800, 1000],
"#bd9312"
),
},
{
name: "大众",
drawOpt: createSideSingleColumn(
["刹车", "加速度", "大小", "空间", "内饰"],
[400, 500, 600, 800, 1000],
"#bd9312"
),
},
{
name: "别克",
drawOpt: createSideSingleColumn(
["空间", "长度", "高度", "舒适度", "内饰"],
[400, 500, 600, 800, 1000],
"#bd9312"
),
},
],
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getTopicPosAndTopicNeg0528C(obj)
.then((res) => {
let data = res.data || [];
let sourceData = [];
data.forEach( ele => {
let tagArr = [];
let valArr = [];
//ele.value[0]表示正面话题的数据 [1]表示负面话题的数据
ele.value[1].value.forEach( e => {
tagArr.push(e.key);
valArr.push(e.value)
});
let o = {
name: ele.key,
drawOpt: createSideSingleColumn(tagArr,valArr,"#bd9312")
};
sourceData.push(o);
});
this.showData = sourceData;
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
},
};
</script>
<style lang="less" scoped>
.cpt-outter {
width: 100%;
height: 412px;
.cpt-inner {
width: 100%;
height: 412px;
.cpt-inner {
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.cpt-item {
width: 100%;
height: 100%;
.s1 {
padding-left: 16px;
display: block;
height: 40px;
line-height: 40px;
color: #fff;
font-size: 18px;
}
.d1 {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.cpt-item {
width: 100%;
height: 100%;
.s1 {
padding-left: 16px;
display: block;
height: 40px;
line-height: 40px;
color:#fff;
font-size: 18px;
}
.d1 {
width: 100%;
height: calc(100% - 40px);
}
}
height: calc(100% - 40px);
}
}
}
}
</style>

165
src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
Unescape View File

@ -7,82 +7,119 @@
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
-->
<template>
<div class="cpt-outter">
<v-label-div title="论坛正面话题对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
<div class="cpt-inner">
<div class="cpt-item" v-for="(item,index) in list" :key="index">
<span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
<div class="d1">
<v-echarts :opt="item.drawOpt"></v-echarts>
</div>
</div>
<div class="cpt-outter">
<v-label-div
title="论坛正面话题对比"
:showLine="false"
:eStyle="{ 'border-style': 'none' }"
/>
<div class="cpt-inner">
<div class="cpt-item" v-for="(item, index) in showData" :key="index">
<span class="s1" :style="{ color: colors[index] }">{{
item.name
}}</span>
<div class="d1">
<v-echarts :opt="item.drawOpt"></v-echarts>
</div>
</div>
</div>
</div>
</template>
<script>
import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
import { getTopicPosAndTopicNeg0528C } from "@/api/BrandComparison/BbsBrand.js";
import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
export default {
name: "comparisonOfPositiveTopicsInTheForum",
data() {
return {
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
list: [
{
name: '奥迪',
drawOpt: createSideSingleColumn(['全屏', '高度','长度','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
},
{
name: '宝马',
drawOpt: createSideSingleColumn(['异味', '舒适度','刹车','全景','内容'], [400, 500, 600, 800, 1000], '#3373CC'),
},
{
name: '奔驰',
drawOpt: createSideSingleColumn(['舒适度', '高度','宽度','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
},
{
name: '吉利',
drawOpt: createSideSingleColumn(['底盘', '加速度','全景','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
},
{
name: '大众',
drawOpt: createSideSingleColumn(['刹车', '加速度','大小','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
},
{
name: '别克',
drawOpt: createSideSingleColumn(['空间', '长度','高度','舒适度','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
}
]
}
}
}
name: "comparisonOfPositiveTopicsInTheForum",
data() {
return {
colors: [
"#3373CC",
"#63AECC",
"#54BF93",
"#CC9D12",
"#CC7733",
"#CC5B41",
],
form: {
token: "",
sBrand: "",
},
showData: [],
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getTopicPosAndTopicNeg0528C(obj)
.then((res) => {
let data = res.data || [];
let sourceData = [];
data.forEach( ele => {
let tagArr = [];
let valArr = [];
//ele.value[0]表示正面话题的数据 [1]表示负面话题的数据
ele.value[0].value.forEach( e => {
tagArr.push(e.key);
valArr.push(e.value)
});
let o = {
name: ele.key,
drawOpt: createSideSingleColumn(tagArr,valArr,"#3373CC")
};
sourceData.push(o);
});
this.showData = sourceData;
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
},
};
</script>
<style lang="less" scoped>
.cpt-outter {
width: 100%;
height: 412px;
.cpt-inner {
width: 100%;
height: 412px;
.cpt-inner {
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.cpt-item {
width: 100%;
height: 100%;
.s1 {
padding-left: 16px;
display: block;
height: 40px;
line-height: 40px;
color: #fff;
font-size: 18px;
}
.d1 {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.cpt-item {
width: 100%;
height: 100%;
.s1 {
padding-left: 16px;
display: block;
height: 40px;
line-height: 40px;
color:#fff;
font-size: 18px;
}
.d1 {
width: 100%;
height: calc(100% - 40px);
}
}
height: calc(100% - 40px);
}
}
}
}
</style>

165
src/views/BrandComparison/forumTonalComparison/index.vue
Unescape View File

@ -7,70 +7,131 @@
* @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
-->
<template>
<div class="wtc-outter">
<v-label-div title="论坛调性对比" :showLine="false" :eStyle="{'border-style': 'none'}">
</v-label-div>
<div class="wtc-d1">
<div class="dd1" style="margin-left: 16px"><span class="s1"></span><span class="s2">正面</span></div>
<div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#54BF93'}"></span><span class="s2">中性</span></div>
<div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#CC9D12'}"></span><span class="s2">负面</span></div>
</div>
<div class="wtc-inner">
<roundata title="奥迪" color="#3373CC" style="margin-left: 46px"></roundata>
<roundata title="宝马" color="#63AECC" style="margin-left: 110px"></roundata>
<roundata title="奔驰" color="#54BF93" style="margin-left: 110px"></roundata>
<roundata title="吉利" color="#CC9D12" style="margin-left: 110px"></roundata>
<roundata title="大众" color="#CC7733" style="margin-left: 110px"></roundata>
<roundata title="别克" color="#CC5B41" style="margin-left: 110px"></roundata>
</div>
<div class="wtc-outter">
<v-label-div
title="论坛调性对比"
:showLine="false"
:eStyle="{ 'border-style': 'none' }"
>
</v-label-div>
<div class="wtc-d1">
<div class="dd1" style="margin-left: 16px">
<span class="s1"></span><span class="s2">正面</span>
</div>
<div class="dd1" style="margin-left: 24px">
<span class="s1" :style="{ background: '#54BF93' }"></span
><span class="s2">中性</span>
</div>
<div class="dd1" style="margin-left: 24px">
<span class="s1" :style="{ background: '#CC9D12' }"></span
><span class="s2">负面</span>
</div>
</div>
<div class="wtc-inner">
<roundata
v-for="(item,index) in dataSource"
:key="index"
:title="item.Name"
:color="colors[index]"
:style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
:data="item.Data"
></roundata>
</div>
</div>
</template>
<script>
import { getAffectionsC } from "@/api/BrandComparison/BbsBrand.js";
import roundata from "./roundata";
export default {
name: "forumTonalComparison",
components: {
roundata
}
}
name: "forumTonalComparison",
components: {
roundata,
},
data() {
return {
form: {
token: "",
sBrand: "",
},
colors: [
"#3373CC",
"#63AECC",
"#54BF93",
"#CC9D12",
"#CC7733",
"#CC5B41",
],
dataSource: [],
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getAffectionsC(obj)
.then((res) => {
let data = res.data || [];
this.dataSource = data;
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
},
};
</script>
<style lang="less" scoped>
.wtc-outter {
width: 100%;
height: 460px;
margin-top: 16px;
.wtc-d1 {
width: 100%;
height: 460px;
margin-top: 16px;
.wtc-d1 {
width: 100%;
display: flex;
height: 36px;
justify-content: flex-start;
align-items: center;
.dd1 {
display: flex;
justify-content: flex-start;
align-items: center;
}
.s1 {
display: inline-block;
width: 12px;
height: 12px;
background: #3373cc;
}
.s2 {
display: inline-block;
font-size: 12px;
color: #fff;
margin-left: 10px;
}
display: flex;
height: 36px;
justify-content: flex-start;
align-items: center;
.dd1 {
display: flex;
justify-content: flex-start;
align-items: center;
}
.wtc-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
align-items: center;
.s1 {
display: inline-block;
width: 12px;
height: 12px;
background: #3373cc;
}
.s2 {
display: inline-block;
font-size: 12px;
color: #fff;
margin-left: 10px;
}
}
.wtc-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
align-items: center;
}
}
</style>

14
src/views/BrandComparison/forumTonalComparison/roundata/index.vue
Unescape View File

@ -27,10 +27,22 @@ export default {
type: String,
default: "",
},
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(val) {
this.opt = createOpt(val)
},
immediate: true
}
},
data() {
return {
opt: createOpt(),
//opt: createOpt(),
};
},
methods: {

106
src/views/BrandComparison/forumTonalComparison/roundata/opt.js
Unescape View File

@ -7,7 +7,42 @@
* @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
*/
import * as echarts from "echarts";
export default function createOpt() {
function createData(obj = {}) {
if (JSON.stringify(obj) === '{}') {
return;
}
let arr = [];
for (let key in obj) {
let color = "";
if (key === '正面') {
color = "#3373CC"
} else if (key === '负面') {
color = "#b38b14"
} else {
color = "#54BF93"
}
let o = {
value: obj[key],
name: key,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: color
}])
}
}
arr.push(o)
}
return arr
}
export default function createOpt(obj={}) {
let data = createData(obj);
return {
series: [
{
@ -18,52 +53,23 @@ export default function createOpt() {
label: {
show: false,
position: 'center',
lineHeight: 40
lineHeight: 28
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontSize: '18',
color: "#ffff",
fontWeight: 'bold',
formatter: function(p) {
return `${p.data.name}\n25%\n${p.data.value}`
return `${p.data.name}\n${p.percent}%\n${p.data.value}`
}
}
},
labelLine: {
show: false
},
data: [
{ value: 2000, name: '正面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#3373CC'
}])} },
{ value: 1000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
{ value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#b38b14'
}])} },
],
data: data,
},
{
name: 'Access From1',
@ -78,37 +84,7 @@ export default function createOpt() {
show: false
},
center: ['50%', '50%'],//边框位置
data: [
{ value: 2000, name: '正面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#3373CC'
}])} },
{ value: 1000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
{ value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#b38b14'
}])} },
],
data: data,
}
]
}

89
src/views/BrandComparison/summaryAndComparisonOfForumInformation/index.vue
Unescape View File

@ -9,34 +9,34 @@
<template>
<div class="saco-outter">
<v-label-div title="论坛信息概括对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
<div class="saco-item" v-for="(item,index) in list" :key="index">
<span class="s1">{{item.name}}</span>
<div class="saco-item" v-for="(item,index) in sourceData" :key="index">
<span class="s1">{{item.key}}</span>
<div class="d1">
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_lt.png">
<div class="d1-d1">
<span class="ss1">论坛信息量</span>
<span class="ss2">{{item.a}}</span>
<span class="ss2">{{item.Count}}</span>
</div>
</div>
<div class="d1">
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_hdrs.png">
<div class="d1-d1">
<span class="ss1">互动人数</span>
<span class="ss2">{{item.b}}</span>
<span class="ss2">{{item.commentsSum}}</span>
</div>
</div>
<div class="d1">
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_ztl.png">
<div class="d1-d1">
<span class="ss1">论坛主贴量</span>
<span class="ss2">{{item.c}}</span>
<span class="ss2">{{item.zhutieCount}}</span>
</div>
</div>
<div class="d1">
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_pll.png">
<div class="d1-d1">
<span class="ss1">论坛评论量</span>
<span class="ss2">{{item.d}}</span>
<span class="ss2">{{item.interactCount}}</span>
</div>
</div>
</div>
@ -44,54 +44,43 @@
</template>
<script>
import {getCount0528C} from "@/api/BrandComparison/BbsBrand.js"
export default {
name: "summaryAndComparisonOfForumInformation",
data() {
return {
list: [
{
name: '奥迪',
a: 5869,
b: 2345,
c: 45678,
d: 12345
},
{
name: '宝马',
a: 5869,
b: 2345,
c: 45678,
d: 12345
},
{
name: '奔驰',
a: 5869,
b: 2345,
c: 45678,
d: 12345
},
{
name: '吉利',
a: 5869,
b: 2345,
c: 45678,
d: 12345
},
{
name: '大众',
a: 5869,
b: 2345,
c: 45678,
d: 12345
},
{
name: '别克',
a: 5869,
b: 2345,
c: 45678,
d: 12345
}
]
form: {
token: "",
sBrand: ""
},
sourceData: [],
}
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach(ele => {
brands.push(ele.name)
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getCount0528C(obj).then((res) => {
let data = res.data || [];
this.sourceData = data;
resolve(data)
}).catch(() => {
reject(false)
});
});
}
}
}

59
src/views/BrandComparison/userAreaDistribution/index.vue
Unescape View File

@ -13,9 +13,7 @@
:showLine="false"
:eStyle="{ 'border-style': 'none' }"
>
<v-tab-group
:btns="['奥迪', '宝马', '奔驰', '吉利', '大众', '别克']"
></v-tab-group>
<v-tab-group :btns="this.brandArr" @change="handlerTab"></v-tab-group>
</v-label-div>
<div class="wua-inner">
<div class="d1">
@ -36,12 +34,14 @@ export default {
name: "userAreaDistribution",
data() {
return {
opt1: createOptD1(),
opt2: createOptD2(),
opt1: {},
opt2: {},
form: {
token: "",
sBrand: "",
},
dataSource: [],
brandArr: [],
};
},
created() {
@ -56,7 +56,10 @@ export default {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
Promise.all([this.getData()]).then(() => {
// 什么也不执行
this.handlerTab(0);
});
},
getData() {
return new Promise((resolve, reject) => {
@ -64,6 +67,33 @@ export default {
getRegionWeiBoC(obj)
.then((res) => {
let data = res.data || [];
//dx省份 ds数据 dm省份和数据的对象数组
let mapArr = [];
let brandList = [];
data.forEach((ele) => {
let dx = [];
let ds = [];
let dm = this.toArr(ele.Data);
dm.forEach((e) => {
//处理直辖市
e.name = e.name.replace('省', '');
dx.push(e.name);
ds.push(e.value);
});
let o = {
name: ele.Name,
dx: dx,
ds: ds,
dm: dm,
//opt1: createOptD1(),
//opt2: createOptD2(),
//tapIndex: 0
};
brandList.push(ele.Name);
mapArr.push(o);
});
this.dataSource = mapArr;
this.brandArr = brandList;
resolve(data);
})
.catch(() => {
@ -71,6 +101,23 @@ export default {
});
});
},
// 将对象变成数组
toArr(obj) {
let arr = [];
for (let key in obj) {
let o = {
name: key,
value: obj[key] * 1,
};
arr.push(o);
}
return arr;
},
// 切换数据
handlerTab(n) {
this.opt1 = createOptD1(this.dataSource[n].dx, this.dataSource[n].ds);
this.opt2 = createOptD2(this.dataSource[n].dm);
},
},
};
</script>

7
src/views/BrandComparison/userAreaDistribution/opt1.js
Unescape View File

@ -9,7 +9,7 @@
* @FilePath: /data-show/src/views/Index/tailInsight/opt.js
*/
import * as echarts from "echarts";
export default function createOptD1() {
export default function createOptD1(dx = [],ds = []) {
return {
grid: {
left: '4%',
@ -45,7 +45,7 @@ export default function createOptD1() {
},
yAxis: {
type: 'category',
data: ['山西省', '浙江省', '北京市', '江西省', '江苏省', '福建省', '山东省', '天津市'],
data: dx,
axisTick: {
show: false,
},
@ -55,13 +55,14 @@ export default function createOptD1() {
color: "#fff",
},
},
inverse: true
},
series: [
{
name: '2011',
type: 'bar',
barWidth: 24,
data: [500, 1000, 2220, 3000, 4000, 3000,2200, 2600],
data: ds,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#010B19'

38
src/views/BrandComparison/userAreaDistribution/opt2.js
Unescape View File

@ -15,7 +15,7 @@ for (var i = 0; i < provArr.length; i++) {
var str2 = { name: str.replace(re, ''), value: 5 };//拼接对象数组
ini_data.push(str2);
}
export default function createOptD2() {
export default function createOptD2(dm = []) {
return {
tooltip: {
trigger: "item",
@ -59,7 +59,7 @@ export default function createOptD2() {
},
series: [
{
name: "微博区域",
name: "用户区域",
type: "map",
mapType: "china",
roam: false,
@ -95,39 +95,7 @@ export default function createOptD2() {
// areaColor: '#3edffe'
// }
// },
data: [
{
name: "河北省",
value: 1000,
// selected: true,
},
{
name: "浙江省",
value: 1100,
// selected: true
},
{
name: "山东省",
value: 1200,
// selected: true
},
{
name: "山西省",
value: 1300,
// selected: true
},
{
name: "上海市",
value: 1400,
// selected: true
},
{
name: "江苏省",
value: 1500,
// selected: true
}
]
data: dm
}
]
}

223
src/views/BrandComparison/weiboUserPortrait/index.vue
Unescape View File

@ -7,75 +7,190 @@
* @FilePath: /data-show/src/views/BrandComparison/weiboUserPortrait/index.vue
-->
<template>
<div class="wup-outter">
<v-label-div title="微博用户画像" :showLine="false" :eStyle="{'border-style': 'none'}">
<v-tab-group :btns="['奥迪','宝马','奔驰','吉利','大众','别克']"></v-tab-group>
</v-label-div>
<div class="wup-inner">
<div class="d1">
<div class="dd1">
<v-echarts :opt="opt1"></v-echarts>
</div>
<div class="dd2">
<v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '122px' }"></v-label-ctx>
<v-label-ctx label="女性" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '122px' }"></v-label-ctx>
<v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '122px' }"></v-label-ctx>
</div>
</div>
<div class="d1">
<div class="dd1">
<v-echarts :opt="opt2">
<v-echarts :opt="opt2"></v-echarts>
</v-echarts>
</div>
<div class="dd2" style="margin-right: 16px">
<v-label-ctx label="已认证" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '122px' }"></v-label-ctx>
<v-label-ctx label="未认证" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '122px' }"></v-label-ctx>
<v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '122px' }"></v-label-ctx>
</div>
</div>
<div class="wup-outter">
<v-label-div
title="微博用户画像"
:showLine="false"
:eStyle="{ 'border-style': 'none' }"
>
<v-tab-group
:btns="this.brandArr"
@change="handlerTab"
></v-tab-group>
</v-label-div>
<div class="wup-inner">
<div class="d1">
<div class="dd1">
<v-echarts :opt="opt1"></v-echarts>
</div>
<div class="dd2">
<v-label-ctx v-for="(item,index) in showSexData "
:key="index"
:label="item.key"
:cont="item.value"
:percentage="((item.value / totalSexData) * 100).toFixed(2) + '%'"
:color="colors[index]"
:eStyle="{ height: '7.35rem' }"
></v-label-ctx>
</div>
</div>
<div class="d1">
<div class="dd1">
<v-echarts :opt="opt2"></v-echarts>
</div>
<div class="dd2" style="margin-right: 16px">
<v-label-ctx v-for="(item,index) in showAttestData "
:key="index"
:label="item.key"
:cont="item.value"
:percentage="((item.value / totalAttestData) * 100).toFixed(2) + '%'"
:color="colors[index]"
:eStyle="{ height: '7.35rem' }"
></v-label-ctx>
</div>
</div>
</div>
</div>
</template>
<script>
import { getSexMergeWeiBoC } from "@/api/BrandComparison/BrandWeibo.js";
import createOpt1 from "./opt1";
import createOpt2 from "./opt2";
export default {
name: "weiboUserPortrait",
data() {
return {
opt1: createOpt1(),
opt2: createOpt2(),
name: "weiboUserPortrait",
data() {
return {
form: {
token: "",
sBrand: "",
},
opt1: {},
opt2: {},
sourceData: [],
showSexData: [],
totalSexData: 0,
totalAttestData: 0,
showAttestData: [],
brandArr: [],
colors: [
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
],
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getSexMergeWeiBoC(obj)
.then((res) => {
let data = res.data;
let brandList = [];
let dataArr = []; //数组，传给createOpt方法
data.forEach( e => {
let o = {
name: e.Name,
sexData: this.toArr(e.Data.sex), //性别数据 type=arr
attestData: this.toArr(e.Data.attestation) //认证数据 type=arr
}
brandList.push(e.Name); //获取品牌名
dataArr.push(o);
})
this.brandArr = brandList;
this.sourceData = dataArr;
this.doVal(0);
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
// 将对象变成数组
toArr(obj) {
let arr = [];
for (let key in obj) {
let o = {
key: key,
value: obj[key],
};
arr.push(o);
}
return arr;
},
// 给页面变化赋值
doVal(index) {
this.showSexData = this.sourceData[index].sexData;
this.showAttestData = this.sourceData[index].attestData;
this.totalSexData = this.showSexData[0].value*1 + this.showSexData[1].value*1 + this.showSexData[2].value*1;
this.totalAttestData = this.showAttestData[0].value*1+this.showAttestData[1].value*1+this.showAttestData[2].value*1;
this.opt1 = createOpt1(this.showSexData, this.colors);
this.opt2 = createOpt2(this.showAttestData, this.colors);
},
// 切换数据
handlerTab(n) {
this.doVal(n)
},
},
};
</script>
<style lang="less" scoped>
.wup-outter {
width: 944px;
height: 412px;
.wup-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.d1 {
width: 50%;
height: 100%;
display: flex;
justify-content: flex-start;
overflow: hidden;
.dd1 {
width: 260px;
height: 100%;
}
.dd2 {
width: 240px;
height: 100%;
}
}
width: 944px;
height: 412px;
.wup-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.d1 {
width: 50%;
height: 100%;
display: flex;
justify-content: flex-start;
overflow: hidden;
.dd1 {
width: 260px;
height: 100%;
}
.dd2 {
width: 240px;
height: 100%;
}
}
}
}
</style>

93
src/views/BrandComparison/weiboUserPortrait/opt1.js
Unescape View File

@ -6,8 +6,33 @@
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
*/
function createData(ds = [], colors) {
let arr = [];
ds.map((ele, index) => {
let obj = {
value: ele.value,
name: ele.key,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: colors[index]
}])
}
}
arr.push(obj)
})
return arr;
}
import * as echarts from "echarts";
export default function createOpt1() {
export default function createOpt1(ds = [], color = []) {
const data = createData(ds, color);
return {
series: [
{
@ -24,46 +49,18 @@ export default function createOpt1() {
emphasis: {
label: {
show: true,
fontSize: '40',
fontSize: '22',
color: "#ffff",
fontWeight: 'bold',
formatter: (p)=>{
return p.data.name + '\n' + p.data.value;
return p.data.name + '\n' + p.percent + '%' + '\n' + p.data.value;
},
}
},
labelLine: {
show: false
},
data: [
{ value: 2200, name: '男性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#3373CC'
}])} },
{ value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#CC9D12'
}])} },
{ value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
],
data: data,
},
{
name: 'Access From1',
@ -78,35 +75,7 @@ export default function createOpt1() {
show: false
},
center: ['50%', '50%'],//边框位置
data: [
{ value: 2200, name: '男性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#3373CC'
}])} },
{ value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#CC9D12'
}])} },
{ value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
],
data: data,
}
]

173
src/views/BrandComparison/weiboUserPortrait/opt2.js
Unescape View File

@ -6,109 +6,78 @@
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
*/
function createData(ds = [], colors) {
let arr = [];
ds.map((ele, index) => {
let obj = {
value: ele.value,
name: ele.key,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: colors[index]
}])
}
}
arr.push(obj)
})
return arr;
}
import * as echarts from "echarts";
export default function createOpt2() {
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['63%', '77%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
fontSize: '40',
color: "#ffff",
export default function createOpt2(ds = [], color = []) {
const data = createData(ds, color);
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['63%', '77%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
fontSize: '40',
color: "#ffff",
},
emphasis: {
label: {
show: true,
fontSize: '22',
color: "#ffff",
fontWeight: 'bold',
formatter: (p) => {
return p.data.name + '\n' + p.percent + '%' + '\n' + p.data.value;
},
emphasis: {
label: {
show: true,
fontSize: '40',
color: "#ffff",
formatter: (p)=>{
return p.data.name + '\n' + p.data.value;
},
}
},
labelLine: {
show: false
},
data: [
{ value: 2200, name: '已认证', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#3373CC'
}])} },
{ value: 2200, name: '未认证', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#CC9D12'
}])} },
{ value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
],
}
},
labelLine: {
show: false
},
data: data,
},
{
name: 'Access From1',
type: 'pie',
radius: ['80%', '84%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: [
{ value: 2200, name: '男性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#3373CC'
}])} },
{ value: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#CC9D12'
}])} },
{ value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
],
}
]
}
},
{
name: 'Access From1',
type: 'pie',
radius: ['80%', '84%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: data,
}
]
}
}

Write Preview
Loading…
Cancel
Save