echarts 相关问题

ECharts：使用方程代替二维图表的数据

在下面的 3D 曲面图示例中，省略了系列数据源，并提供了方程属性。我希望对其他绘图类型执行相同的操作，例如简单的二维“线”图。 呃...

与其他日期相比如何缩小单个日期的数据

` 上面的图表获取了比单个日期值更多的日期范围。我想缩小它并使每个数据点具有相同的日期范围。怎么做？ const makeChart = () => { 常量图表 = ech...

无法在 Grafana + Echarts 插件中将数据从数据源转换为系列图

我正在使用 Echarts 插件绘制箱线图： 我的示例箱线图在这里：示例 - Apache ECharts 我的问题是我无法将数据导入 echarts 插件： 我的代码： data.series.map((s) => { ...

无法在动态创建的元素上加载echart

我们在动态创建的元素上初始化 echart 时面临着一个空白图表。 我们尝试过使用下面的代码片段。 让chartDom = document.createElement("div"); ChartDom.style....

在仪表针中设置弹出框（Echarts）

我有这段代码，我尝试将鼠标悬停在第一个仪表针上以获取 .popover({...}) 对象： </sc...</desc> <question vote="0"> <p>我有这段代码，我尝试将鼠标悬停在第一个仪表针上以获取 .popover({...}) 对象：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> &lt;head&gt; &lt;script src=&#34;https://code.jquery.com/jquery-3.6.4.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.0/echarts.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css&#34;&gt; &lt;title&gt;Gauge Chart&lt;/title&gt; &lt;/head&gt; &lt;button id=&#39;btn1&#39;&gt; Let&#39;s &lt;/button&gt; &lt;input id=&#39;slider1&#39; type=&#39;range&#39; value=&#39;34&#39; min=&#39;0&#39; max=&#39;100&#39; step=&#39;.01&#39;&gt; &lt;input id=&#39;slider2&#39; type=&#39;range&#39; value=&#39;89&#39; min=&#39;0&#39; max=&#39;100&#39; step=&#39;.01&#39;&gt; &lt;div id=&#39;chartid1&#39; style=&#39;width:390px; height: 410px;&#39;&gt;&lt;/div&gt; &lt;script&gt; const chart1 = echarts.init(document.getElementById(&#39;chartid1&#39;)); function update1(value1, value2) { option = { series: [{ type: &#39;gauge&#39;, min: 0, max: 100, splitNumber: 10, detail: { fontFamily: &#39;Lato&#39;, fontSize: 14, borderWidth: 1, borderColor: &#39;#020202&#39;, borderRadius: 5, width: 32, height: 20 }, data: [{ value: value1, name: &#39;False&#39;, itemStyle: { color: &#39;#dd4b50&#39; }, title: { offsetCenter: [&#39;-20%&#39;, &#39;20%&#39;] }, detail: { offsetCenter: [&#39;-20%&#39;, &#39;36%&#39;], backgroundColor: &#39;#dd4b50&#39;, color: &#39;#f2f2f2&#39; } }, { value: value2, name: &#39;True&#39;, itemStyle: { color: &#39;#3a9e4b&#39; }, title: { offsetCenter: [&#39;20%&#39;, &#39;20%&#39;] }, detail: { offsetCenter: [&#39;20%&#39;, &#39;36%&#39;], color: &#39;#f2f2f2&#39;, backgroundColor: &#39;#3a9e4b&#39; } } ] }] }; chart1.setOption(option); } function update2() { let value1 = Number($(&#39;#slider1&#39;).val()); let value2 = Number($(&#34;#slider2&#34;).val()); update1(value1, value2); } update2(); document.getElementById(&#39;btn1&#39;).addEventListener(&#39;click&#39;, function() { update2(); }) /// clickable chart1.on(&#39;mouseenter&#39;, {dataIndex:0}, function(params) { $(this).popover({ html: true, sanitize: false, title: &#39;Title &#39;, content: &#39;This a text&#39;, trigger: &#39;hover&#39;, placement: &#39;top&#39;, container: &#39;body&#39; }) }) &lt;/script&gt;</code></pre> </div> </div> <p></p> <p>我需要悬停并获得 .popover。我知道我可以使用 <pre><code>tooltip:{...}</code></pre>，但对于特定情况，我需要配置 .popover。我尝试用 <pre><code>mychart1.on(...</code></pre> 调整上面的代码，但没有成功。我添加了所有代码需求的CDN。</p> </question> <answer tick="false" vote="0"> <p>如果您查看 <a href="https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseover" rel="nofollow noreferrer">文档</a>，该事件称为 <pre><code>mouseover</code></pre>，而不是 <pre><code>mouseenter</code></pre>。 <a href="https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=PYBwLglsB2AEC8sDeAoWsDOBTAThLGAXLANprrLkWxgCeIWxA5AOYCGAri1kwDRUUAthGjEADP2rpBbAB7EAjGIkD0GEABsIYAHIdBAI1yKVU2ABMsYNhA3FUZ9ADMYYAGJthG2swAybMGA-VQoXaDAAZQgAL0ZYBQAWSUcDYBxLHAB1CHMwAAtFZLNU9NwAYWANNOYAYjEAJgaG4MdYEoyAJTZzCA4iWABWIqkAdxz84gBmeuHqPKwIFjywYkaQgF9ZiwC2YjJWh1bYADc2DQ44yaSQ6mhPOKYPDWwWo-0sQQi6DTjDo9gAMaVaqwJg1czmBIGAZiJg3CibeHoSBgH72JEUYBOJzYMBlLDhYykJgAWkaAFI-KCKUwALoYxH_SzWWzo_7oLE4qz4wk4Pakmm8UGTABslNpW2KbABAGsWDhgBxoOYKlU-aDwZDobDJVIgWrak56kajXD_ut4YzHH9HKdznEABwATl16DuggeABUcBdXq13p9vr8Meh9SCwZM2E6sFCzUcra0UWjKOzYJzcTywESSExBdSxOKGa6LFYbHYU-z09yCVn1Tm80xReLi6HgeqwSbjfU_UcDNK5QqlSq27VI9HYwzLSF6dQLeh6esANwoFeCWhlPJsHBgAB0MAAFExBIrsMBjrgqUhzDsAJLKrDyWBiTawJxKgGQA8gLeeDAASgrIFoAwSosB3KoWH3b8cF_P9l3WOCgA" rel="nofollow noreferrer">这里</a>是你的例子：</p> <pre><code>option = { series: [ { type: &#39;gauge&#39;, min: 0, max: 100, splitNumber: 10, detail: { fontFamily: &#39;Lato&#39;, fontSize: 14, borderWidth: 1, borderColor: &#39;#020202&#39;, borderRadius: 5, width: 32, height: 20 }, data: [ { value: 34, name: &#39;False&#39;, itemStyle: { color: &#39;#dd4b50&#39; }, title: { offsetCenter: [&#39;-20%&#39;, &#39;20%&#39;] }, detail: { offsetCenter: [&#39;-20%&#39;, &#39;36%&#39;], backgroundColor: &#39;#dd4b50&#39;, color: &#39;#f2f2f2&#39; } }, { value: 89, name: &#39;True&#39;, itemStyle: { color: &#39;#3a9e4b&#39; }, title: { offsetCenter: [&#39;20%&#39;, &#39;20%&#39;] }, detail: { offsetCenter: [&#39;20%&#39;, &#39;36%&#39;], color: &#39;#f2f2f2&#39;, backgroundColor: &#39;#3a9e4b&#39; } } ] } ] }; myChart.on(&#39;mouseover&#39;, {dataIndex: 0}, function(params) { console.log(params); }); </code></pre> </answer> </body></html>

即使标签的可见性设置为 false，也可以查看 Echarts 中突出显示条形的标签

我想在Echarts中将标签的可见性设置为false，可以通过以下方式实现： 标签： { 显示：假 } 不过，我还有另一个设置： 强调： { 焦点：“爵士...

ECharts 是否导出点击事件的类型？

在 Apache ECharts 中我们可以收到这样的点击事件吗？ myChart.on('点击', 函数(参数) { // 在控制台中打印名称 console.log(params.name); }); 并且文档还提到...

echarts中多个系列的标记点如何居中

我其实想添加一个符号来显示两组x轴数据之间的增长率。 所以我想到了使用markpoint来处理 看看我下面的链接 图表 但这个方法...

echarts4R 工具提示未更新/不准确

我使用 echarts4R 创建了带有预测部分的下面的图表，但工具提示似乎并不准确 - “上带”的标签似乎停留在一个值上，并且确实...

在Shiny Quarto文档中找不到函数renderEcharts4r

第2轮。我正在创建一个四开/闪亮的文档，其中有一个echart图形和一个简单的单选按钮输入小部件，我现在遇到的错误是“renderEcharts4r中的错误（{：可以.. .

如何解决 Pacakge_Path_Not_Exported 错误？

我尝试过： 纱线开始 我在终端中收到此错误： 纱线运行 v1.22.19 警告 ....\package.json：没有许可证字段 $ 反应脚本开始 节点：内部/模块/cjs/loader：571 扔 e； ^ 错误[

图表过渡效果不起作用（Echarts）

我有这个代码： 我有这个代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Norph Chart Example</title> <!-- Adicione o link para a biblioteca ECharts --> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <body> <div id="chart-container" style="width: 600px; height: 400px;"></div> <script> // Inicializar o gráfico ECharts const myChart = echarts.init(document.getElementById('chart-container')); const dataset = { dimensions: ['name', 'score'], source: [ ['Hannah Krause', 314], ['Zhao Qian', 351], ['Jasmin Krause ', 287], ['Li Lei', 219], ['Karle Neumann', 253], ['Mia Neumann', 165], ['Böhm Fuchs', 318], ['Han Meimei', 366] ] }; const pieOption = { dataset: [dataset], series: [ { type: 'pie', // associate the series to be animated by id id: 'Score', radius: [0, '50%'], universalTransition: true, animationDurationUpdate: 1000 } ] }; const barOption = { dataset: [dataset], xAxis: { type: 'category' }, yAxis: {}, series: [ { type: 'bar', // associate the series to be animated by id id: 'Score', // Each data will have a different color colorBy: 'data', encode: { x: 'name', y: 'score' }, universalTransition: true, animationDurationUpdate: 1000 } ] }; option = barOption; setInterval(() => { option = option === pieOption ? barOption : pieOption; // Use the notMerge form to remove the axes myChart.setOption(option, true); }, 2000); </script> </body> </html> 但是从一个图形到另一个图形的过渡效果不起作用，就像在这个页面上一样。 如何调整此代码，以便图形显示这种瞬态效果，并且不会突然从一个变为另一个（如当前代码的情况）？ 注意过渡效果要平滑，如我发送给您的示例页面上的图形所示。看到图形的扇区平滑地变为条形。 正如我怀疑的，这与正确库的使用有关。我检查了他们的源代码，发现他们正在使用以下来源的库： https://fastly.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js 我使用这个库来实现相同的片段，并看到神奇的效果:-) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Norph Chart Example</title> <!-- Adicione o link para a biblioteca ECharts --> <script src="https://fastly.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script> </head> <body> <div id="chart-container" style="width: 600px; height: 400px;"></div> <script> // Inicializar o gráfico ECharts const myChart = echarts.init(document.getElementById('chart-container')); const dataset = { dimensions: ['name', 'score'], source: [ ['Hannah Krause', 314], ['Zhao Qian', 351], ['Jasmin Krause ', 287], ['Li Lei', 219], ['Karle Neumann', 253], ['Mia Neumann', 165], ['Böhm Fuchs', 318], ['Han Meimei', 366] ] }; const pieOption = { dataset: [dataset], series: [ { type: 'pie', // associate the series to be animated by id id: 'Score', radius: [0, '50%'], universalTransition: true, animationDurationUpdate: 1000 } ] }; const barOption = { dataset: [dataset], xAxis: { type: 'category' }, yAxis: {}, series: [ { type: 'bar', // associate the series to be animated by id id: 'Score', // Each data will have a different color colorBy: 'data', encode: { x: 'name', y: 'score' }, universalTransition: true, animationDurationUpdate: 1000 } ] }; option = barOption; setInterval(() => { option = option === pieOption ? barOption : pieOption; // Use the notMerge form to remove the axes myChart.setOption(option, true); }, 2000); </script> </body> </html> 希望有帮助！！

如何在echart中添加格式化工具提示以实现饼图的多个值

我正在使用echart饼图，但我想在工具提示中显示多条记录。 选项={ 工具提示：{ 触发器：'项目'， 格式化程序：'{a} {b} : {c} ({d}%), {na...

Apache ECharts 类型“string”无法分配给类型““pictorialBar””？

这个演示有效。 但是，这些选项使用任何选项，我正在尝试将它们转换为 EChartOption 类型。 这就是我到目前为止所拥有的，演示可以很好地编译（使用类型：“bar”comm...

Apache ECharts 属性“触发器”类型不兼容

在这个演示中，我试图构建一些选项，这就是我到目前为止所拥有的。 testOptions: EChartsOption = Object.assign( {}, { 背景颜色：'红色'， 工具提示：{

Apache E Charts从左到右的树状图表中，如何动态计算容器div的正确高度和宽度？

在 Apache E Charts 中从左到右树形图 https://echarts.apache.org/examples/en/editor.html?c=tree-basic 如果有大量节点（例如 200 个点头），树就会变得非常笨拙......

Echarts：如何在鼠标事件期间获取x和y值

我有以下图表： const quoteChart = echarts.init(quotesContainer); 报价图表.setOption({ 数据集：[ {来源：引用} ], x轴：[ { 类型：'类别'， }, ],

将 Angular ECharts 导入 Stackblitz 15.1 项目？

Stackblitz 现在使用 Angular 项目的独立配置，当我尝试初始化 Angular ECharts (ngx-echarts) 模块时，它会产生以下错误： src/m 错误...

Echarts如何突出显示2个折线图之间的区域

我想开发一个echart，其中两个折线图之间的区域以颜色突出显示。为了实现这一点，我使用了堆积面积图。我将上部区域的颜色设置为高亮颜色...

使用 dataZoom 时 apache echarts 中的条形图溢出

我正在使用 apache echarts 版本 5.2.2 来渲染两个笛卡尔轴带有 datazoom 的条形图。然而，我发现这个代码有一个容易重现的错误，可以在