百度的商业图表解决方案,最初旨在满足公司各种业务系统的报告需求。
我想创建一个这样的图表: 我检查了示例:https://echarts.apache.org/examples/en 但找不到类似的东西。 有人用 Echarts 实现过这样的事情吗?
我在 Angular 16 项目中使用 echarts。初始化数据为空,并填充来自 api 的数据。 当使用缩放选项然后恢复图表时,图表为空(初始状态)并且未填充 api 调用。 如何
Apache EChart SplitNumber 未按预期工作
我相信这可能是由于我对echart的xAxis和yAxis splitNumber变量的误解造成的。 如果你看一下我这里的例子,xAxis 和 splitNumber 为 10,我有 15
单击按钮后,我会显示图表。首次实例化图表时,会在图表的父容器上设置 ResizeObserver。我的应用程序有一个可折叠的侧边栏,当我折叠时......
使用 highcharts 制作图表示例 我在使用 Echarts 和 ngx-echarts 制作类似的图表时遇到困难,有人也经历过这种情况吗? 使用 “@Angular/animations&quo...
我正在使用Echarts实现这样一个图表,一个x轴代表时间,多个y轴代表不同的信号 我使用多网格,每个网格包含一个折线图,一切都很好,例外...
我需要更新series.data中的两个参数,名称和值。问题是我无法以正式的方式分离这个更新。我什至设法做到这一点,例如,通过创建另一个
Apache Echarts - 自定义 Echarts 中网络图的节点悬停的节点形状和值
我有两个关于自定义echarts网络图的节点和边的问题:- 我们如何将节点的形状从圆形更改为方形? 我们如何在节点悬停时显示自定义数据
Edge 与 Chrome 中的 Apache Echarts GPU 内存消耗
我正在使用 Apache ECharts(画布渲染器)绘制 25 个系列的基本折线图,每个系列 100 个数据点(总共 2500 个数据点)。在 Edge 中,这会使我的 GPU 内存消耗增加约 1GB...
Apache Echarts 无法工作。错误-图例数据应与系列名称或数据名称相同
Apache Echarts 无法工作。错误 - 图例数据应与系列名称或数据名称相同。 即使我的系列名称和图例数据中的名称匹配,它也会给出上述错误......
Apache eCharts Angular 在堆栈上绘制标记线
我有一个折线图,其中的 markLine 显示当前日期。不幸的是,该行显示在其他堆栈系列的下方。设置 zLevel 也没有帮助。 { // .. 其他配置
我正在使用 vue-echarts 并创建了以下组件: 从“vue-echarts”导入 VChart 从 'echarts/core' 导入 { use } 从'ech导入{GaugeChart}...</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 VChart from 'vue-echarts' import { use } from 'echarts/core' import { GaugeChart } from 'echarts/charts' import { CanvasRenderer } from 'echarts/renderers' use([GaugeChart, CanvasRenderer]) const roundCap = true const width = 12 const option = { series: [ { type: 'gauge', startAngle: 180, endAngle: 0, min: 0, max: 100, itemStyle: { color: { type: 'linear', x: 0, y: 1, x2: 1, y2: 1, colorStops: [ { offset: 0, color: '#E02F1E' }, { offset: 0.1, color: '#E53C2B' }, { offset: 0.2, color: '#ED7936' }, { offset: 0.3, color: '#F19C3C' }, { offset: 0.41, color: '#E9AD3C' }, { offset: 0.52, color: '#E0BF3C' }, { offset: 0.63, color: '#BCBC33' }, { offset: 0.72, color: '#75B520' }, { offset: 0.86, color: '#29AE0C' }, { offset: 1, color: '#01AA01' } ] } }, progress: { show: true, roundCap, width }, axisLine: { roundCap, lineStyle: { width } }, data: [{ value: 100 }] } ] } </script> <template> <VChart :option /> </template> </code></pre> <p>当我使用该组件时,这就是结果(看起来不错):</p> <p><a href="https://i.sstatic.net/QV7EUDnZ.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvUVY3RVVEbloucG5n" alt="enter image description here"/></a></p> <p>但是当值减小时,这就是丑陋的结果:</p> <p><a href="https://i.sstatic.net/veZPjqo7.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvdmVaUGpxbzcucG5n" alt="enter image description here"/></a></p> <p>我的配置中肯定缺少一些东西,你知道我该如何修复外观吗?</p> </question> <answer tick="false" vote="0"> <p>您可以查看官方文档作为案例研究。 <a href="https://echarts.apache.org/examples/zh/index.html#chart-type-funnel" rel="nofollow noreferrer">https://echarts.apache.org/examples/zh/index.html#chart-type-funnel</a></p> </answer> </body></html>
如果缩放中没有值,Apache Echarts 会隐藏 y 轴(垂直)条目
如果我们有这种图表类型(配置文件) https://echarts.apache.org/examples/en/editor.html?c=custom-profile&random=b 我无法找到任何有关如何放大到某个部分的文档...
在角度15中为ngx-echarts启用Treeshaking
我正在尝试在 Angx-echarts 的 Angular 15 独立组件中使用 Treeshaking。我遵循了文档,但摇树似乎不起作用。 任何人都可以帮忙吗? 我已经尝试过两种定制构建...
通过HTTP API(Json)在Grafana中绑定Apache EChart
我们正在审查 Apache ECharts 与 Grafana 的集成。 我们已经成功地集成了大多数图表类型,但我们仍然坚持使用“树形图”。 我们见过这样的例子:https://echarts.volkovlabs....
更新时间序列数据时如何保持当前数据缩放?我有一个图表,每 1 分钟更新一次数据,但每次更新数据时数据缩放都会重置为 100。还有...
如何设置vue-echart的宽度和高度? (不是画布宽度和高度)
我正在使用 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>
我正在使用 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>
在 pyecharts 中,我创建了一个网格,其中两个图形具有相同的 x 轴。我希望能够使用鼠标滚轮同时缩放两者。它使用 datazoom_opts=[opts.
在eCharts中,如何修改以下选项以在图表中显示多条线?我想要的是一条生产“抹茶拿铁”的生产线和一条生产“奶酪可可”的生产线?我会...