From 2d64a2e57c8d83c8d06f210eeefef8f31b3abeb9 Mon Sep 17 00:00:00 2001 From: Soybean Date: Tue, 7 Jun 2022 23:58:47 +0800 Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E6=96=B0=E5=A2=9EAntv=20G2?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/plugin/charts/antv/index.vue | 225 ++++++++++++++++++++++--- 1 file changed, 202 insertions(+), 23 deletions(-) diff --git a/src/views/plugin/charts/antv/index.vue b/src/views/plugin/charts/antv/index.vue index e8b365c87..4d6d24c80 100644 --- a/src/views/plugin/charts/antv/index.vue +++ b/src/views/plugin/charts/antv/index.vue @@ -12,6 +12,12 @@
+ +
+ + +
+ @@ -24,6 +30,8 @@ const pieRef = ref(null); const lineRef = ref(null); const barRef = ref(null); const scatterRef = ref(null); +const areaRef = ref(null); +const radarRef = ref(null); function renderPieChart() { if (!pieRef.value) return; @@ -241,58 +249,229 @@ function renderBarChart() { } function renderScatterChart() { - fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json') + const colorMap = { + Asia: '#1890FF', + Americas: '#2FC25B', + Europe: '#FACC14', + Oceania: '#223273' + }; + + fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/bubble.json') .then(res => res.json()) .then(data => { if (!scatterRef.value) return; - const chart = new Chart({ container: scatterRef.value, autoFit: true, height: 500 }); chart.data(data); + // 为各个字段设置别名 chart.scale({ - height: { nice: true }, - weight: { nice: true } + LifeExpectancy: { + alias: '人均寿命（年）', + nice: true + }, + Population: { + type: 'pow', + alias: '人口总数' + }, + GDP: { + alias: '人均国内生产总值($)', + nice: true + }, + Country: { + alias: '国家/地区' + } + }); + chart.axis('GDP', { + label: { + formatter(value) { + return `${(+value / 1000).toFixed(0)}k`; + } // 格式化坐标轴的显示 + } }); chart.tooltip({ showTitle: false, - showCrosshairs: true, - crosshairs: { - type: 'xy' - }, - itemTpl: - '
  • ' + - '' + - '{name}
    ' + - '{value}' + - '
    • ' + showMarkers: false }); + chart.legend('Population', false); // 该图表默认会生成多个图例，设置不展示 Population 和 Country 两个维度的图例 chart .point() - .position('height*weight') - .color('gender') + .position('GDP*LifeExpectancy') + .size('Population', [4, 65]) + .color('continent', val => { + const key = val as keyof typeof colorMap; + return colorMap[key]; + }) .shape('circle') - .tooltip('gender*height*weight', (gender, height, weight) => { + .tooltip('Country*Population*GDP*LifeExpectancy') + .style('continent', val => { + const key = val as keyof typeof colorMap; return { - name: gender, - value: `${height}(cm), ${weight}(kg)` + lineWidth: 1, + strokeOpacity: 1, + fillOpacity: 0.3, + opacity: 0.65, + stroke: colorMap[key] }; - }) - .style({ - fillOpacity: 0.85 }); - chart.interaction('legend-highlight'); + chart.interaction('element-active'); chart.render(); }); } +function renderAreaChart() { + if (!areaRef.value) return; + + const data = [ + { country: 'Asia', year: '1750', value: 502 }, + { country: 'Asia', year: '1800', value: 635 }, + { country: 'Asia', year: '1850', value: 809 }, + { country: 'Asia', year: '1900', value: 5268 }, + { country: 'Asia', year: '1950', value: 4400 }, + { country: 'Asia', year: '1999', value: 3634 }, + { country: 'Asia', year: '2050', value: 947 }, + { country: 'Africa', year: '1750', value: 106 }, + { country: 'Africa', year: '1800', value: 107 }, + { country: 'Africa', year: '1850', value: 111 }, + { country: 'Africa', year: '1900', value: 1766 }, + { country: 'Africa', year: '1950', value: 221 }, + { country: 'Africa', year: '1999', value: 767 }, + { country: 'Africa', year: '2050', value: 133 }, + { country: 'Europe', year: '1750', value: 163 }, + { country: 'Europe', year: '1800', value: 203 }, + { country: 'Europe', year: '1850', value: 276 }, + { country: 'Europe', year: '1900', value: 628 }, + { country: 'Europe', year: '1950', value: 547 }, + { country: 'Europe', year: '1999', value: 729 }, + { country: 'Europe', year: '2050', value: 408 }, + { country: 'Oceania', year: '1750', value: 200 }, + { country: 'Oceania', year: '1800', value: 200 }, + { country: 'Oceania', year: '1850', value: 200 }, + { country: 'Oceania', year: '1900', value: 460 }, + { country: 'Oceania', year: '1950', value: 230 }, + { country: 'Oceania', year: '1999', value: 300 }, + { country: 'Oceania', year: '2050', value: 300 } + ]; + const chart = new Chart({ + container: areaRef.value, + autoFit: true, + height: 500 + }); + + chart.data(data); + chart.scale('year', { + type: 'linear', + tickInterval: 50 + }); + chart.scale('value', { + nice: true + }); + + chart.tooltip({ + showCrosshairs: true, + shared: true + }); + + chart.area().adjust('stack').position('year*value').color('country'); + chart.line().adjust('stack').position('year*value').color('country'); + + chart.interaction('element-highlight'); + + chart.render(); +} + +function renderRadarChart() { + if (!radarRef.value) return; + + const data = [ + { item: 'Design', a: 70, b: 30 }, + { item: 'Development', a: 60, b: 70 }, + { item: 'Marketing', a: 50, b: 60 }, + { item: 'Users', a: 40, b: 50 }, + { item: 'Test', a: 60, b: 70 }, + { item: 'Language', a: 70, b: 50 }, + { item: 'Technology', a: 50, b: 40 }, + { item: 'Support', a: 30, b: 40 }, + { item: 'Sales', a: 60, b: 40 }, + { item: 'UX', a: 50, b: 60 } + ]; + const { DataView } = DataSet; + const dv = new DataView().source(data); + dv.transform({ + type: 'fold', + fields: ['a', 'b'], // 展开字段集 + key: 'user', // key字段 + value: 'score' // value字段 + }); + + const chart = new Chart({ + container: radarRef.value, + autoFit: true, + height: 500 + }); + chart.data(dv.rows); + chart.scale('score', { + min: 0, + max: 80 + }); + chart.coordinate('polar', { + radius: 0.8 + }); + chart.tooltip({ + shared: true, + showCrosshairs: true, + crosshairs: { + line: { + style: { + lineDash: [4, 4], + stroke: '#333' + } + } + } + }); + chart.axis('item', { + line: null, + tickLine: null, + grid: { + line: { + style: { + lineDash: null + } + } + } + }); + chart.axis('score', { + line: null, + tickLine: null, + grid: { + line: { + type: 'line', + style: { + lineDash: null + } + } + } + }); + + chart.line().position('item*score').color('user').size(2); + chart.point().position('item*score').color('user').shape('circle').size(4).style({ + stroke: '#fff', + lineWidth: 1, + fillOpacity: 1 + }); + chart.area().position('item*score').color('user'); + chart.render(); +} + function init() { renderPieChart(); renderLineChart(); renderBarChart(); renderScatterChart(); + renderAreaChart(); + renderRadarChart(); } onMounted(() => {