echarts 相关问题

百度的商业图表解决方案，最初旨在满足公司各种业务系统的报告需求。

我正在使用 vue-echarts 并创建了以下组件：从 'echarts/core' 导入 { use } 从 'echarts/charts' 导入 { GaugeChart } 导入 { CanvasRende...</desc> <question vote="1"> <p>我正在使用 <a href="https://github.com/ecomfe/vue-echarts" rel="nofollow noreferrer">vue-echarts</a> 并且创建了以下组件：</p> <pre><code><script setup lang="ts"> import { use } from 'echarts/core' import { GaugeChart } from 'echarts/charts' import { CanvasRenderer } from 'echarts/renderers' import VChart from 'vue-echarts' use([GaugeChart, CanvasRenderer]) const option = { series: [ { type: 'gauge', startAngle: 180, endAngle: 0, radius: '100%', detail: { width: '60%', // default 100 lineHeight: 40, // default 30 offsetCenter: [0, -12], formatter: (value) => `{value|${value}}`, rich: { value: { fontSize: 40 } } }, data: [{ value: 58.2 }] } ] } </script> <template> <VChart style="width: 600px; height: 400px" :option /> </template> </code></pre> <p>当我使用该组件时，结果如下： <a href="https://i.sstatic.net/65g2f0hB.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvNjVnMmYwaEIucG5n" alt="enter image description here"/></a></p> <p>如您所见，仪表图的周长比其容器（画布）小得多。因为我想在其他地方使用这个组件，所以我不需要所有这些空白。有没有办法指定图表必须采用的确切宽度和高度？</p> <p><strong>编辑#1</strong></p> <p>经过一些尝试和错误，我终于达到了这一点：</p> <p><a href="https://i.sstatic.net/XHWE85cg.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvWEhXRTg1Y2cucG5n" alt="enter image description here"/></a></p> <p>现在仪表图看起来正是我想要的样子，唯一的问题是额外的底部空间，这使得它比实际高度更高。因为我想在周围使用这个组件（并对齐它），所以我不能将它与这个额外的底部空间一起使用。有没有办法去除它而不影响它现在的外观？</p> <p>更新代码：</p> <pre><code><script setup lang="ts"> import { use } from 'echarts/core' import { GaugeChart } from 'echarts/charts' import { CanvasRenderer } from 'echarts/renderers' import VChart from 'vue-echarts' use([GaugeChart, CanvasRenderer]) const option = { series: [ { type: 'gauge', startAngle: 180, endAngle: 0, radius: '100%', detail: { offsetCenter: [0, -8], formatter: (value) => `{value|${value}}`, rich: { value: { fontSize: 24 } } }, data: [{ value: 58.2 }] } ] } </script> <template> <VChart style="width: 150px; height: 150px" :option /> </template> </code></pre> </question> <answer tick="false" vote="2"> <p>使用 <a href="https://echarts.apache.org/en/option.html#series-gauge.center" rel="nofollow noreferrer"><pre><code>series.center</code></pre></a> 属性，您可以将图表放置在容器内。您可以使用 <a href="https://echarts.apache.org/en/option.html#series-gauge.radius" rel="nofollow noreferrer"><pre><code>series.radius</code></pre></a> 设置相对于容器大小动态缩放它。</p> <pre><code>const option = { series: [ { type: "gauge", // https://echarts.apache.org/en/option.html#series-gauge.center // can set the position of the chart center using X and Y coordinates in the series.center property center: ["50%", "50%"], // default: [50%, 50%] // https://echarts.apache.org/en/option.html#series-gauge.radius // can be a percentage value of the smaller of container half width and half height, also can be an absolute value radius: "100%", // default: 75% // ... }, ], renderer: "svg", }; </code></pre> <p><a href="https://codesandbox.io/p/devbox/vue-echarts-svg-resize-3fnhdw?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clvxruox800073j6gj0a2m6hk%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clvxruox600023j6guzvv516d%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clvxruox800043j6g1w48sey8%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clvxruox800063j6gaen6whl7%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clvxruox600023j6guzvv516d%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvxruox600013j6gnohaypyy%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%257D%255D%252C%2522id%2522%253A%2522clvxruox600023j6guzvv516d%2522%252C%2522activeTabId%2522%253A%2522clvxruox600013j6gnohaypyy%2522%257D%252C%2522clvxruox800063j6gaen6whl7%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvxruox800053j6guudtqneq%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522pnpm%2520run%2520dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clvxruox800063j6gaen6whl7%2522%252C%2522activeTabId%2522%253A%2522clvxruox800053j6guudtqneq%2522%257D%252C%2522clvxruox800043j6g1w48sey8%2522%253A%257B%2522id%2522%253A%2522clvxruox800043j6g1w48sey8%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvxruox700033j6glpsh7si1%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522pnpm%2520run%2520dev%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clvxruox700033j6glpsh7si1%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D" rel="nofollow noreferrer">示例 -codesandbox.io</a></p> </answer> </body></html>

vuejs3 echarts

回答 0 投票 0

如何设置vue-echart的宽度和高度？（不是画布）

我正在使用 vue-echarts 并创建了以下组件：从 'echarts/core' 导入 { use } 从 'echarts/charts' 导入 { GaugeChart } 导入 { CanvasRende...</desc> <question vote="0"> <p>我正在使用 <a href="https://github.com/ecomfe/vue-echarts" rel="nofollow noreferrer">vue-echarts</a> 并且创建了以下组件：</p> <pre><code><script setup lang="ts"> import { use } from 'echarts/core' import { GaugeChart } from 'echarts/charts' import { CanvasRenderer } from 'echarts/renderers' import VChart from 'vue-echarts' use([GaugeChart, CanvasRenderer]) const option = { ... } </script> <template> <VChart style="width: 600px; height: 400px" :option /> </template> </code></pre> <p>当我使用该组件时，结果如下： <a href="https://i.sstatic.net/wZxWK9Y8.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvd1p4V0s5WTgucG5n" alt="enter image description here"/></a></p> <p>遵守指定的宽度和高度，但图表要小得多。我需要它具有精确的宽度和高度，我该怎么做？</p> </question> <answer tick="false" vote="0"> <p>使用 <a href="https://echarts.apache.org/en/option.html#series-gauge.center" rel="nofollow noreferrer"><pre><code>series.center</code></pre></a> 属性，您可以将图表放置在容器内。您可以使用 <a href="https://echarts.apache.org/en/option.html#series-gauge.radius" rel="nofollow noreferrer"><pre><code>series.radius</code></pre></a> 设置相对于容器大小动态缩放它。</p> <pre><code>const option = { series: [ { type: "gauge", // https://echarts.apache.org/en/option.html#series-gauge.center // can set the position of the chart center using X and Y coordinates in the series.center property center: ["50%", "50%"], // https://echarts.apache.org/en/option.html#series-gauge.radius // radius of gauge chart. It can be a percentage value of the smaller of container half width and half height, also can be an absolute value radius: "100%", // ... }, ], renderer: "svg", }; </code></pre> </answer> </body></html>

vuejs3 echarts

回答 0 投票 0

pyecharts网格图共轮缩放

在 pyecharts 中，我创建了一个网格，其中两个图形具有相同的 x 轴。我希望能够使用鼠标滚轮同时缩放两者。它使用 datazoom_opts=[opts.

python echarts

回答 1 投票 0

如何使用encode在eCharts中显示多行？

在eCharts中，如何修改以下选项以在图表中显示多条线？我想要的是一条生产“抹茶拿铁”的生产线和一条生产“奶酪可可”的生产线？我会...

echarts

回答 2 投票 0

工具提示位置跟随鼠标并仅显示一次类别数据 - Apache ECharts

如何使工具提示跟随鼠标（出现在其旁边）并且工具提示仅显示categoryData（DateTimes）一次，目前显示3次。还有一个小问题，我有 2 卷系列...