From abe942f4c6d49a6ad42acaf8e74f5f02b5ffc089 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 04 六月 2021 15:26:17 +0800
Subject: [PATCH] 2021-06-04
---
src/menu/components/chart/antv-pie/index.jsx | 246 +++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 237 insertions(+), 9 deletions(-)
diff --git a/src/menu/components/chart/antv-pie/index.jsx b/src/menu/components/chart/antv-pie/index.jsx
index ebd9179..8c6428b 100644
--- a/src/menu/components/chart/antv-pie/index.jsx
+++ b/src/menu/components/chart/antv-pie/index.jsx
@@ -3,7 +3,7 @@
import { is, fromJS } from 'immutable'
import { Icon, Popover } from 'antd'
import { Chart } from '@antv/g2'
-import DataSet from '@antv/data-set'
+import DataSet, { DataView } from '@antv/data-set'
import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
@@ -54,6 +54,9 @@
if (card.subtype === 'ring') {
_plot.innerRadius = 50
+ } else if (card.subtype === 'nest') {
+ _plot.innerRadius = 30
+ _plot.radius = 80
}
let _card = {
@@ -150,13 +153,6 @@
{ label: '2003', value: 33.7 },
{ label: '2004', value: 30.7 },
{ label: '2005', value: 25.8 },
- { label: '2006', value: 31.7 },
- { label: '2007', value: 33 },
- { label: '2008', value: 46 },
- { label: '2009', value: 38.3 },
- { label: '2010', value: 28 },
- { label: '2011', value: 42.5 },
- { label: '2012', value: 30.3 }
]
let data = xdata.map(item => {
@@ -169,11 +165,243 @@
return data
}
+ getnestdata = (X_axis, Y_axis, type) => {
+ const xdata = [
+ { name: '鐙瓙', type: '鐏薄', value: 11 },
+ { name: '鐧界緤', type: '鐏薄', value: 10 },
+ { name: '姘寸摱', type: '椋庡悜', value: 14 },
+ { name: '灏勬墜', type: '鐏薄', value: 10 },
+ { name: '鍙屽瓙', type: '椋庡悜', value: 7 },
+ { name: '澶╁钩', type: '椋庡悜', value: 7 },
+ { name: '鎽╃警', type: '鍦熻薄', value: 14 },
+ { name: '閲戠墰', type: '鍦熻薄', value: 3 },
+ { name: '澶勫コ', type: '鍦熻薄', value: 3 },
+ { name: '澶╄潕', type: '姘磋薄', value: 11 },
+ { name: '宸ㄨ煿', type: '姘磋薄', value: 5 },
+ { name: '鍙岄奔', type: '姘磋薄', value: 5 },
+ ]
+
+ let map = new Map()
+ let sort = 1
+ let data = xdata.map(item => {
+ let _sort = sort
+ if (map.has(item.type)) {
+ _sort = map.get(item.type)
+ } else {
+ map.set(item.type, _sort)
+ sort++
+ }
+ return {
+ [X_axis]: item.name,
+ [Y_axis]: item.value,
+ [type]: item.type,
+ $sort: _sort
+ }
+ })
+
+ return data
+ }
+
+ nestrender = () => {
+ const { card } = this.state
+ const plot = card.plot
+
+ let color = plot.color || 'rgba(0, 0, 0, 0.85)'
+ let X_axis = plot.Xaxis || 'x'
+ let Y_axis = plot.Yaxis || 'y'
+ let type = plot.type || 'type'
+
+ const _data = this.getnestdata(X_axis, Y_axis, type)
+ const dvx = new DataView().source(_data)
+
+ dvx.transform({
+ type: 'sort-by',
+ fields: ['$sort']
+ })
+
+ let data = dvx.rows
+
+ // 閫氳繃 DataSet 璁＄畻鐧惧垎姣�
+ const dv = new DataView()
+ dv.source(data).transform({
+ type: 'percent',
+ field: Y_axis,
+ dimension: type,
+ as: '$percent'
+ })
+
+ const dv1 = new DataView()
+ dv1.source(data).transform({
+ type: 'percent',
+ field: Y_axis,
+ dimension: X_axis,
+ as: '$percent',
+ })
+
+ const chart = new Chart({
+ container: card.uuid + 'canvas',
+ autoFit: true,
+ height: card.plot.height ? (card.plot.height - 75) : 325,
+ padding: 0,
+ })
+
+ chart.data(dv.rows)
+
+ if (plot.show !== 'value') {
+ chart.scale('percent', {
+ formatter: (val) => {
+ val = val * 100 + '%'
+ return val
+ }
+ })
+
+ Y_axis = '$percent'
+ }
+ let radius = plot.radius / 100
+ let innerRadius = plot.innerRadius / 100
+
+ chart.coordinate('theta', {
+ innerRadius: innerRadius,
+ radius: innerRadius + (radius - innerRadius) / 2,
+ })
+ chart.tooltip({
+ showTitle: false,
+ showMarkers: false,
+ })
+ chart.legend(false)
+ let chart1 = chart
+ .interval()
+ .adjust('stack')
+ .position(Y_axis)
+ .color(type)
+ .tooltip(`${type}*${Y_axis}`, (type, percent) => {
+ if (plot.show !== 'value') {
+ percent = (percent * 100).toFixed(2) + '%'
+ }
+ return {
+ name: type,
+ value: percent,
+ }
+ })
+ .style({
+ lineWidth: 1,
+ stroke: '#fff',
+ })
+
+ if (plot.label !== 'false') {
+ chart1.label(type, {
+ offset: -10,
+ })
+ }
+
+ const outterView = chart.createView()
+
+ outterView.data(dv1.rows)
+
+ if (plot.show !== 'value') {
+ outterView.scale('percent', {
+ formatter: (val) => {
+ val = val * 100 + '%'
+ return val
+ }
+ })
+ }
+ outterView.coordinate('theta', {
+ innerRadius: (innerRadius + (radius - innerRadius) / 2) / radius,
+ radius: radius
+ })
+ let chart2 = outterView
+ .interval()
+ .adjust('stack')
+ .position(Y_axis)
+ .color(X_axis)
+ .tooltip(`${X_axis}*${Y_axis}`, (name, value) => {
+ if (plot.show !== 'value') {
+ value = (value * 100).toFixed(2) + '%'
+ }
+ return {
+ name: name,
+ value: value
+ }
+ })
+ .style({
+ lineWidth: 1,
+ stroke: '#fff',
+ })
+
+ if (plot.label !== 'false') {
+ if (plot.label === 'inner') {
+ chart2.label(Y_axis, {
+ offset: -30,
+ content: (data) => {
+ let _label = ''
+ let _val = ''
+ if (plot.show !== 'value') {
+ _val = `${(data[Y_axis] * 100).toFixed(2)}%`
+ } else {
+ _val = `${data[Y_axis]}`
+ }
+ if (plot.label === 'inner') {
+ _label = _val
+ } else {
+ _label = `${data[X_axis]}: ${_val}`
+ }
+ return _label
+ },
+ style: {
+ textAlign: 'center',
+ fontSize: 16,
+ shadowBlur: 2,
+ shadowColor: 'rgba(0, 0, 0, .45)',
+ fill: '#fff',
+ }
+ })
+ } else {
+ chart2.label(Y_axis, {
+ layout: { type: 'pie-spider' },
+ labelHeight: 20,
+ content: (data) => {
+ let _label = ''
+ let _val = ''
+ if (plot.show !== 'value') {
+ _val = `${(data[Y_axis] * 100).toFixed(2)}%`
+ } else {
+ _val = `${data[Y_axis]}`
+ }
+ if (plot.label === 'inner') {
+ _label = _val
+ } else {
+ _label = `${data[X_axis]}: ${_val}`
+ }
+ return _label
+ },
+ labelLine: {
+ style: {
+ lineWidth: 0.5,
+ },
+ },
+ style: {
+ fill: color
+ }
+ })
+ }
+ }
+
+ chart.interaction('element-highlight')
+
+ chart.render()
+ }
+
pierender = () => {
const { card } = this.state
const plot = card.plot
- let color = plot.color || 'rgba(0, 0, 0, 0.85)'
+ if (plot.shape === 'nest') {
+ this.nestrender()
+ return
+ }
+
+ let color = plot.color || 'rgba(0, 0, 0, 0.85)'
let X_axis = plot.Xaxis || 'x'
let Y_axis = plot.Yaxis || 'y'
--
Gitblit v1.8.0