百度的商业图表解决方案，最初旨在满足公司各种业务系统的报告需求。
我正在尝试使用 Apache EChartsJS 找到折线图中由一条线连接的两点之间的中间点。 `https://jsfiddle.net/fnxzb2cq/2/ 当您将鼠标悬停在该点上时，值
当我使用 echarts 更新数据以在漏斗图上显示时，标签会从屏幕上消失
这是我遇到问题的图表。 Echart示例 问题是，如果您更改任何数据值，标签就会在漏斗图上消失。我的目标是将标签保持在右侧......
如何让echarts-for-react中多个yAxis具有相同的零值位置
在此输入图像描述 如上图所示，我有两个图表（一个折线图和一个条形图），它们的 0-y 轴不在同一位置。我怎样才能使主题的 0-y 轴位于...
ECharts 线条系列自定义工具提示将一些线条分组在一起并相应地显示工具提示数据？
我正在使用 ECharts Line 系列来绘制某种距离时间图，其中 x 轴是时间（时间），y 轴是位置（分类）。 在我的系列中，我有多行。所以，对象数组...
如何使用Bootstrap让eCharts工具提示在页面中完全可见
我试图为一些 eCharts 图表实现 Bootstrap 5.x 设计。 但工具提示超出了页面范围，只有部分内容可见。 代码太长，无法放入 stackoverflow 片段中...
如何使用`renderItem`回调知道一页中的多个eCharts图表所指的图表
如果单个页面中有多个图表，并且您有一些类似这样的功能来更改图表类型 function setGraph_chartName1_to_customType(e){ //有多个函数，如 t...
我试图从 eCharts 网站上的示例开始在 eCharts 图表中获取红色/绿色烛台。 起始示例称为“大型烛台”，可生成随机数据......
如何在 Apache ECharts 中使用两个不同的数据源作为主图表和 dataZoom？
我正在使用 Apache ECharts 并尝试使用两种不同的数据源：一个用于主图表，另一个用于 dataZoom 预览。 由于数据量很大，我降低了分辨率
Apache eCharts - 堆叠/取消堆叠重新排列条形图
我有一组数据，最初以按月分组的条形图形式呈现。我有一个按钮，可以通过简单地为它们分配相同的堆叠词来堆叠/取消堆叠条形或分配...
在ECHARTS中如何从隐藏系列开始，然后使用自定义图例使其可见
如何从图表上的隐藏系列开始，然后使用自定义图例按钮显示它，例如 如何从图表上的隐藏系列开始，然后使用自定义图例按钮（如）显示它 <div> <input type="button" value="hide show NAME_OF_THE_SERIE" id="buttonid"> </div> <script> button = document.body.querySelector('#buttonid'); button.addEventListener('click', (e) => { myChart.dispatchAction({ type: "legendToggleSelect", name: "NAME_OF_THE_SERIE" }); console.log(myChart.getOption().series); }); </script> 这里是我获取此内容的 codepen.io 的链接 现在，就像您在控制台中看到的那样（如果您实现此方法），系列名称为“NAME_OF_THE_SERIE”的对象返回 chart.getOption().series，当系列隐藏时和在图表上显示时，它是完全相同的。 那么如何知道一个系列是否被隐藏？ 您可以使用 legend.selected 设置默认隐藏/显示特定系列，或修改其可见性状态以响应外部事件。 const option = { legend: { selected: { // seriesName: true (show) / false (hide) seriesName: false, }, }, }; /** ** Initialize */ const chartDom = document.getElementById('chart'); const chart = echarts.init(chartDom); /** ** Data */ const categoryData = ['category0', 'category1', 'category2', 'category3', 'category4']; const barData = [30, 50, 70, 60, 80]; /** ** Option */ const option = { legend: { selected: { // seriesName: true (show) / false (hide) seriesName: false, }, }, yAxis: { type: 'category', data: categoryData }, xAxis: {}, series: [ { type: 'bar', name: 'seriesName', data: barData, }, ] }; /** ** Render Chart */ chart.setOption(option); /** ** Change series legend selected status by external function */ document.getElementById('toggleVisibility').addEventListener('click', () => { const legendSelected = option.legend.selected['seriesName']; option.legend.selected['seriesName'] = ! legendSelected; chart.setOption(option, true); });<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js" integrity="sha512-k37wQcV4v2h6jgYf5IUz1MoSKPpDs630XGSmCaCCOXxy2awgAWKHGZWr9nMyGgk3IOxA1NxdkN8r1JHgkUtMoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <button id="toggleVisibility">Toggle legend visibility</button> <div id="chart" style="width: 650px; height: 250px;"></div>
我想制作一个“半个甜甜圈”图表。它应该像图片中的第一个图表一样。 但在我的图表中，空间占据了图表上方（第二张图表）。是否可以删除该空间。 图片链接：
ECharts：烛台宽度不会随着时间 xAxis 和“空”filterMode 的缩放而增加
使用 ECharts，我注意到使用这些设置放大时烛台不会变宽： xAxis 类型为“时间” dataZoom 过滤模式为“空” 系列类型为“烛台” 变量选项 = { xA...
如何在烛台 ECHARTS 图表中获得实心/空心蜡烛以及如何获得所有颜色的体积
我正在尝试制作一个时间小部件，并查看股市上我最喜欢的股票。 因此，经过一番搜索后，我使用了 echarts，它似乎是迄今为止最好的。 但示例中的图表...
初始化和调整大小时如何获取屏幕可见区域的ECHARTS中的第一个和最后一个点值
我正在尝试在这样的图表上取回 ECHARTS 中的第一个和最后一个值 还有一个可缩放区域 我试过了 var ChartDom = document.getElementById('main'); 变种 </desc> <question vote="1"> <p>我正在尝试在像<a href="https://echarts.apache.org/examples/en/editor.html?c=candlestick-brush&code=MYewdgzgLgBArgBwMIgDYgE4wLwwOQDEADEQCYCGAzMHgNwBQokspIA7mCulroQKbASJOvQBmcMMCgBLcDAgJU0qABFyUcgAoM5Nmo0BKGAG96MGKj6xg6vgHNMAT33kcMANoBdBucuwAbuSocHwQbl4-FlYw_mhwALah4d5mMKKYMJp-MNJuRLQ5MAA8MDp66uQAdJZgdlAAFgXSANTNRqbm5jZQ9k4ulQhwEPXaui7u0p6VCkrAfJpEADQwAIwG7kSeBpHmgcGhA0MjZeOT26m7cYkQh8OaE8snFROe7gAsno9jz5MbnjAAPlK3w0L3cK3-AH5VjAAFwwAC0EPO5gAvqkMFY4BgwCYLjBur0MM4KvDCQ5iS5Fvi9iEIPDaaFqZ0YldQgy2RBUqiGOjxJIZHIbKhgHBULYALIAQU0FEcKAkUGWFEMeN25CwmIgYtguAiqXSWE0gSwuVwSyiuNwKqqjJuNTqjUKJRqTVa7Xx0lEmVyJTlCrAUA9LPMWp1txGeAReBRIaYMjAIR2MHRLJN8gSeWThsy6YAVlmYAW_eR5SBFQU8-61SHtfEYM1rRVKnaJoii68IcnU50w6goBHNM1NHWYAB6GD-8uBgyVKAgABi0gAHnxSJpKAZYz3MVBsbi-1BefQACSVOxWTQAJQA8jeACoAfQAClL7wAJBv4Mc2sfkCAQFYP4VGO0AgMAADWCIqAAUgAkpUeYQOAeDLPyUiyLiozlKqHQxBqk4VG4MzKC42EuLG8TyvUGoDoBUA3gggpgJo-KaCATGYW4eEsuQYDSPE6iYfCohBIBzIhpYF5gKQ8I8SGABGIBQPO8TwisSz4iyliiFA8J4HMgZ8BgqFaZ0Nrwu4eAqOwCIweASTSDJfDLqh-DSgArG5eDShp3nSgATEQ_lSpQwWeGZqISSy85oDICByWZ5hQBg0h2BeGD6eQy7SBApkhp02W5c-IBOT0mU1gVyWOAgfD6cAGAgABeBJSm0WKZgpDGQA6tIpANOp7UskpGBdRgXCYPpBDADN-VVQg5CkKQTl2OpmlVTAPTLlAADKUCOJYiUbV0aCTfgxDCK1UWtQgTXKMJaQSBhciaLdEDLAtOjxO9MB8Kgyx_VeAhKvI0gAF58MGx1MNAMAgApBa4PJG3zglqxEK1aLJgV8N5u4Vk6VA3mpXY9RE68w5vX8xSgxDLbSHwbA7eDfDUxOAUGJ4_y4GF2Mhru-5wwjfNoq1Y4Ti5KXkEgAH3pL-lsH1A2rAA7EQCCuZFQ0wEVEAlWVxlHVVShgBBlmY5Vx3LlKOUQHBznLllqCoC1x0pq1nyteKCl_UbG0KeQkF2I1EikBNFWECrUeu1VPYstdBWxagSmO5bLKiHw6jYnVachjaABaIAgGpucFY4Nu5fbXWp6JqCARbCfHQpGBHH7x37bVll4CbfAABrecAlgangEVu3HIbj2i2v-LlcBBBK5Bo8jnTDOwIliXw2vmIBqWhFXLnwh5W-TgJfCQA9AXHwgDNzPSHgW8vBWMoNFsndw8KsBw4cN8f5iPyGz9EQrF_p0UA794DIFOhgBuHstZmWDn1c2G1_6-D4LpfSGkACkc0NokzJvpAAHNgkB9Q-BpXwfgDyRBsFXWPigqI6D8BYJwVVPBel8BEJYYnDi-kABslBiEW1IeQ9heAVi8JoRtSeMBPYFWtrbJBVV6EdxzgZWwFJHBcLzqSQiGhKjkj6BUEBSlQ4akcAAcUXuvOum8La6wADJORzsYOGYB87GRANYwCbULYkSgI4sAzj5D1DXmkDePi3bxCcvpG0EonJaJZIJVOeBYnZQSYVW2-sjIVXoeYMGa0MZj1oa1ZRNVVEGOJOk8wCDSD71TsAi2FldFVAqSSDQxjpwUGJJYtGtdxJ2NtgEoJ4B3GNS8XwCJx1db3mkJBOSwTQl9ImY3DafihnzNXmwcZkyNoOPID7VAGyQlbLCTYnZVUolgBiRUOJYAqkwCSdcjQC9NZSLMrIkM5cFH32Qb44UOcUohBAX4qUmJyBt1Wcc-EgK-AwKkXQv5QQAUt1sW7GpdSX5uz8QAOQSD7Cql8Bm5Xsfs32JgFknKWecgqDinFHMWeElZVVpmzLNuSzZ2ymUFTWXS9lULTneOkaLAqHyWQFyLiXdwJSLYqP0k5CAfU-D3PkZXB2lkLQQmBRoDA7CACcBCQFn1kujQpscEVYv5TCkBKq7Zqo8Bq0VVVZX4AgEoMa9zUaEI8oIrF2q9UGotkagpV13nax3gzO-UrfluzAOQRI-kbJsDsg5MITlq4erKfVPipBLDQFZfcppNoWxBDpCA5QfB4h7QOs41-BIoHwkQOHEBb9MBEA_uwTgUDm0wBGmNcODbnKiCcaQbtvbjLhzbfAQdw64VmulTGuNqjPIZs7vgHuBadHClFOKHo0pNBH2aQYYF8Qi7KytRbHuVbDqlxDBxQOyhHDwiIJUDys6Cpcs6PQ2N8b3JSj8iA513cnEbo0GSII27JQyg0sqCoR7fEnuUvUaFKKQGXv2te3JcMFrAAfU-l9b6J7muOt-pdUogortUeukBTSt1ikg5oIKMHDDHtPUhzaKGL1OKvTWt25g704f2nh19RT4XzuI4u_S0owoUf0lRxpm7wN0d3TKMKTHyBwaxQhs9HG3ZoerRCqq_HcMwGfcJ46QrqWfotiR_SAA1NkMn8ABxMtaiutrq6YuOl81VHnVjUZ0UW2IwRrghpFfiVEGnOgwtSOcCLtAgA" rel="nofollow noreferrer">this</a></p>这样的图表上取回ECHARTS中的第一个和最后一个值 <p>还有一个可缩放区域</p> <p>我已经尝试过了</p> <pre><code><script> var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); function test(){ console.log(myChart.getOption()); } test(); </script> </code></pre> <p>初始化后返回 <pre><code>series</code></pre> 对象。</p> <p>所以你可以像这样取回第一个和最后一个坐标</p> <pre><code> first_serie_coords = myChart.getOption().series[0].coords; //depends on how you provided the data first_element = first_serie_coords[0] last_element = first_serie_coords[first_serie_coords.length - 1] console.log(first_element, last_element) </code></pre> <p><strong>但是当图形的缩放区域初始化然后调整大小时，如何获取起点和终点呢？</strong></p> <p>这是一个简单的代码片段（全屏打开）</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> rawData = [ ["2004-01-02",10452.74,10409.85,10367.41,10554.96,168890000], ["2004-01-05",10411.85,10544.07,10411.85,10575.92,221290000], ["2004-01-06",10543.85,10538.66,10454.37,10584.07,191460000], ["2004-01-07",10535.46,10529.03,10432,10587.55,225490000], ["2004-01-08",10530.07,10592.44,10480.59,10651.99,237770000], ["2004-01-09",10589.25,10458.89,10420.52,10603.48,223250000], ["2004-01-12",10461.55,10485.18,10389.85,10543.03,197960000], ["2004-01-13",10485.18,10427.18,10341.19,10539.25,197310000], ["2004-01-14",10428.67,10538.37,10426.89,10573.85,186280000], ["2004-01-15",10534.52,10553.85,10454.52,10639.03,260090000], ["2004-01-16",10556.37,10600.51,10503.7,10666.88,254170000], ["2004-01-20",10601.4,10528.66,10447.92,10676.96,224300000], ["2004-01-21",10522.77,10623.62,10453.11,10665.7,214920000], ["2004-01-22",10624.22,10623.18,10545.03,10717.4,219720000], ["2004-01-23",10625.25,10568.29,10490.14,10691.77,234260000], ["2004-01-26",10568,10702.51,10510.44,10725.18,186170000], ["2004-01-27",10701.1,10609.92,10579.33,10748.81,206560000], ["2004-01-28",10610.07,10468.37,10412.44,10703.25,247660000], ["2004-01-29",10467.41,10510.29,10369.92,10611.56,273970000], ["2004-01-30",10510.22,10488.07,10385.56,10551.03,208990000], ["2004-02-02",10487.78,10499.18,10395.55,10614.44,224800000], ["2004-02-03",10499.48,10505.18,10414.15,10571.48,183810000], ["2004-02-04",10503.11,10470.74,10394.81,10567.85,227760000], ["2004-02-05",10469.33,10495.55,10399.92,10566.37,187810000], ["2004-02-06",10494.89,10593.03,10433.7,10634.81,182880000], ["2004-02-09",10592,10579.03,10433.7,10634.81,160720000], ] var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; const upColor = '#00da3c'; const downColor = '#ec0000'; function splitData(rawData) { let categoryData = []; let values = []; let volumes = []; for (let i = 0; i < rawData.length; i++) { categoryData.push(rawData[i].splice(0, 1)[0]); values.push(rawData[i]); volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]); } return { categoryData: categoryData, values: values, volumes: volumes }; } function calculateMA(dayCount, data) { var result = []; for (var i = 0, len = data.values.length; i < len; i++) { if (i < dayCount) { result.push('-'); continue; } var sum = 0; for (var j = 0; j < dayCount; j++) { sum += data.values[i - j][1]; } result.push(+(sum / dayCount).toFixed(3)); } return result; } //$.get('https://echarts.apache.org/examples/data/asset/data/stock-DJI.json', function (rawData) { var data = splitData(rawData); //console.log(data); myChart.setOption( (option = { animation: false, legend: { bottom: 10, left: 'center', data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30'] }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, borderWidth: 1, borderColor: '#ccc', padding: 10, textStyle: { color: '#000' }, position: function (pos, params, el, elRect, size) { const obj = { top: 10 }; obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30; return obj; } // extraCssText: 'width: 170px' }, axisPointer: { link: [ { xAxisIndex: 'all' } ], label: { backgroundColor: '#777' } }, toolbox: { feature: { dataZoom: { yAxisIndex: false }, brush: { type: ['lineX', 'clear'] } } }, visualMap: { show: false, seriesIndex: 5, dimension: 2, pieces: [ { value: 1, color: downColor }, { value: -1, color: upColor } ] }, grid: [ { left: '10%', right: '8%', height: '50%' }, { left: '10%', right: '8%', top: '63%', height: '16%' } ], xAxis: [ { type: 'category', data: data.categoryData, boundaryGap: false, axisLine: { onZero: false }, splitLine: { show: false }, min: 'dataMin', max: 'dataMax', axisPointer: { z: 100 } }, { type: 'category', gridIndex: 1, data: data.categoryData, boundaryGap: false, axisLine: { onZero: false }, axisTick: { show: false }, splitLine: { show: false }, axisLabel: { show: false }, min: 'dataMin', max: 'dataMax' } ], yAxis: [ { scale: true, splitArea: { show: true } }, { scale: true, gridIndex: 1, splitNumber: 2, axisLabel: { show: false }, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: false } } ], dataZoom: [ { type: 'inside', xAxisIndex: [0, 1], start: 50, end: 100 }, { show: true, xAxisIndex: [0, 1], type: 'slider', top: '85%', start: 50, end: 100 } ], series: [ { name: 'Dow-Jones index', type: 'candlestick', data: data.values, itemStyle: { color: upColor, color0: downColor, borderColor: undefined, borderColor0: undefined } }, { name: 'MA5', type: 'line', data: calculateMA(5, data), smooth: true, lineStyle: { opacity: 0.5 } }, { name: 'MA10', type: 'line', data: calculateMA(10, data), smooth: true, lineStyle: { opacity: 0.5 } }, { name: 'MA20', type: 'line', data: calculateMA(20, data), smooth: true, lineStyle: { opacity: 0.5 } }, { name: 'MA30', type: 'line', data: calculateMA(30, data), smooth: true, lineStyle: { opacity: 0.5 } }, { name: 'Volume', type: 'bar', xAxisIndex: 1, yAxisIndex: 1, data: data.volumes } ] }), true ); //}); option && myChart.setOption(option); //console.log(myChart); //console.log(myChart.getOption()); first_serie_coords = myChart.getOption().series[0].data; first_element = first_serie_coords[0]; last_element = first_serie_coords[first_serie_coords.length - 1]; console.log(first_element, last_element);</code></pre> <pre><code><div id="main" style="width: 500px; height: 500px;"></div> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="305553585142444370051e051e01">[email protected]</a>/dist/echarts.min.js"></script></code></pre> </div> </div> <p></p> </question> <answer tick="false" vote="0"> <p>A <a href="https://echarts.apache.org/en/option.html#dataZoom" rel="nofollow noreferrer"><pre><code>dataZoom</code></pre>组件</a>通过配置 <pre><code>option</code></pre>对象（就像您在代码中实现的对象一样），当通过 <a href="https://echarts.apache.org/en/api.html#echartsInstance.setOption" rel="nofollow noreferrer"><pre><code>setOption</code></pre></a>方法和 通过<a href="https://echarts.apache.org/en/api.html#echartsInstance.getOption" rel="nofollow noreferrer"><pre><code>getOption</code></pre></a>检索 使用默认值和计算值完成。</p> <p>可用于确定缩放下第一个和最后一个可见数据项的计算值 是<a href="https://echarts.apache.org/en/option.html#dataZoom-inside.startValue" rel="nofollow noreferrer"><pre><code>.startValue</code></pre></a>， 和<a href="https://echarts.apache.org/en/option.html#dataZoom-inside.endValue" rel="nofollow noreferrer"><pre><code>.endValue</code></pre></a>， 适用于 <pre><code>type: 'inside'</code></pre> 和 <pre><code>type: 'slider'</code></pre> <pre><code>dataZoom</code></pre> 对象； 对于像您这样的类别 x 轴，它们的计算值是第一个和 最后一个可见轴类别，也是第一个和最后一个可见数据项的索引 （假设没有 <pre><code>null</code></pre> 数据条目）。 另见<a href="https://echarts.apache.org/en/option.html#dataZoom-slider.rangeMode" rel="nofollow noreferrer"><pre><code>rangeMode</code></pre></a> 对于 x 轴不是类别类型而是值类型的情况的解决方案。</p> <p>因此，您的代码可以适应使用这些属性：</p> <pre><code>.................... myChart.setOption(option); const optionFull = myChart.getOption(); const first_serie_coords = optionFull.series[0].data; const dataZoom = optionFull.dataZoom[0]; const startValue = dataZoom && dataZoom.startValue || 0, endValue = dataZoom && dataZoom.endValue || first_serie_coords.length - 1; const first_element = first_serie_coords[startValue]; const last_element = first_serie_coords[endValue]; console.log(first_element, last_element); </code></pre> <p>并对片段进行了调整，并添加了更多细节： </p><div data-babel="false" data-lang="js" data-hide="true" data-console="false"> <div> <pre><code>rawData = [ ["2004-01-02",10452.74,10409.85,10367.41,10554.96,168890000], ["2004-01-05",10411.85,10544.07,10411.85,10575.92,221290000], ["2004-01-06",10543.85,10538.66,10454.37,10584.07,191460000], ["2004-01-07",10535.46,10529.03,10432,10587.55,225490000], ["2004-01-08",10530.07,10592.44,10480.59,10651.99,237770000], ["2004-01-09",10589.25,10458.89,10420.52,10603.48,223250000], ["2004-01-12",10461.55,10485.18,10389.85,10543.03,197960000], ["2004-01-13",10485.18,10427.18,10341.19,10539.25,197310000], ["2004-01-14",10428.67,10538.37,10426.89,10573.85,186280000], ["2004-01-15",10534.52,10553.85,10454.52,10639.03,260090000], ["2004-01-16",10556.37,10600.51,10503.7,10666.88,254170000], ["2004-01-20",10601.4,10528.66,10447.92,10676.96,224300000], ["2004-01-21",10522.77,10623.62,10453.11,10665.7,214920000], ["2004-01-22",10624.22,10623.18,10545.03,10717.4,219720000], ["2004-01-23",10625.25,10568.29,10490.14,10691.77,234260000], ["2004-01-26",10568,10702.51,10510.44,10725.18,186170000], ["2004-01-27",10701.1,10609.92,10579.33,10748.81,206560000], ["2004-01-28",10610.07,10468.37,10412.44,10703.25,247660000], ["2004-01-29",10467.41,10510.29,10369.92,10611.56,273970000], ["2004-01-30",10510.22,10488.07,10385.56,10551.03,208990000], ["2004-02-02",10487.78,10499.18,10395.55,10614.44,224800000], ["2004-02-03",10499.48,10505.18,10414.15,10571.48,183810000], ["2004-02-04",10503.11,10470.74,10394.81,10567.85,227760000], ["2004-02-05",10469.33,10495.55,10399.92,10566.37,187810000], ["2004-02-06",10494.89,10593.03,10433.7,10634.81,182880000], ["2004-02-09",10592,10579.03,10433.7,10634.81,160720000], ] var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; const upColor = '#00da3c'; const downColor = '#ec0000'; function splitData(rawData) { let categoryData = []; let values = []; let volumes = []; for (let i = 0; i < rawData.length; i++) { categoryData.push(rawData[i].splice(0, 1)[0]); values.push(rawData[i]); volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]); } return { categoryData: categoryData, values: values, volumes: volumes }; } function calculateMA(dayCount, data) { var result = []; for (var i = 0, len = data.values.length; i < len; i++) { if (i < dayCount) { result.push('-'); continue; } var sum = 0; for (var j = 0; j < dayCount; j++) { sum += data.values[i - j][1]; } result.push(+(sum / dayCount).toFixed(3)); } return result; } //$.get('https://echarts.apache.org/examples/data/asset/data/stock-DJI.json', function (rawData) { var data = splitData(rawData); //console.log(data); myChart.setOption( (option = { animation: false, legend: { bottom: 10, left: 'center', data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30'] }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, borderWidth: 1, borderColor: '#ccc', padding: 10, textStyle: { color: '#000' }, position: function (pos, params, el, elRect, size) { const obj = { top: 10 }; obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30; return obj; } // extraCssText: 'width: 170px' }, axisPointer: { link: [ { xAxisIndex: 'all' } ], label: { backgroundColor: '#777' } }, toolbox: { feature: { dataZoom: { yAxisIndex: false }, brush: { type: ['lineX', 'clear'] } } }, visualMap: { show: false, seriesIndex: 5, dimension: 2, pieces: [ { value: 1, color: downColor }, { value: -1, color: upColor } ] }, grid: [ { left: '10%', right: '8%', height: '50%' }, { left: '10%', right: '8%', top: '63%', height: '16%' } ], xAxis: [ { type: 'category', data: data.categoryData, boundaryGap: false, axisLine: { onZero: false }, splitLine: { show: false }, min: 'dataMin', max: 'dataMax', axisPointer: { z: 100 } }, { type: 'category', gridIndex: 1, data: data.categoryData, boundaryGap: false, axisLine: { onZero: false }, axisTick: { show: false }, splitLine: { show: false }, axisLabel: { show: false }, min: 'dataMin', max: 'dataMax' } ], yAxis: [ { scale: true, splitArea: { show: true } }, { scale: true, gridIndex: 1, splitNumber: 2, axisLabel: { show: false }, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: false } } ], dataZoom: [ { type: 'inside', xAxisIndex: [0, 1], start: 50, end: 100 }, { show: true, xAxisIndex: [0, 1], type: 'slider', top: '85%', start: 50, end: 100 } ], series: [ { name: 'Dow-Jones index', type: 'candlestick', data: data.values, itemStyle: { color: upColor, color0: downColor, borderColor: undefined, borderColor0: undefined } }, { name: 'MA5', type: 'line', data: calculateMA(5, data), smooth: true, lineStyle: { opacity: 0.5 } }, { name: 'MA10', type: 'line', data: calculateMA(10, data), smooth: true, lineStyle: { opacity: 0.5 } }, { name: 'MA20', type: 'line', data: calculateMA(20, data), smooth: true, lineStyle: { opacity: 0.5 } }, { name: 'MA30', type: 'line', data: calculateMA(30, data), smooth: true, lineStyle: { opacity: 0.5 } }, { name: 'Volume', type: 'bar', xAxisIndex: 1, yAxisIndex: 1, data: data.volumes } ] }), true ); //}); myChart.setOption(option); function getExtremeVisiblePoints(){ const optionFull = myChart.getOption(); const first_serie_coords = optionFull.series[0].data; const dataZoom = optionFull.dataZoom[0]; const startValue = dataZoom && dataZoom.startValue || 0, endValue = dataZoom && dataZoom.endValue || first_serie_coords.length - 1; const first_element = first_serie_coords[startValue]; const last_element = first_serie_coords[endValue]; document.querySelector('#point1').innerText = first_element; document.querySelector('#point2').innerText = last_element; //console.log({startValue, endValue}) //console.log({first_element, last_element}); } myChart.on('datazoom', ()=>{ document.querySelector('#point1').innerText = ''; document.querySelector('#point2').innerText = ''; });</code></pre> <pre><code><button onclick="getExtremeVisiblePoints()">Get Extreme Visible Points</button><br> <code id="point1" style="font-size: small"></code><br> <code id="point2" style="font-size: small"></code> <div id="main" style="width: 500px;height: 500px"></div> <div id="main" style="width: 500px; height: 500px;"></div> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="711412191003050231445f445f40">[email protected]</a>/dist/echarts.min.js"></script></code></pre> </div> </div> <p></p> </answer> </body></html>
如何将ECharts自定义图表的线条样式从实线更改为虚线或点线
我使用 Apache ECharts 创建了一个自定义图表，从输入数据中绘制一条垂直线。根据 ECharts 文档和一些在线示例，我能够绘制线条并使用 c...
在ECHARTS中如何为特定系列设置选项（通过名称名称选择）
我在 ECHARTS 图表中得到了一些系列。 现在谈论 y 轴是这样的 y 轴：[ { 规模：真实， splitArea: { 显示: true, }, }, { 规模：真实，
我设置了一个带有 VisualMap 颜色的图表，它只为项目着色，而不为线条着色。 有人明白会发生什么吗？ 这里的项目：Echarts沙盒 或这里：Echarts codepen
我正在使用Apache Echarts来显示图表，非常好。 但是我不知道如何正确缩放以显示节点及其连接。我可以用鼠标缩放，但我只是想知道是否 + / -
如何解决未捕获的类型错误：无法读取 null 的属性“getDisplayList”
看到与以下相同的错误：https://segmentfault.com/q/1010000022589791 使用Echarts的onEvents参数调用外部函数时出现错误。我该如何解决它？ 接口