From 79bd0cd3d6b32ac2feb3249a856c3c149d122815 Mon Sep 17 00:00:00 2001 From: zx <604444282@qq.com> Date: Thu, 4 Nov 2021 17:16:00 +0800 Subject: [PATCH 01/16] =?UTF-8?q?zx-=E5=BE=AE=E5=8D=9A=E8=AF=A6=E6=83=85-?= =?UTF-8?q?=E5=BE=AE=E5=8D=9A=E7=94=A8=E6=88=B7=E6=B4=BB=E8=B7=83=E5=9C=B0?= =?UTF-8?q?=E5=8C=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../weiboUserActiveArea/index.vue | 10 ++-- .../WeiboDetails/weiboUserActiveArea/opt1.js | 16 ++++-- .../WeiboDetails/weiboUserActiveArea/opt2.js | 54 ++++--------------- 3 files changed, 29 insertions(+), 51 deletions(-) diff --git a/src/views/WeiboDetails/weiboUserActiveArea/index.vue b/src/views/WeiboDetails/weiboUserActiveArea/index.vue index 47420ca..3e504eb 100644 --- a/src/views/WeiboDetails/weiboUserActiveArea/index.vue +++ b/src/views/WeiboDetails/weiboUserActiveArea/index.vue @@ -51,13 +51,15 @@ export default { this.arr = this.toArr(data); let dx = []; //省份 let ds = []; //数据 + let dm = this.arr //省份和数据 this.arr.forEach((ele) => { - let key = ele.key; + let name = ele.name; let value = ele.value; - dx.push(key); + dx.push(name); ds.push(value); }); this.opt1 = createOptD1(dx, ds); + this.opt2 = createOptD2(dm); }); console.log(); }, @@ -66,8 +68,8 @@ export default { let arr = []; for (let key in obj) { let o = { - key: key, - value: obj[key], + name: key, + value: obj[key] * 1, }; arr.push(o); } diff --git a/src/views/WeiboDetails/weiboUserActiveArea/opt1.js b/src/views/WeiboDetails/weiboUserActiveArea/opt1.js index 74ec961..3fd7054 100644 --- a/src/views/WeiboDetails/weiboUserActiveArea/opt1.js +++ b/src/views/WeiboDetails/weiboUserActiveArea/opt1.js @@ -9,12 +9,13 @@ * @FilePath: /data-show/src/views/Index/tailInsight/opt.js */ import * as echarts from "echarts"; +import { bigNumberTransform } from "@/utils/gol/dataTool" export default function createOptD1(dx=[],ds=[]) { return { grid: { - left: '4%', - right: '4%', - bottom: '4%', + left: 16, + right: '5%', + bottom: 10, top: "1%", containLabel: true }, @@ -36,6 +37,12 @@ export default function createOptD1(dx=[],ds=[]) { color: "#fff", }, }, + axisLabel: { + formatter: (value) => { + let str = bigNumberTransform(value); + return str; + } + }, splitLine: { lineStyle: { type: "dashed", // y轴分割线类型 @@ -55,12 +62,13 @@ export default function createOptD1(dx=[],ds=[]) { color: "#fff", }, }, + inverse: true }, series: [ { name: '2011', type: 'bar', - barWidth: 24, + barWidth: 20, data: ds, color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, diff --git a/src/views/WeiboDetails/weiboUserActiveArea/opt2.js b/src/views/WeiboDetails/weiboUserActiveArea/opt2.js index 178233f..1226e1d 100644 --- a/src/views/WeiboDetails/weiboUserActiveArea/opt2.js +++ b/src/views/WeiboDetails/weiboUserActiveArea/opt2.js @@ -6,16 +6,16 @@ * @Description: In User Settings Edit * @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/opt2.js */ -const ini_data = [];//初始化省份数组 -const provArr = ['河北', '河南', '云南', '辽宁', '黑龙江', '湖南', '安徽', '山东']; -//正则省份,将省与市的字眼去掉,框架不识别 -for (var i = 0; i < provArr.length; i++) { - var str = provArr[i]; - var re = /省|市/g; //全局匹配 - var str2 = { name: str.replace(re, ''), value: 5 };//拼接对象数组 - ini_data.push(str2); -} -export default function createOptD2() { +// const ini_data = [];//初始化省份数组 +// const provArr = ['河北', '河南', '云南', '辽宁', '黑龙江', '湖南', '安徽', '山东']; +// //正则省份,将省与市的字眼去掉,框架不识别 +// for (var i = 0; i < provArr.length; i++) { +// var str = provArr[i]; +// var re = /省|市/g; //全局匹配 +// var str2 = { name: str.replace(re, ''), value: 5 };//拼接对象数组 +// ini_data.push(str2); +// } +export default function createOptD2(dm) { return { tooltip: { trigger: "item", @@ -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 } ] } From 0d4bf41493e00b65b96386b2ec49982abdeec446 Mon Sep 17 00:00:00 2001 From: "lily.zhang" Date: Thu, 4 Nov 2021 17:55:32 +0800 Subject: [PATCH 02/16] cxw-010203 --- src/views/WeiboDetails/weiboContentTOPVolume/index.vue | 6 +++--- src/views/WeiboDetails/weiboContentTOPVolume/opt.js | 6 +++--- src/views/WeiboDetails/weiboUserActiveArea/opt2.js | 10 ++++++++-- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/views/WeiboDetails/weiboContentTOPVolume/index.vue b/src/views/WeiboDetails/weiboContentTOPVolume/index.vue index d5f55e0..5d68bea 100644 --- a/src/views/WeiboDetails/weiboContentTOPVolume/index.vue +++ b/src/views/WeiboDetails/weiboContentTOPVolume/index.vue @@ -1,7 +1,7 @@ diff --git a/src/views/WeiboDetails/weiboContentType/opt.js b/src/views/WeiboDetails/weiboContentType/opt.js index 1c086d8..f01a8de 100644 --- a/src/views/WeiboDetails/weiboContentType/opt.js +++ b/src/views/WeiboDetails/weiboContentType/opt.js @@ -1,114 +1,80 @@ /* * @Author: your name - * @Date: 2021-10-12 15:14:58 - * @LastEditTime: 2021-10-14 10:43:47 + * @Date: 2021-10-09 09:49:50 + * @LastEditTime: 2021-10-28 13:07:24 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit - * @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js + * @FilePath: /data-show/src/views/Index/userPortrait/opt.js */ import * as echarts from "echarts"; -export default function createOpt() { - 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: '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' - }])} }, - ], - - }, - { - 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' - }])} }, - ], - - } - ] +// let colors = ['#3373CC', '#CC9D12', '#54BF93','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1','#f7a35c','#90ed7d'] +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; +} +export default function createOpt(ds = [], color = []) { + const data = createData(ds, color); + return { + series: [ + { + name: 'Access From0', + type: 'pie', + radius: ['65%', '80%'], + avoidLabelOverlap: false, + label: { + show: false, + position: 'center', + lineHeight: 30 + }, + emphasis: { + label: { + show: true, + fontSize: '16', + color: "#ffff", + fontWeight: 'bold', + 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 + } + ] + } } diff --git a/src/views/WeiboDetails/weiboUserActiveArea/index.vue b/src/views/WeiboDetails/weiboUserActiveArea/index.vue index 3e504eb..41a03bd 100644 --- a/src/views/WeiboDetails/weiboUserActiveArea/index.vue +++ b/src/views/WeiboDetails/weiboUserActiveArea/index.vue @@ -32,7 +32,6 @@ export default { sBrand: "", token: "", }, - arr: [], opt1: createOptD1(), opt2: createOptD2(), }; @@ -48,20 +47,22 @@ export default { let obj = Object.assign({}, this.getCtime2, this.form); getRegionWeiBo(obj).then((res) => { let data = res.data || {}; - this.arr = this.toArr(data); + let arr = this.toArr(data); let dx = []; //省份 let ds = []; //数据 - let dm = this.arr //省份和数据 - this.arr.forEach((ele) => { - let name = ele.name; + arr.forEach((ele) => { + let name = ele.name || ""; + if(name.indexOf('省') === -1) { + ele.name = ele.name + '市' + } let value = ele.value; - dx.push(name); + dx.push(ele.name); ds.push(value); }); + let dm = arr //省份和数据 this.opt1 = createOptD1(dx, ds); this.opt2 = createOptD2(dm); }); - console.log(); }, // 将对象变成数组 toArr(obj) { From 4f59ed78dba62ec92a892dc02dbbb2eee905b4fa Mon Sep 17 00:00:00 2001 From: "lily.zhang" Date: Fri, 5 Nov 2021 10:03:37 +0800 Subject: [PATCH 04/16] cxw-010203 --- src/components/index.js | 6 +- src/components/v-percent/index.vue | 193 ++++++++++++++++++ .../weiboTonalDistribution/index.vue | 55 ++++- 3 files changed, 247 insertions(+), 7 deletions(-) create mode 100644 src/components/v-percent/index.vue diff --git a/src/components/index.js b/src/components/index.js index 08c9540..ae23eca 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,7 +1,7 @@ /* * @Author: your name * @Date: 2021-10-12 10:28:00 - * @LastEditTime: 2021-10-21 13:21:05 + * @LastEditTime: 2021-11-04 18:31:15 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: /data-show/src/components/index.js @@ -16,6 +16,7 @@ import vLabelCtx from "@/components/v-label-ctx" import vPagination from "@/components/v-pagination" import vRanking from "@/components/v-ranking"; import vEcharsMap from "@/components/v-echars-map" +import vPercent from "@/components/v-percent" export default { install(Vue) { Vue.mixin({ @@ -29,7 +30,8 @@ export default { vLabelCtx, vPagination, vRanking, - vEcharsMap + vEcharsMap, + vPercent } }) } diff --git a/src/components/v-percent/index.vue b/src/components/v-percent/index.vue new file mode 100644 index 0000000..50dce65 --- /dev/null +++ b/src/components/v-percent/index.vue @@ -0,0 +1,193 @@ + + + + + + + \ No newline at end of file diff --git a/src/views/WeiboDetails/weiboTonalDistribution/index.vue b/src/views/WeiboDetails/weiboTonalDistribution/index.vue index b6d128d..4b196c5 100644 --- a/src/views/WeiboDetails/weiboTonalDistribution/index.vue +++ b/src/views/WeiboDetails/weiboTonalDistribution/index.vue @@ -1,7 +1,7 @@