-
-
+
diff --git a/src/views/BrandComparison/weiboUserPortrait/opt1.js b/src/views/BrandComparison/weiboUserPortrait/opt1.js
index fd6dbf6..12129ba 100644
--- a/src/views/BrandComparison/weiboUserPortrait/opt1.js
+++ b/src/views/BrandComparison/weiboUserPortrait/opt1.js
@@ -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,
}
]
diff --git a/src/views/BrandComparison/weiboUserPortrait/opt2.js b/src/views/BrandComparison/weiboUserPortrait/opt2.js
index eab17f6..bd1a436 100644
--- a/src/views/BrandComparison/weiboUserPortrait/opt2.js
+++ b/src/views/BrandComparison/weiboUserPortrait/opt2.js
@@ -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,
+ }
+ ]
+ }
}