prod
lily.zhang 3 years ago
parent e6bb46be28
commit 36a36b779c

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-28 16:40:48
* @LastEditTime: 2021-11-01 15:49:49
* @LastEditTime: 2021-11-01 16:39:32
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/api/ModelInsight/index.js
@ -109,3 +109,40 @@ export function getCountTime0528(params) {
}
})
}
// 车型-论坛传播态势
export function getBbsCountTime(params) {
let obj = Object.assign({action: 'getBbsCountTime', sType: 'BbsSeries'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 车型-调性占比
export function getAffections2(params) {
let obj = Object.assign({action: 'getAffections', sType: 'BbsSeries', 'iBBsType':1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 车型-阅读量占比分布
export function getClicksDistribution(params) {
let obj = Object.assign({action: 'getClicksDistribution', sType: 'BbsSeries', 'iBBsType':1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

@ -1,7 +1,7 @@
<!--
* @Author: xw
* @Date: 2021-10-12 09:32:35
* @LastEditTime: 2021-11-01 14:46:34
* @LastEditTime: 2021-11-01 16:04:18
* @LastEditors: Please set LastEditors
* @Description: 舆情传播趋势
* @FilePath: /data-show/src/views/BrandInsight/titsopo/index.vue
@ -16,15 +16,15 @@
<vLabel-div title="舆情传播趋势"></vLabel-div>
<div class="tit-bd">
<v-echarts :opt="opt" @getData="clickEchars"></v-echarts>
</div>
</div>
</div>
</div>
</template>
<script>
import {getSourcetypeTime} from "@/api/BrandInsight"
import { getSourcetypeTime } from "@/api/BrandInsight";
import moment from "moment";
import createOpt from "./opt"
import createOpt from "./opt";
export default {
name: "titsopo",
props: ["brand"],
@ -32,58 +32,77 @@ export default {
return {
load: false,
form: {
token: "",
sBrand: '奥迪',
token: "",
sBrand: "奥迪",
},
opt: {}
}
opt: {},
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || this.brand;
this.getData()
this.getData();
},
methods: {
//
getData() {
let obj = Object.assign({},this.getCtime2, this.form);
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getSourcetypeTime(obj).then(res => {
getSourcetypeTime(obj).then((res) => {
let data = res.data || [];
let dx = [];
let ds = [];
data.forEach(ele => {
data.forEach((ele) => {
let time = ele.Time;
let value = ele.Data;
dx.push(time);
ds.push(value);
})
});
this.opt = createOpt(dx, ds);
this.load = false;
})
});
},
//
goIDE() {
this.$router.push({path: '/industryDataExport',query: {token: this.getToken, action: 'getList', sType: 'BrandData', brand: this.form.sBrand, title: "品牌-行业数据" }})
this.$router.push({
path: "/industryDataExport",
query: {
token: this.getToken,
action: "getList",
sType: "BrandData",
brand: this.form.sBrand,
title: "品牌-行业数据",
},
});
},
//
//
clickEchars(data = []) {
let qudao = [];
let startTime = "";
let endTime = moment(new Date()).format('YYYY-MM-DD hh:mm:ss');
data.forEach(ele => {
let seriesName = ele.seriesName;
startTime = ele.name;
qudao.push(seriesName);
})
let endTime = moment(new Date()).format("YYYY-MM-DD hh:mm:ss");
data.forEach((ele) => {
let seriesName = ele.seriesName;
startTime = ele.name;
qudao.push(seriesName);
});
let sTimeType = 4;
this.$router.push({
path: "/industryDataExport",
query: { startTime, endTime, qudao, sTimeType, token: this.getToken, action: 'getList', sType: 'BrandData', brand: this.form.sBrand, title: "品牌-行业数据" },
query: {
startTime,
endTime,
qudao,
sTimeType,
token: this.getToken,
action: "getList",
sType: "BrandData",
brand: this.form.sBrand,
title: "品牌-行业数据",
},
});
}
}
}
},
},
};
</script>
<style lang="less" scoped>
@ -94,7 +113,7 @@ export default {
.tit-header {
width: 100%;
height: 48px;
background: linear-gradient(270deg, #07192f 0%, #010B19 100%);
background: linear-gradient(270deg, #07192f 0%, #010b19 100%);
display: flex;
justify-content: flex-end;
align-items: center;
@ -103,7 +122,7 @@ export default {
width: 100%;
height: 490px;
margin-top: 16px;
border: 2px solid #0F2A4D;
border: 2px solid #0f2a4d;
.tit-bd {
width: 100%;
height: calc(100% - 48px);

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-25 13:12:20
* @LastEditTime: 2021-11-01 15:55:24
* @LastEditTime: 2021-11-01 16:39:01
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/ModelInsight/index.vue
@ -45,8 +45,8 @@
</v-label-div>
<div class="bdl-d4-bd">
<mlForumCommunicationTrend :brand="brand" :model="model"></mlForumCommunicationTrend>
<mlForumHotTopicDirection></mlForumHotTopicDirection>
<mlSpreadTOPmodels></mlSpreadTOPmodels>
<mlForumHotTopicDirection :brand="brand" :model="model"></mlForumHotTopicDirection>
<mlSpreadTOPmodels :brand="brand" :model="model"></mlSpreadTOPmodels>
</div>
</div>
<div class="bdl-d5">
@ -91,8 +91,8 @@ export default {
mlWeiboPortraits, //
mlWeiboVolumeTrend, //
mlForumCommunicationTrend, //
mlForumHotTopicDirection, //
mlSpreadTOPmodels, // TOP
mlForumHotTopicDirection, //
mlSpreadTOPmodels, //
mlKeyMedia,
mlRearWingPropagationSituation,
mlPopularwordCloud,

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-12 16:33:38
* @LastEditTime: 2021-10-25 15:08:06
* @LastEditTime: 2021-11-01 16:05:14
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/forumCommunicationTrend/index.vue
@ -16,12 +16,49 @@
</template>
<script>
import {getBbsCountTime} from "@/api/ModelInsight"
import createOpt from "./opt"
export default {
name: "ml-forum-communication-trend",
props: ["brand", "model"],
data() {
return {
opt: createOpt()
form: {
sBrand: "",
sSeriesName: "",
token: "",
},
opt: {}
}
},
watch: {
model: {
handler(val) {
if (val) {
this.form.token = this.getToken;
this.form.sBrand = this.brand;
this.form.sSeriesName = this.model;
this.getData();
}
},
immediate: true,
},
},
methods: {
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
getBbsCountTime(obj).then(res => {
let data = res.data || [];
let dx = [];
let ds = [];
data.forEach(ele => {
let key = ele.Time;
let value = ele.value;
dx.push(key);
ds.push(value);
})
this.opt = createOpt(dx, ds);
})
}
}
}

@ -1,13 +1,13 @@
/*
* @Author: your name
* @Date: 2021-10-12 16:40:53
* @LastEditTime: 2021-10-12 16:44:49
* @LastEditTime: 2021-11-01 16:06:05
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/forumCommunicationTrend/opt.js
*/
import * as echarts from "echarts";
export default function createOpt() {
export default function createOpt(dx=[], ds=[]) {
return {
grid: {
top: "16px",
@ -38,7 +38,13 @@ export default function createOpt() {
color: "#fff",
},
},
data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
axisLabel : {
formatter: (value) => {
let str = value.substring(10,16)
return str;
}
},
data: dx
},
yAxis: {
type: 'value',
@ -57,7 +63,7 @@ export default function createOpt() {
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
data: ds,
type: 'line',
color: "#51bc91",
areaStyle: {normal: {

@ -1,40 +1,107 @@
<!--
* @Author: your name
* @Date: 2021-10-12 16:48:36
* @LastEditTime: 2021-10-25 15:08:22
* @LastEditTime: 2021-11-01 16:25:45
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/forumHotTopicDirection/index.vue
-->
<template>
<div class="fhtd-outter">
<v-label-div title="论坛热议话题方向" :showLine="false" :eStyle="{ 'border-style': 'none' }" />
<div class="fhtd-inner">
<div class="d1">
<v-ranking-fhtd :num="1" label="辅助" val="594614" :lineShow="false" ></v-ranking-fhtd>
<v-ranking-fhtd :num="2" label="刹车" val="594614"></v-ranking-fhtd>
<v-ranking-fhtd :num="3" label="舒适度" val="594614"></v-ranking-fhtd>
<v-ranking-fhtd :num="4" label="操控" val="594614"></v-ranking-fhtd>
<v-ranking-fhtd :num="5" label="油耗" val="594614"></v-ranking-fhtd>
<v-label-div title="调性分布" :showLine="false" :eStyle="{ 'border-style': 'none' }" />
<div class="wp-inner">
<div class="wp-in-d1">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="d2" style="margin-left: 16px">
<v-ranking-fhtd :num="6" label="性价比" val="594614" :lineShow="false"></v-ranking-fhtd>
<v-ranking-fhtd :num="7" label="空间" val="594614"></v-ranking-fhtd>
<v-ranking-fhtd :num="8" label="动力" val="594614"></v-ranking-fhtd>
<v-ranking-fhtd :num="9" label="外观" val="594614"></v-ranking-fhtd>
<v-ranking-fhtd :num="10" label="内饰" val="594614"></v-ranking-fhtd>
<div class="wp-in-d2">
<vue-scroll>
<v-label-ctx v-for="(item,index) in labelData" :key="index" :label="item.key" :cont="item.value" :percentage="(item.value/totalData*100).toFixed(2) +'%'" :color="colors[index]" :eStyle="{ height: '7.6rem' }"></v-label-ctx>
</vue-scroll>
</div>
</div>
</div>
</template>
<script>
import vRankingFhtd from "./v-ranking-fhtd"
import {getAffections2} from "@/api/ModelInsight"
import createOpt from "./opt"
export default {
name: "mlForumHotTopicDirection",
components: {
"v-ranking-fhtd": vRankingFhtd
props: ["brand", "model"],
data() {
return {
form: {
sBrand: "",
sSeriesName: "",
token: "",
},
opt: {},
labelData: [],
totalData: 0,
colors: [
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
],
}
},
watch: {
model: {
handler(val) {
if (val) {
this.form.token = this.getToken;
this.form.sBrand = this.brand;
this.form.sSeriesName = this.model;
this.getData();
}
},
immediate: true,
},
},
methods: {
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
getAffections2(obj).then(res => {
let data = res.data;
let arr = [];
let total = 0;
for(let key in data) {
let obj = {
key: key,
value: data[key]
}
total += data[key] * 1;
arr.push(obj)
}
this.totalData = total;
this.labelData = arr;
this.opt = createOpt(this.labelData, [
"#54BF93",
"#3373CC",
"#CC9D12",
]);
})
}
}
};
</script>
@ -43,11 +110,20 @@ export default {
width: 630px;
height: 412px;
margin-left: 16px;
.fhtd-inner {
padding: 0px 16px 16px 16px;
height: auto;
.wp-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.wp-in-d1 {
width: 310px;
height: 100%;
}
.wp-in-d2 {
width: 310px;
height: auto;
margin-left: 16px;
}
}
}
</style>

@ -0,0 +1,78 @@
/*
* @Author: your name
* @Date: 2021-10-12 15:14:58
* @LastEditTime: 2021-11-01 15:36:27
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
*/
import * as echarts from "echarts";
function createData(ds=[], colors=[]) {
let arr = [];
for(let i = 0; i < ds.length; i++) {
let ele = ds[i];
if(ele.value*1 > 0) {
let obj = { value: ele.value*1, 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[i]
}])
}};
arr.push(obj)
}
}
return arr;
}
export default function createOpt(ds=[], colors=[]) {
const data = createData(ds,colors)
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['65%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
color: "#ffff",
lineHeight: 30
},
emphasis: {
label: {
show: true,
fontSize: '20',
color: "#ffff",
formatter: function (p) {
return `${p.data.name}\n${p.percent}%\n${p.data.value}`
}
}
},
labelLine: {
show: false
},
data: data
},
{
name: 'Access From1',
type: 'pie',
radius: ['86%', '94%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: data
}
]
}
}

@ -1,230 +0,0 @@
<!--
* @Author: your name
* @Date: 2021-10-08 16:44:08
* @LastEditTime: 2021-10-12 17:35:07
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-ranking/index.vue
-->
<template>
<div class="v-r-container">
<div class="v-r-line" v-if="lineShow"></div>
<div class="v-r-inner">
<div :class="ls">
<span class="s1">{{ num|numStr }}</span>
</div>
<div :class="rs">
<span class="v-r-label">{{label}}</span>
<div class="v-r-res">
<span class="s1">传播量</span>
<span class="s2">{{val}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "v-ranking-fhtd",
props: {
num: {
type: [String, Number],
default: 1,
},
val: {
type: [String, Number],
default: 0
},
label: {
type: String,
default: ""
},
lineShow: {
type: Boolean,
default: true
},
},
watch: {
num: {
handler(val) {
if(val == 1) {
this.ls = "v-r-left-1"
this.rs = "v-r-right-1"
} else if(val == 2) {
this.ls = "v-r-left-2"
this.rs = "v-r-right-2"
} else if(val == 3) {
this.ls = "v-r-left-3"
this.rs = "v-r-right-3"
} else {
this.ls = "v-r-left"
this.rs = "v-r-right"
}
},
immediate: true
}
},
data() {
return {
ls: "v-r-left",
rs: "v-r-right"
}
},
filters: {
numStr(val) {
let str = ""
if(0<val && val<10) {
str = '0' + val
} else {
str = val + ''
}
return str
}
}
};
</script>
<style lang="less" scoped>
.v-r-container {
width: 305px;
height: auto;
.v-r-line {
width: 100%;
height: 1px;
background:#0a1d3b;
margin-top: 13px;
margin-bottom: 13px;
}
.v-r-inner {
position: relative;
width: 100%;
height: 48px;
margin-top: 6px;
color: #fff;
background: #0a1d3b;
border-radius: 2px;
}
.v-r-label {
display: block;
font-size: 14px;
color: #FFFFFF;
margin-left: 40px;
font-weight: bold;
}
.v-r-res {
margin-right: 16px;
span {
display: block;
text-align: right;
font-size: 12px;
}
.s1 {
color: #9ba4af;
}
.s2 {
color: #fff;
font-family: Bebas;
}
}
.v-r-left {
width: 48px;
height: 48px;
text-align: center;
line-height: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 48px;
font-family: Bebas;
}
}
.v-r-right {
position: absolute;
width: 280px;
height: 48px;
border-top: 2px solid transparent;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-1 {
width: 48px;
height: 48px;
text-align: center;
border: 2px solid #cc9d12;
border-radius: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 42px;
text-shadow: 0px 0px 8px #cc9d12;
font-family: Bebas;
}
}
.v-r-right-1 {
position: absolute;
width: 280px;
height: 48px;
border-top: 2px solid #CC9D12;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-2 {
width: 48px;
height: 48px;
text-align: center;
border: 2px solid #3373CC;
border-radius: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 42px;
text-shadow: 0px 0px 8px #3373CC;
font-family: Bebas;
}
}
.v-r-right-2 {
position: absolute;
width: 280px;
height: 48px;
border-top: 2px solid #3373CC;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-3 {
width: 48px;
height: 48px;
text-align: center;
border: 2px solid #54BF93;
border-radius: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 42px;
text-shadow: 0px 0px 8px #54BF93;
font-family: Bebas;
}
}
.v-r-right-3 {
position: absolute;
width: 280px;
height: 48px;
border-top: 2px solid #54BF93;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
</style>

@ -1,27 +1,97 @@
<!--
* @Author: your name
* @Date: 2021-10-12 18:18:20
* @LastEditTime: 2021-10-25 15:09:50
* @LastEditTime: 2021-11-01 16:50:14
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/spreadTOPmodels/index.vue
-->
<template>
<div class="stm-outter">
<v-label-div title="传播TOP车型" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="stm-inner">
<v-echarts :opt="opt"></v-echarts>
<v-label-div title="阅读量占比分布" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="wp-inner">
<div class="wp-in-d1">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="wp-in-d2">
<vue-scroll>
<v-label-ctx v-for="(item,index) in labelData" :key="index" :label="item.name" :cont="item.value" :percentage="(item.value/totalData*100).toFixed(2) +'%'" :color="colors[index]" :eStyle="{ height: '7.6rem' }"></v-label-ctx>
</vue-scroll>
</div>
</div>
</div>
</template>
<script>
import {getClicksDistribution} from "@/api/ModelInsight"
import createOpt from "./opt"
export default {
name: "mlSpreadTOPmodels",
props: ["brand", "model"],
data() {
return {
opt: createOpt(["奥迪A8", "奥迪A6", "奥迪Q3", "奥迪Q4", "奥迪Q5"],[2200, 1900, 1800, 1600, 1400])
form: {
sBrand: "",
sSeriesName: "",
token: "",
},
labelData: [],
totalData: 0,
opt: {},
colors: [
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
],
}
},
watch: {
model: {
handler(val) {
if (val) {
this.form.token = this.getToken;
this.form.sBrand = this.brand;
this.form.sSeriesName = this.model;
this.getData();
}
},
immediate: true,
},
},
methods: {
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
getClicksDistribution(obj).then(res => {
let data = res.data || [];
let total = 0;
data.forEach(ele => {
total += ele.value * 1;
})
this.totalData = total;
this.labelData = data;
this.opt = createOpt(this.labelData, [
"#54BF93",
"#3373CC",
"#CC9D12",
]);
})
}
}
}
@ -31,9 +101,20 @@ export default {
width: 628px;
height: 412px;
margin-left: 16px;
.stm-inner {
.wp-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.wp-in-d1 {
width: 310px;
height: 100%;
}
.wp-in-d2 {
width: 310px;
height: auto;
margin-left: 16px;
}
}
}
</style>

@ -1,104 +1,78 @@
/*
* @Author: your name
* @Date: 2021-10-12 18:23:25
* @LastEditTime: 2021-10-12 18:31:20
* @Date: 2021-10-12 15:14:58
* @LastEditTime: 2021-11-01 16:49:19
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/spreadTOPmodels/opt.js
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
*/
import * as echarts from "echarts";
export default function createOpt(dx,ds) {
function createData(ds=[], colors=[]) {
let arr = [];
for(let i = 0; i < ds.length; i++) {
let ele = ds[i];
if(ele.value*1 > 0) {
let obj = { value: ele.value*1, name: ele.name, itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: colors[i]
}])
}};
arr.push(obj)
}
}
return arr;
}
export default function createOpt(ds=[], colors=[]) {
const data = createData(ds,colors)
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: {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['65%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
lineStyle: {
color: "#FFF",
},
position: 'center',
color: "#ffff",
lineHeight: 30
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
color: "#012b4b",
},
emphasis: {
label: {
show: true,
fontSize: '20',
color: "#ffff",
formatter: function (p) {
return `${p.data.name}\n${p.percent}%\n${p.data.value}`
}
}
},
labelLine: {
show: false
},
data: data
},
},
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: "#51bc8f", // 100% 处的颜色#3373CC
},
],
false
),
},
name: 'Access From1',
type: 'pie',
radius: ['86%', '94%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
},
],
center: ['50%', '50%'],//边框位置
data: data
}
]
}
}

Loading…
Cancel
Save