echarts 相关问题

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

Apache Echarts Change Legend 如何为 select 添加替代行为

我有一个图表，现在默认情况下在图例中，当您单击某个项目时，它会在图表中消失，而不是我想要实现的，当您单击该项目时，您只能在图表中看到该项目

reactjs charts echarts react-tsx apache-echarts

回答 1 投票 0

使用Echarts（来自百度）我想在div元素中放置一个饼图（我正在使用bootstrap）。所以我有：使用Echarts（来自百度）我想在div元素中放置一个饼图（我正在使用bootstrap）。所以我有： <div class="row"> <div class="col-md-4"> <div id="chartGift" style="height:400px;"></div> </div> </div> 我从官方文档中获取了javascript代码 https://ecomfe.github.io/echarts/doc/example/pie1.html#-en 问题是饼图没有出现，因为检查html代码，我看到宽度为0。为什么echarts不从父元素设置宽度？我不想设置静态宽度（我看到它有效），因为图表没有响应。如果您只想设置固定高度，请尝试将宽度设置为容器的 100% 并设置最小高度： <div id="chartGift" style="width: 100%; min-height: 400px"></div> 这对我有用！另外，如果您想确保图表具有响应能力，您可以知道何时调整窗口大小并强制图表调整大小。像这样： $(window).on('resize', function(){ if(chart != null && chart != undefined){ chart.resize(); } }); 希望有帮助！只需使用 ResizeObserver 即可检测图表容器元素大小的变化。即使您的布局发生变化，它也可以工作，并且不依赖于窗口大小调整等。顺便说一句。如果需要，也可提供 Polyfill。 const container = document.querySelector('#chart'); const chart = echarts.init(container); new ResizeObserver(() => chart.resize()).observe(container); 我在购买的管理模板中找到了解决方案。有加载内容后初始化图表的解决方案。这是工作示例： $(document).ready(function () { setTimeout(function () { // based on prepared DOM, initialize echarts instance var myChart = echarts.init(document.getElementById('chart-amount'), 'macarons'); // specify chart configuration item and data var option = {..options of chart here ..} // use configuration item and data specified to show chart myChart.setOption(option); }, 100); }); 图表容器的样式为：style="height: 400px; width: 100%; 这一点很重要，当你使用echart工具箱时，它喜欢走出容器。我希望它有帮助:) <div id="echart" style="width: 400px; min-width: 100%; height:400px;"></div> 这对我有用。最小宽度：100% 就可以了。首先，将图表包装在 div 中，并指定 div 宽度：100% 和高度：100%。这允许图表在弹性布局中使用。其次，你需要给图表的父容器一个宽度（即使它的响应宽度），如 flex: 1。在解决这个问题时，我必须做很多事情：包装器应动态确定图表的大小 <div class="goal-chart-wrapper" ref="chartContainer"> <div class="goal-chart" ref="goalChart"></div> </div> CSS 控制包装器的大小并强制孩子遵守父母的大小 .goal-chart-wrapper { width: 100%; min-height: 200px; position: relative; .goal-chart { height: 100%; width: 100%; position: absolute; } } 删除插入画布内图表的渲染填充（在图表选项内）。没有包含标签，轴消失了。 grid: { left: 0, top: 0, right: 0, bottom: 0, containLabel: true } 在决定大小的父级上添加 ResizeObserver，这会触发图表的大小调整 import { init } from 'echarts'; const options = { // ... } this.chart = init(this.$refs.goalChart); this.chartContainer = this.$refs.chartContainer; new ResizeObserver(() => { this.chart.resize(); }).observe(this.chartContainer); this.chart.setOption(options); 为了使图表具有响应性并始终匹配其容器的大小，您可以将 ResizeObserver 与 echartsInstance.resize 结合使用。但是，因为观察开始时会触发观察，这会破坏图表的初始动画。因此，就我而言，我在请求调整大小之前检查是否有实际大小变化： let elemChart = document.querySelector('#divChartPie'); let chart = echarts.init(elemChart); // Make chart responsive (resize chart on elemChart resize) new ResizeObserver(() => { if (elemChart.clientWidth !=chart.getWidth() || elemChart.clientHeight != chart.getHeight()) { chart.resize(); } }).observe(elemChart); 设置 width: 100% 会使 echarts 以节点大小（100px）显示，而设置 min-width: 100% 则根本不显示。所以这是相对 css 单位的一些问题。但是我们仍然可以使用JS设置图表容器的大小。 let main = document.querySelector("main"); let chartDom = document.getElementById("echartsGrafikon"); // getting width of element we want to size up to our chart // do this before chart initialization let grafikonWidth = main.getBoundingClientRect().width; chartDom.style.width = grafikonWidth + "px"; // initializing echart let echartGrafikon = echarts.init(chartDom); // to dynamically change size window.onresize = function () { echartGrafikon.resize(); };

javascript css twitter-bootstrap twitter-bootstrap-3 echarts

回答 8 投票 0

如何使用 Apache echarts 使用“globe”坐标系获取点击坐标

我想弄清楚在Echarts中渲染3D地球仪时如何获取鼠标点击的坐标。我正在渲染 Lines3D 系列来指定地理边界和 Scatter3D 系列...

echarts

回答 1 投票 0

应用强调淡入淡出和焦点来选择apache echarts折线图中的系列组？

我不知道如何将图表选项默认为组系列，并在将鼠标悬停在组内的一个系列上时允许强调整个组。例如，如果您有四个 lin...

echarts apache-echarts

回答 1 投票 0

如何去除彩虹图上彩虹和轴之间的彩色区域

我正在尝试用 html 和 Javascript 创建比特币彩虹价格图表。我能够创建图表，但彩虹下方有一个填充区域（彩虹和轴之间）。以下是我的