2a:null 2b:["$","title",null,{"children":"How to make charming dashboard with G2Plot 😉 | 廖晓娟 | Observable"}] 30:T1af3,ringProgress = { const plot = new G2Plot.RingProgress("c1", { percent: 0.84, color: ["#009CFF", "rgba(0,0,0,0.05)"], radius: 0.94, progressStyle: { lineCap: "round" }, statistic: { title: { customHtml: (container, view) => { const radius = view.getCoordinate().getRadius(); container.className += " statistic-icon-container"; container.style.width = `${radius * 0.48}px`; container.style.height = `${radius * 0.48}px`; // svg icon 溢出不隐藏 container.style.overflow = "visible"; // 影响 svg 颜色 container.style.fill = "#009CFF"; return ''; } }, content: { style: { fontSize: "21.15px", color: "rgba(0,0,0,0.45)", letterSpacing: "-0.13px" } } } }); plot.render(); const plot2 = new G2Plot.RingProgress("c2", { percent: 0.6, color: ["#FF8BDD", "rgba(0,0,0,0.05)"], radius: 0.94, progressStyle: { lineCap: "round" }, statistic: { title: { customHtml: (container, view) => { const radius = view.getCoordinate().getRadius(); container.className += " statistic-icon-container"; container.style.width = `${radius * 0.42}px`; container.style.height = `${radius * 0.42}px`; // svg icon 溢出不隐藏 container.style.overflow = "visible"; // 影响 svg 颜色 container.style.fill = "#FF8BDD"; return ""; } }, content: { style: { fontSize: "21.15px", color: "rgba(0,0,0,0.45)", letterSpacing: "-0.13px" } } } }); plot2.render(); const plot3 = new G2Plot.RingProgress("c2-2", { percent: 0.92, color: ["#41C195", "rgba(0,0,0,0.05)"], radius: 0.94, progressStyle: { lineCap: "round" }, statistic: { title: { customHtml: (container, view) => { const radius = view.getCoordinate().getRadius(); container.className += " statistic-icon-container"; container.style.width = `${radius * 0.48}px`; container.style.height = `${radius * 0.48}px`; // svg icon 溢出不隐藏 container.style.overflow = "visible"; // 影响 svg 颜色 container.style.fill = "#41C195"; return ""; } }, content: { style: { fontSize: "21.15px", color: "rgba(0,0,0,0.45)", letterSpacing: "-0.13px" } } } }); plot3.render(); return [plot, plot2, plot3]; }31:Tff4,gauges = { const GAUGE_1 = { percent: 0.87, appendPadding: [0, 0, 8, 0], startAngle: -Math.PI, endAngle: 0, range: { color: "l(0) 0:#0099FF 0.25:#09ADDF 0.75:#15C8B7 1:#1EDB9A" }, indicator: false, statistic: { title: { formatter: () => "目标完成度", style: { color: "#000", opacity: 0.65, fontSize: "12px" } }, content: { offsetY: -14, formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`, style: { color: "#000", opacity: 0.85, fontSize: "24px" } } } }; const plot = new G2Plot.Gauge("c3", { ...GAUGE_1, radius: 1, innerRadius: 0.85, type: "meter", meter: { steps: 30, stepRatio: 0.88 } }); plot.render(); const plot2 = new G2Plot.Gauge("c4", { ...GAUGE_1, innerRadius: 0.85, type: "" }); plot2.render(); const GAUGE_2 = { percent: 0.87, radius: 1, innerRadius: 0.82, appendPadding: [0, 0, 8, 0], indicator: false }; const plot3 = new G2Plot.Gauge("c5", { ...GAUGE_2, type: "meter", meter: { steps: 4, stepRatio: 0.97 }, axis: false, statistic: false, range: { ticks: [0, 0.25, 0.5, 0.75, 1], color: [ "r(0,0,1) 0:#FAAD14 1:#F4664A", "r(0.1,1,1) 0:#FAAD14 1:#CBFF49", "r(0,0,1) 0:#CEEE27 1:#30BF78", "r(0,0,1) 0:#A0D911 1:#30BF78" ] }, annotations: [ { type: "html", // 圆弧角度是 3 / 4 * Math.PI * 2 position: ["50%", `${(Math.sqrt(2) / 8 + 0.5) * 100}%`], html: (container, view) => { const coordiante = view.views[0].getCoordinate(); const radius = coordiante.getRadius() * coordiante.radius * coordiante.innerRadius; const size = radius * 1.5; const markerSize = 10; const offsetX = radius - markerSize / 2; // positionY: (Math.sqrt(2) / 8 + 0.5) const offsetY = markerSize * (Math.sqrt(2) / 8 + 0.5); return `

优秀

卫生评级

`; } } ] }); plot3.render(); const plot4 = new G2Plot.Gauge("c6", { ...GAUGE_2, type: "", axis: false, statistic: {}, range: { ticks: [0, GAUGE_2.percent, 1], color: "l(0) 0:#F4664A 0.2:#FAAD14 0.4:#CBFF49 0.6:#CEEE27 0.8:#A0D911 1:#30BF78" }, annotations: [ { type: "html", position: ["50%", `${(Math.sqrt(2) / 8 + 0.5) * 100}%`], html: () => { return `

优

系统表现

`; } } ] }); plot4.render(); return [plot, plot2, plot3, plot4]; }32:T11ea,radialBar = { const TooltipContainerStyle = `z-index:20;display: flex;box-shadow:rgb(174, 174, 174) 0px 0px 10px; border-radius: 3px;font-size: 12px; line-height: 12px; padding: 0px 12px;pointer-events: none; padding:4px 10px;`; const TooltipMarkerStyle = `width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px;`; const plot = new G2Plot.RadialBar("c9", { data: [ { type: "不好", value: 100 }, { type: "还可以", value: 400 }, { type: "不太好", value: 600 }, { type: "很满意", value: 800 } ], xField: "type", yField: "value", colorField: "type", radius: 0.96, innerRadius: 0.55, barBackground: { style: { fill: "rgb(0,0,0)", fillOpacity: 0.05 } }, barStyle: { lineCap: "round" }, xAxis: false, // 关闭 tooltip，默认使用 annotations 展示所有信息 tooltip: false, annotations: [ { type: "html", position: ["50%", "0%"], html: (container, view) => { const width = 140; container.style.transform = `translate(${-width - 20}px, -10px)`; const models = view.geometries[0].elements.map((ele) => ele.getModel() ); let content = ""; // 降序 models .sort((a, b) => b.data["value"] - a.data["value"]) .forEach((model, index) => { content += `

`; }); return ``; } }, { type: "html", position: ["50%", "50%"], html: (container, view) => { const width = view.getCoordinate().getRadius() * 0.4; container.style.transform = `translate(-50%, -${width}px)`; return ``; } }, { type: "html", position: ["50%", "50%"], html: (container, view) => { const width = view.getCoordinate().getRadius(); // 🧙‍♀️ container.style.transform = width < 80 ? "translate(-50%, 0px) scale(0.8)" : "translate(-50%, 8px)"; const sum = view.getData().reduce((a, b) => a + b.value, 0); return `

${sum} 人

`; } } ], // 关闭元素激活交互 interactions: [{ type: "element-active", enable: false }] }); plot.render(); return plot; }33:[] 2e:{"id":"b470486a82c39aaf","slug":"how-to-make-charming-dashboard-with-g2plot","title":"How to make charming dashboard with G2Plot 😉","thumbnail":"8634dd414a5a98eafcc41f7bef27922e133e5a3a04efeb77a743b14d8b374d78","access_level":"public","create_time":"$D2021-07-01T10:11:08.228Z","update_time":"$D2021-07-01T12:31:57.880Z","view_time":null,"first_public_time":"$D2021-07-01T12:28:25.775Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"43eb0216033f303e","login":"visiky","name":"廖晓娟","avatar_url":"https://avatars-next.observableusercontent.com/f525ef0af81c7728535c96eda2de2ea96c17ff10563acfdf254c6b5f3fd1c7b4","tier":"starter_2024"},"version":158,"publish_version":158,"role":null,"authored":false,"authors":[{"type":"individual","id":"6c057a398a73f6b0","login":"visiky","name":"廖晓娟","avatar_url":"https://avatars-next.observableusercontent.com/f525ef0af81c7728535c96eda2de2ea96c17ff10563acfdf254c6b5f3fd1c7b4","tier":null}],"members":[{"type":"individual","id":"6c057a398a73f6b0","login":"visiky","name":"廖晓娟","avatar_url":"https://avatars-next.observableusercontent.com/f525ef0af81c7728535c96eda2de2ea96c17ff10563acfdf254c6b5f3fd1c7b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"How to make charming dashboard with G2Plot 😉","cells":[{"id":0,"value":"# How to make charming dashboard with G2Plot 😉","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":15,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":4,"value":"Click [here](http://vis-dashboard.antv.vision/dashboard-a) to visit online demo. I'll show you how to implement each chart with [G2Plot](https://g2plot.antv.vision) below","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":30,"value":"## RingProgress Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":41,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":45,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"## Gauge Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":71,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":69,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"## Column Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":115,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":119,"value":"plot = {\n fetch(\"https://gw.alipayobjects.com/os/antfincdn/PC3daFYjNw/column-data.json\")\n .then((data) => data.json())\n .then((data) => {\n const plot = new G2Plot.Column(\"c8\", {\n data,\n xField: \"city\",\n yField: \"value\",\n seriesField: \"type\",\n isGroup: \"true\",\n columnStyle: {\n radius: [2, 2, 0, 0]\n },\n xAxis: { title: { text: \"Work\" } },\n yAxis: { title: { text: \"Number of customers\" } },\n meta: {\n value: {\n formatter: (v) => numeral(v).format(\"0,0\")\n }\n },\n minColumnWidth: 6,\n maxColumnWidth: 12,\n dodgePadding: 1\n });\n\n plot.render();\n });\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"## Radial-Bar Plor","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":133,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":135,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"## Sankey Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":100,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":102,"value":"sankey = {\n const plot = new G2Plot.Sankey(\"c7\", {\n data: [\n { source: \"首页推荐\", target: \"跳转\", value: 25 },\n { source: \"我的\", target: \"跳转\", value: 20 },\n { source: \"财富\", target: \"跳转\", value: 15 },\n { source: \"公益\", target: \"跳转\", value: 12 },\n { source: \"其他\", target: \"跳转\", value: 7 },\n\n { source: \"跳转\", target: \"消息\", value: 32 },\n { source: \"跳转\", target: \"商家生活号\", value: 28.8 },\n { source: \"跳转\", target: \"其他渠道\", value: 16.4 }\n ],\n sourceField: \"source\",\n targetField: \"target\",\n weightField: \"value\",\n nodeWidthRatio: 0.012,\n nodePaddingRatio: 0.03,\n nodeDraggable: true\n });\n plot.render();\n return plot;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"G2Plot = require(\"@antv/g2plot\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"numeral = require(\"numeral\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"# Finally\n\nIf you like this, give [G2Plot](https://github.com/antvis/G2Plot) a 🌟 as a support of our works. Thanks!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"