From 861674352b5b7cdeb9ef1aa721706cbec9f1be58 Mon Sep 17 00:00:00 2001 From: Justineo Date: Sat, 29 Jun 2024 00:20:14 +0800 Subject: [PATCH] docs: improve demo --- src/demo/Demo.vue | 13 +------------ src/demo/data/connect.js | 20 ++++++++++++-------- src/demo/data/map.js | 13 ++++++++----- src/demo/data/pie.js | 4 +++- src/demo/data/polar.js | 10 +++++++--- src/demo/data/radar.ts | 29 ++++------------------------- src/demo/data/scatter.js | 10 ++++++++-- src/demo/examples/ConnectChart.vue | 6 ++---- src/demo/examples/Example.vue | 3 --- src/demo/examples/GlChart.vue | 2 ++ src/demo/examples/ManualChart.vue | 7 +++++-- src/demo/examples/PolarChart.vue | 6 ++---- 12 files changed, 54 insertions(+), 69 deletions(-) diff --git a/src/demo/Demo.vue b/src/demo/Demo.vue index 1e943ff..375be23 100644 --- a/src/demo/Demo.vue +++ b/src/demo/Demo.vue @@ -111,9 +111,7 @@ watch(codeOpen, open => { @@ -447,15 +445,6 @@ select { align-items: center; padding: 0 4px; gap: 4px; - - .badge { - display: block; - padding: 2px 3px; - font-size: 10px; - background: #36485e54; - color: #fff; - border-radius: 4px; - } } } diff --git a/src/demo/data/connect.js b/src/demo/data/connect.js index 4070281..cbe5709 100644 --- a/src/demo/data/connect.js +++ b/src/demo/data/connect.js @@ -15,15 +15,16 @@ const c1 = { fontWeight: 300 }, legend: { - top: 20, + top: "3%", data: ["scatter"] }, tooltip: { formatter: "{c}" }, grid: { - top: "26%", - bottom: "26%" + top: "30%", + right: "18%", + bottom: "20%" }, xAxis: { type: "value", @@ -40,7 +41,8 @@ const c1 = { visualMap: [ { realtime: false, - left: "right", + right: "2%", + bottom: "3%", selectedMode: "multiple", dimension: 2, selected: [], @@ -67,15 +69,16 @@ const c2 = { fontWeight: 300 }, legend: { - top: 20, + top: "3%", data: ["scatter"] }, tooltip: { formatter: "{c}" }, grid: { - top: "26%", - bottom: "26%" + top: "30%", + right: "18%", + bottom: "20%" }, xAxis: { type: "value", @@ -91,7 +94,8 @@ const c2 = { }, visualMap: [ { - left: "right", + right: "2%", + bottom: "3%", selectedMode: "multiple", dimension: 2, selected: [], diff --git a/src/demo/data/map.js b/src/demo/data/map.js index cce632f..7bd17df 100644 --- a/src/demo/data/map.js +++ b/src/demo/data/map.js @@ -408,6 +408,7 @@ export default function getData() { text: "Air quality of major cities in China", subtext: "data from PM25.in", sublink: "http://www.pm25.in", + top: "5%", left: "center", textStyle: { color: "#fff" @@ -418,9 +419,9 @@ export default function getData() { }, legend: { orient: "vertical", - y: "bottom", - x: "right", - data: ["pm2.5"], + right: "5%", + bottom: "5%", + data: ["PM2.5"], textStyle: { color: "#fff" } @@ -438,11 +439,13 @@ export default function getData() { itemStyle: { areaColor: "#323c48", borderColor: "#111" - } + }, + top: "20%", + bottom: "7%" }, series: [ { - name: "pm2.5", + name: "PM2.5", type: "scatter", coordinateSystem: "geo", data: convertData(data), diff --git a/src/demo/data/pie.js b/src/demo/data/pie.js index 3c5020b..bd76b3f 100644 --- a/src/demo/data/pie.js +++ b/src/demo/data/pie.js @@ -6,6 +6,7 @@ export default function getData() { }, title: { text: "Traffic Sources", + top: "5%", left: "center" }, tooltip: { @@ -14,7 +15,8 @@ export default function getData() { }, legend: { orient: "vertical", - left: "left", + top: "5%", + left: "5%", data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"] }, series: [ diff --git a/src/demo/data/polar.js b/src/demo/data/polar.js index be773e0..7b6f046 100644 --- a/src/demo/data/polar.js +++ b/src/demo/data/polar.js @@ -13,13 +13,17 @@ export default function getData() { fontWeight: 300 }, title: { - text: "Dual Numeric Axis" + text: "Dual Numeric Axis", + top: "5%", + left: "5%" }, legend: { - data: ["line"] + data: ["line"], + top: "6%" }, polar: { - center: ["50%", "54%"] + radius: "65%", + center: ["50%", "56%"] }, tooltip: { trigger: "axis", diff --git a/src/demo/data/radar.ts b/src/demo/data/radar.ts index 9056bf2..b6b46f2 100644 --- a/src/demo/data/radar.ts +++ b/src/demo/data/radar.ts @@ -15,37 +15,17 @@ export const useScoreStore = defineStore("store", () => { return scores.value.map(({ name }) => name); }); - const scoreRadar = computed(() => { + function getRadarData(activeIndex: number) { return { title: { - text: "Player Ability" + text: "Player Ability", + top: "5%", + left: "5%" }, textStyle: { fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif', fontWeight: 300 }, - radar: { - indicator: scores.value.map(({ name, max }) => { - return { name, max }; - }) - }, - series: [ - { - name: "Value", - type: "radar", - data: [{ value: scores.value.map(({ value }) => value) }] - } - ] - }; - }); - - function getRadarData(activeIndex: number) { - return { - animation: false, - title: { - text: "Player Ability" - }, - tooltip: {}, radar: { indicator: scores.value.map(({ name, max }, index) => { if (index === activeIndex) { @@ -81,7 +61,6 @@ export const useScoreStore = defineStore("store", () => { return { scores, metrics, - scoreRadar, getRadarData, increase, isMax, diff --git a/src/demo/data/scatter.js b/src/demo/data/scatter.js index 79df4c5..616c355 100644 --- a/src/demo/data/scatter.js +++ b/src/demo/data/scatter.js @@ -47,15 +47,21 @@ const data = [ export default function getData() { return { + grid: { + top: "25%" + }, textStyle: { fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif', fontWeight: 300 }, title: { - text: "Life Expectancy vs. GDP by country" + text: "Life Expectancy vs. GDP by country", + top: "5%", + left: "5%" }, legend: { - right: 10, + top: "6%", + right: "5%", data: ["1990", "2015"] }, xAxis: { diff --git a/src/demo/examples/ConnectChart.vue b/src/demo/examples/ConnectChart.vue index 9afc414..9a3f6fe 100644 --- a/src/demo/examples/ConnectChart.vue +++ b/src/demo/examples/ConnectChart.vue @@ -46,10 +46,8 @@ watch( diff --git a/src/demo/examples/Example.vue b/src/demo/examples/Example.vue index f35a334..232a44a 100644 --- a/src/demo/examples/Example.vue +++ b/src/demo/examples/Example.vue @@ -49,7 +49,6 @@ defineProps({ width: calc(60vw + 4em); height: 360px; max-width: 720px; - padding: 1.5em 2em; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; box-shadow: 0 0 45px rgba(0, 0, 0, 0.2); @@ -75,7 +74,6 @@ defineProps({ width: 100%; min-width: 0; height: 60vw; - padding: 1em 0; border: none; border-radius: 0; box-shadow: none; @@ -88,7 +86,6 @@ defineProps({ .echarts { width: 28vw; min-width: 240px; - padding: 1em 1.5em; height: 180px; } diff --git a/src/demo/examples/GlChart.vue b/src/demo/examples/GlChart.vue index a951cd4..332452a 100644 --- a/src/demo/examples/GlChart.vue +++ b/src/demo/examples/GlChart.vue @@ -50,6 +50,8 @@ onMounted(() => { } }, visualMap: { + bottom: "3%", + left: "3%", max: 40, calculable: true, realtime: false, diff --git a/src/demo/examples/ManualChart.vue b/src/demo/examples/ManualChart.vue index c247271..fa102ef 100644 --- a/src/demo/examples/ManualChart.vue +++ b/src/demo/examples/ManualChart.vue @@ -46,6 +46,7 @@ function load() { }, title: { text: "World Flights", + top: "5%", left: "center", textStyle: { color: "#eee" @@ -62,8 +63,10 @@ function load() { }, geo: { map: "world", - left: 0, - right: 0, + top: "15%", + right: "5%", + bottom: "5%", + left: "5%", silent: true, itemStyle: { borderColor: "#003", diff --git a/src/demo/examples/PolarChart.vue b/src/demo/examples/PolarChart.vue index 953cd32..258ac85 100644 --- a/src/demo/examples/PolarChart.vue +++ b/src/demo/examples/PolarChart.vue @@ -58,10 +58,8 @@ const style = computed(() => { - + +