Verified Commit ae3b328b authored by jxtxzzw's avatar jxtxzzw

Feature: Income Advanced Platform

Signed-off-by: jxtxzzw's avatarjxtxzzw <jxtxzzw@126.com>
parent a11a1b09
......@@ -18,7 +18,7 @@
"year": "2019",
"amount": "10",
"type": "打赏",
"platform": "付费内容"
"platform": "微信公众号"
},
{
"id": "4",
......
......@@ -250,3 +250,127 @@ export function renderChartForBasicAccumulated(that, rawData) {
chart.render()
}
function getTreeData(rawData) {
const dict = {}
for (const x of rawData) {
const amount = parseFloat(x.amount)
const type = x.type
const platform = x.platform
if (!(platform in dict)) {
dict[platform] = {}
dict[platform].value = 0
dict[platform].children = {}
}
dict[platform].value += amount
if (!(type in dict[platform].children)) {
dict[platform].children[type] = 0
}
dict[platform].children[type] += amount
}
const data = []
for (const platform in dict) {
const obj = {
name: platform,
brand: platform,
value: dict[platform].amount,
children: [],
}
for (const type in dict[platform].children) {
obj.children.push({
name: platform + ' - ' + type,
value: dict[platform].children[type],
})
}
data.push(obj)
}
return data
}
export function renderChartForAdvancedPlatform(that, rawData) {
const { Chart } = that.$g2
const { DataView } = that.$dataset
const treeData = getTreeData(rawData)
console.log(treeData)
// 会通过子节点累加 value 值,所以设置为 0
treeData.forEach(function (td) {
td.value = null
})
const data = {
name: 'root',
children: treeData,
}
const dv = new DataView()
dv.source(data, {
type: 'hierarchy',
}).transform({
field: 'value',
type: 'hierarchy.treemap',
tile: 'treemapResquarify',
as: ['x', 'y'],
})
// 将 DataSet 处理后的结果转换为 G2 接受的数据
const nodes = []
for (const node of dv.getAllNodes()) {
if (!node.children) {
const eachNode = {
name: node.data.name,
x: node.x,
y: node.y,
depth: node.depth,
value: node.value,
}
if (!node.data.brand && node.parent) {
eachNode.brand = node.parent.data.brand
} else {
eachNode.brand = node.data.brand
}
nodes.push(eachNode)
}
}
const chart = new Chart({
container: 'advanced-platform',
autoFit: true,
height: 500,
padding: 0,
})
chart.coordinate().scale(1, -1) // 习惯性最小的在最下面
chart.data(nodes)
chart.axis(false)
chart.legend(false)
chart.tooltip({
showTitle: false,
showMarkers: false,
})
chart
.polygon()
.position('x*y')
.color('brand')
.tooltip('name*value', function (name, value) {
return {
name,
value,
}
})
.style({
lineWidth: 1,
stroke: '#fff',
})
.label('name', {
offset: 0,
style: {
textBaseline: 'middle',
fill: '#000',
shadowBlur: 10,
shadowColor: '#fff',
},
layout: {
type: 'limit-in-shape',
},
})
chart.interaction('element-active')
chart.render()
}
......@@ -92,6 +92,29 @@
"tslib": "^1.10.0"
}
},
"@antv/data-set": {
"version": "0.11.7",
"resolved": "https://registry.npmjs.org/@antv/data-set/-/data-set-0.11.7.tgz",
"integrity": "sha512-TP62M4ZGda/6dhz+XvmsghMSpkrmRLsLiRFfPfYQVM9+QZAzvGisVayj9x0xMSBBwDwjKE69LeDTFFMQJlTnog==",
"requires": {
"@antv/hierarchy": "^0.6.0",
"@antv/util": "^2.0.0",
"d3-composite-projections": "^1.2.0",
"d3-dsv": "^1.0.5",
"d3-geo": "~1.6.4",
"d3-geo-projection": "~2.1.2",
"d3-hexjson": "^1.0.1",
"d3-hierarchy": "^1.1.5",
"d3-sankey": "^0.9.1",
"d3-voronoi": "^1.1.2",
"dagre": "^0.8.2",
"point-at-length": "^1.0.2",
"regression": "^2.0.0",
"simple-statistics": "^6.1.0",
"topojson-client": "^3.0.0",
"wolfy87-eventemitter": "^5.1.0"
}
},
"@antv/dom-util": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@antv/dom-util/-/dom-util-2.0.2.tgz",
......@@ -184,6 +207,14 @@
}
}
},
"@antv/hierarchy": {
"version": "0.6.6",
"resolved": "https://registry.npmjs.org/@antv/hierarchy/-/hierarchy-0.6.6.tgz",
"integrity": "sha512-ivb9j5aJOogjjU9k7WZXWznevMyqgBbP/Xq2rfXsQFLk4ArABt2ewU6a6jndPOiycGDxppZ8kaYjli70i4HluA==",
"requires": {
"@antv/util": "^2.0.7"
}
},
"@antv/l7": {
"version": "2.2.41",
"resolved": "https://registry.npmjs.org/@antv/l7/-/l7-2.2.41.tgz",
......@@ -4120,6 +4151,11 @@
"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
"dev": true
},
"abs-svg-path": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/abs-svg-path/-/abs-svg-path-0.1.1.tgz",
"integrity": "sha1-32Acjo0roQ1KdtYl4japo5wnI78="
},
"accepts": {
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
......@@ -6633,6 +6669,30 @@
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
"integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
},
"d3-composite-projections": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/d3-composite-projections/-/d3-composite-projections-1.4.0.tgz",
"integrity": "sha512-csygyxdRfy7aUYRPea23veM6sjisdHI+DNd0nHcAGMd2LyL2lklr+xLRzHiJ+hy1HGp6YgAtbqdJR8CsLolrNQ==",
"requires": {
"d3-geo": "^2.0.1",
"d3-path": "^2.0.0"
},
"dependencies": {
"d3-array": {
"version": "2.9.1",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.9.1.tgz",
"integrity": "sha512-Ob7RdOtkqsjx1NWyQHMFLtCSk6/aKTxDdC4ZIolX+O+mDD2RzrsYgAyc0WGAlfYFVELLSilS7w8BtE3PKM8bHg=="
},
"d3-geo": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-2.0.1.tgz",
"integrity": "sha512-M6yzGbFRfxzNrVhxDJXzJqSLQ90q1cCyb3EWFZ1LF4eWOBYxFypw7I/NFVBNXKNqxv1bqLathhYvdJ6DC+th3A==",
"requires": {
"d3-array": ">=2.5"
}
}
}
},
"d3-dsv": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.2.0.tgz",
......@@ -6653,11 +6713,42 @@
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
"integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
},
"d3-geo": {
"version": "1.6.4",
"resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.6.4.tgz",
"integrity": "sha1-8g4eRhyxhF9ai+Vatvh2VCp+MZk=",
"requires": {
"d3-array": "1"
}
},
"d3-geo-projection": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/d3-geo-projection/-/d3-geo-projection-2.1.2.tgz",
"integrity": "sha1-ffjh6dBG1jHGUJ9+UxNX1K3CSqM=",
"requires": {
"commander": "2",
"d3-array": "1",
"d3-geo": "^1.1.0"
}
},
"d3-hexbin": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/d3-hexbin/-/d3-hexbin-0.2.2.tgz",
"integrity": "sha1-nFg32s/UcasFM3qeke8Qv8T5iDE="
},
"d3-hexjson": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/d3-hexjson/-/d3-hexjson-1.1.1.tgz",
"integrity": "sha512-WMF1juFJwAx6LzdEVKlsCGZz+7QUG7VMJDtg8uD3cfNwWOTgMiy6qBRRGU7LSY2KbmEObu3BV5ZQbq9l/BvUZQ==",
"requires": {
"d3-array": "1"
}
},
"d3-hierarchy": {
"version": "1.1.9",
"resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
"integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
},
"d3-interpolate": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
......@@ -6666,6 +6757,21 @@
"d3-color": "1"
}
},
"d3-path": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz",
"integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA=="
},
"d3-sankey": {
"version": "0.9.1",
"resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.9.1.tgz",
"integrity": "sha512-nnRkDaUMjBdeuGg+kWGdA+tjG1AVTnJ+Ykw7ff7CZHVI17Hm5sy8n0UXykVffn13aNHwK5wPOdOt1gS1ZEaF+A==",
"requires": {
"d3-array": "1",
"d3-collection": "1",
"d3-shape": "^1.2.0"
}
},
"d3-scale": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
......@@ -6679,6 +6785,21 @@
"d3-time-format": "2"
}
},
"d3-shape": {
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
"integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
"requires": {
"d3-path": "1"
},
"dependencies": {
"d3-path": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
"integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
}
}
},
"d3-time": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
......@@ -6697,6 +6818,20 @@
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
"integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
},
"d3-voronoi": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
"integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
},
"dagre": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
"integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
"requires": {
"graphlib": "^2.1.8",
"lodash": "^4.17.15"
}
},
"dashdash": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
......@@ -9202,6 +9337,14 @@
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
"integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
},
"graphlib": {
"version": "2.1.8",
"resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
"integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
"requires": {
"lodash": "^4.17.15"
}
},
"grid-index": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
......@@ -12596,6 +12739,11 @@
"protocols": "^1.4.0"
}
},
"parse-svg-path": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.1.2.tgz",
"integrity": "sha1-en7A0esG+lMlx9PgCbhZoJtdSes="
},
"parse-url": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/parse-url/-/parse-url-5.0.2.tgz",
......@@ -12798,6 +12946,23 @@
"integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
"dev": true
},
"point-at-length": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/point-at-length/-/point-at-length-1.1.0.tgz",
"integrity": "sha1-CtcuvQmA1/WhqxIpbAVfnrazDlc=",
"requires": {
"abs-svg-path": "~0.1.1",
"isarray": "~0.0.1",
"parse-svg-path": "~0.1.1"
},
"dependencies": {
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
}
}
},
"polyline-miter-util": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/polyline-miter-util/-/polyline-miter-util-1.0.1.tgz",
......@@ -14741,6 +14906,11 @@
"resolved": "https://registry.npmjs.org/regl/-/regl-1.7.0.tgz",
"integrity": "sha512-bEAtp/qrtKucxXSJkD4ebopFZYP0q1+3Vb2WECWv/T8yQEgKxDxJ7ztO285tAMaYZVR6mM1GgI6CCn8FROtL1w=="
},
"regression": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/regression/-/regression-2.0.1.tgz",
"integrity": "sha1-jSnD6CJKEIUMNeM36FqLL6w7DIc="
},
"relateurl": {
"version": "0.2.7",
"resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
......@@ -15475,6 +15645,11 @@
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
"integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
},
"simple-statistics": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/simple-statistics/-/simple-statistics-6.1.1.tgz",
"integrity": "sha512-zGwn0DDRa9Zel4H4n2pjTFIyGoAGpnpjrGIctreCxj5XWrcx9v7Xy7270FkC967WMmcvuc8ZU7m0ZG+hGN7gAA=="
},
"simple-swizzle": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
......@@ -16726,6 +16901,14 @@
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
"integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
},
"topojson-client": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
"integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
"requires": {
"commander": "2"
}
},
"tough-cookie": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-3.0.1.tgz",
......@@ -18370,6 +18553,11 @@
"string-width": "^4.0.0"
}
},
"wolfy87-eventemitter": {
"version": "5.2.9",
"resolved": "https://registry.npmjs.org/wolfy87-eventemitter/-/wolfy87-eventemitter-5.2.9.tgz",
"integrity": "sha512-P+6vtWyuDw+MB01X7UeF8TaHBvbCovf4HPEMF/SV7BdDc1SMTiBy13SRD71lQh4ExFTG1d/WNzDGDCyOKSMblw=="
},
"word-wrap": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
......
......@@ -24,6 +24,7 @@
}
},
"dependencies": {
"@antv/data-set": "^0.11.7",
"@antv/g2": "^4.1.1",
"@antv/l7": "^2.2.41",
"@antv/l7-maps": "^2.2.41",
......
......@@ -50,6 +50,7 @@ export default {
'#2391FF',
]
)
incomeUtil.renderChartForAdvancedPlatform(this, advancedIncome)
// Chart 都是 autoFit 的,所以强制触发一次 resize 就可以了
window.dispatchEvent(new Event('resize'))
},
......
import Vue from 'vue'
const g2 = require('@antv/g2')
const dataset = require('@antv/data-set')
Vue.prototype.$g2 = g2
Vue.prototype.$dataset = dataset
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment