推荐最新

echarts绘制断开的点。或者叫。数据不连续？

"普罗米修斯的监控图" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250101/e3a077e53ffb9b804d884c2b8fc40b1b.png) 问题1：后端返回的点。就是不连续的（因为关机或原因，数据不是连续的）我想要的结果和prometheus这个图一样。什么时间数据就断开了。什么时间数据生成的。一目了然 *** 而我现在用echarts。生成的都是连续的。左右两边很远的点。。都是连在一起的。 //通过赋值。。这个图。很难看 const option = { legend: { left: 'left', right: 0, width: "auto", // 图例组件的宽度 height: "auto", // 图例组件的高度 itemHeight: 14, itemWidth: 25, itemGap: 5, data: [], selected: { 全选: true, }, bottom: 0, icon: 'rect', y: 'top', textStyle: { color: "rgba(51, 51, 51, 1)", lineHeight: 25, } }, grid: { top: '10%', right: '1%', left: '2%', bottom: '2%' }, dataZoom: [ { type: 'slider', // 滑动条型数据区域缩放组件 show: false, start: 0, end: 100, } ], xAxis: { type: 'time', axisLabel: { formatter: function (value: any) { var time = new Date(value); return time.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' }); }, // 设置刻度标签显示的间隔，这里设置为每 2 个刻度显示一个 interval: 5, }, }, yAxis: { type: 'value', }, series: [ { type: 'line', name: '全选', showSymbol: false, data: [], symbol: 'none', animation: false } ] }; "有问题的图" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250101/f126de44a3810217fb7c622250bfb7d9.png)

浏览量409

Frank的私人司机

关于echarts 的 tooltips数据格式化的问题？

代码在这，"codesandbox" (https://link.segmentfault.com/?enc=Pk3lHjQX2hkQcLIZAzpFoA%3D%3D.%2BINN%2FJwTsHcLkyWQFowC4kIIZAvtiNa5iyOHDmOrFVTXeYAnuaSzW%2BiM%2Fc9KHoDlwiiBHiG1uTxgxwF3WIiDTw%3D%3D)，网不好的可以点这个"echarts demo" (https://link.segmentfault.com/?enc=GJCV%2BLB9Qm7r2z2cmGEhdA%3D%3D.tUQRDp7Xt%2BeqYu81IdFFt15kGzuYkottW5RXX4qy%2F9Gq03H2onOMGSwFFOmau8CmHF%2BwJfKmb1lMqRjOPGN5tCJhXwTqhYW6RZZarnqOIGJB2X44r%2F2F3pzzuJSZPbVId34A4O2z3Cl%2Ffb9z1Lt03Fj2NCMjBFsstgp2NZMsukM%2Bs0pEJmh4VxoF6vZ0EY2LOj3PiXH0zAsFk7n8H8TYNeqFMi4ESzRlZkOnIyo%2FsczUgfEbSPrvCT2n69h8o8F0mQbpApqRV7L18QzR%2B6NbE8F9sM2abcTz%2BFdy0D7%2FXbZj14tb99X6fRZooN6X39C8p6AMwwJYlL7GEpQaJfu2zTPL98aPal9kl2zcdCePjuLWqJQSyZTNMjzGfT2tUXD8bgRW1A3g4IWr7Okx%2BKrZkwd52NxnwNFuOUBk2JE0PAdkeI3a013wE5a0QomOkq%2BLtLsO8FzHHpTwHjeqdVrbYqpXGfBKmilE8wNMuCsYyhgGaQYXBgqjKcKgWAekJNpW06BGvStRg23EPxkNv1K9%2Bk241XUGJkM2KkP6zuofbXlBZM%2BURehBzdd4bIa9XxhEdS1cAGx%2BJqzMQW15gS%2BuM7BBSIijZ6jIOhQ9YnbEq5bA0IUXpUPoJWasRbsUs0NIllrJWCNF0W0BhC0ze0wmPSHDWSvhV7Sjo9Bx%2FZwVwdVHMKHBCn81k2ch5w0tpxJS0H8AeKql3%2Bf4f64TqOf6hA%3D%3D) 求教我如何将tooltips的name1，name2，data1，data2映射为我需要的格式呢？比如名字一，名字二，数据一，数据二。除了用formatter返回html格式，这个太麻烦了，我想知道有没有通用的映射配置

浏览量368

ciiiiinema

echarts折线图X轴增加Slider滑块？

1. 图片来源：模仿"饿了么外卖"折线图筛选功能 2. 这个图应该如何实现呢、滑动Slider滑块、对应折线图也随之高亮展示 3. 目前发现一个类似的功能"https://github.com/oguzhaninan/vue-histogram-slider" (https://link.segmentfault.com/?enc=9K2bT%2BvypZhTWbhfbOWjyQ%3D%3D.boE3NTo9los2Pf5eTtIPK8dCms235Cp4xyrlOJmCTop1DDnIynSVfzJKgiXRBytxJX%2BSQXLVvG016v7HmKot0w%3D%3D)只不过他是柱形图而我是折线图 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250109/d2599164c0d312cb9f2b43a2ced81559.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250109/5acd25e1530bf5cc1a339354768a57d1.png) 目前使用echarts中visualMap属性可以实现如图中这个部分、但是出现的问题是折线图与下边的滚轴达不到一样宽的效果、此部分该如何处理？ "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250109/6990e2bb0dbbfe8a93fa1b1160de5088.png)

浏览量242

导师小jio

echarts 堆叠柱状图最小值怎么放大？

"barMinHeight 不管用" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241231/c200ef2732aca09edb489cf69e9e7cf6.png) 用 barMinHeight 不管用

浏览量310

小飞侠007

echarts的鼠标位置和数据点展示的tooltip位置对应不上?

echarts的折线图中，鼠标在右侧红圈位置，但是显示的是数据却是左侧红圈的点的数据，tooltip的位置没有跟随鼠标的位置，在mac上没问题，win上有问题，说明只能是分辨率的问题，把window的chrome缩放比例调到67%就没啥问题了，但是echarts官网却没这个问题，有遇到过相同问题的大佬么，请教一下啥原因。 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241231/4b880bbe43501d74b288e1f88b8357c9.png) 下边是我的tooltip的全部代码 tooltip: { // 悬浮样式 trigger: 'axis', axisPointer: { type: 'cross', animation: false, }, padding: 0, borderWidth: 0, backgroundColor: 'transparent', formatter: function (params: any) { // echarts悬浮窗 let str = ` ${params[0].name}`; for (let item of params) { str += `${item.seriesName}：${parseFloat(item.data).toFixed(2)}`; } str += ``; return str; }, },

浏览量315

sssssjkl

echarts地图阴影会在区域块内部显现出来怎么解决？

如图，我想用shadow构造一个立体效果，不希望它在右上方有绿色线条。我尝试修改透明度，但并没有用。 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241117/65182f0a3ac658ea63393d60cdbb22ee.png) 代码如下，这是一个"官网示例" (https://link.segmentfault.com/?enc=opzmj0LLpl2lO10PqCj6mQ%3D%3D.bBSSOx8Aj3XgLVhmR4%2BDL6IrFz5R%2B%2FF%2F0t9%2FG%2B4TIRBmDtjrtK6hu4NdOU9zIR2TYO5WhLvW1zhIyjKfysOF0Q%3D%3D) myChart.showLoading(); $.get(ROOT_PATH + '/data/asset/geo/USA.json', function (usaJson) { myChart.hideLoading(); echarts.registerMap('USA', usaJson, { Alaska: { left: -131, top: 25, width: 15 }, Hawaii: { left: -110, top: 28, width: 5 }, 'Puerto Rico': { left: -76, top: 26, width: 2 } }); option = { geo: { map: 'USA', show: true, itemStyle: { }, regions: [ { name: 'New Mexico', itemStyle: { areaColor: '#eee', shadowBlur: 2, shadowColor: 'green', shadowOffsetY: 15, shadowOffsetX: -15, opacity: 1 } } ] }, }; myChart.setOption(option); });

浏览量51

九久九

为什么echarts地图修改数据项的selected属性不起作用？

为什么echarts地图修改数据项的selected属性不起作用？ "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241010/2445012533c79a0463937ac6a3d11014.png) 我希望我点击一个区块的时候能根据需要选中其它区块，这个写法在echarts4中是有效的，但在5中似乎不行。这是我复现的"最小实例" (https://link.segmentfault.com/?enc=u%2FfcPjrnww7bjIhATW8zQg%3D%3D.am%2BFFpAv4FCvR%2FXG5YKFrOyB1aLHFHl%2F3dAhuWWFYaPHjUNXRhhIdXxYkYuwOEQwme6AtY0ddN99MPwtTOpmI4%2BpeAPzjE8LdOpSgBytUFPNBOeoDqlAq4AcgaltauaqsU%2FDA%2BHi7242vxcrbYkuipEQpVHdAYhZR1rTPrgf%2BtIeKcCGEil1fInJMp0klsxxxLL3cg61DwRRUIUTf8kmmeDAVP0QRa7pPJOGKWmMkdbzV5w7jdEzcUeWRFg2%2Bz6MnqxgBwnw%2F%2F4OexsHXjgp3bZU%2BFgUYQDKSLAXhedKPATtUFMu2FIoO0rLg%2FB7ed%2FaPODAXMEo9KksX9HdkBpd3kBMQA%2BjxCKw8uP0uAkqqIv62IXmdNk3Fndh9st3S%2B1racOmnjXPP%2FW8p9QRrsanxIwlqDli99WdyGGkOPv8vmI2%2FOwdDFS%2Fvz4pw6fWaYiS75FfvU4RRF3BEi8dDUXKutz5sr9UK7QhV%2FRy8D5DT2O1hSZd6wUfTs9yPJuXsexMkv2qHyuT9DcGc0n8L5c4NoiAlVR0qp12ov4mYqVM3OFTEVQSPbIyaWKmOntwKUty1M%2FThbfG013saJMIaTgNUO685sJhG%2BNe%2BNjL4%2BnOeMvEucu86KTVrO%2Fe42mWcfCUAOni7VnPm9390Lbcgo8e1Lh6zosEtA2X3QoexqdFhOA5amQ20rPdG%2FOTsqVm%2FcMrDfW%2FZAYAq%2BeYVlRmw0HkjUC2tSw%2FWalNjDt%2FdKDYPKz82ryElYK%2ByKfV2lcy9gcZn6FBdgRlhhxmwbVSh3V4mMb0HGYPDCTqO%2BjHso2BPwMwWmcrPVza0hqE0q82gcnEsX4mERPhuzP6vdgW7LRFa8v517VzsJO098PGZpvlzM%2FF2G4hK3UWTCVO6XNF8bFVxyCbS8ZP%2B7wtXMfVtaCnDDn8lUb%2FKpMPHTZPxvAVJK%2F9GZ4YKBuo0vBlyAo5PeBKuJ2KFZiBu8O5eNvWtlSeJn7AUYYRBwQPTd9GdviOhirQxS0WjpXXfsPUOCBTAoFadLQK9Mr21jKoulB%2FjrczE%2Fs%2B2KpSx1iMEP%2Bd7jCtocvgJAtDLOmlNAwI2qW75ZAp6mfZ4YR5r9XcxvC0Jeq2sf5mmnKLP7WOVH3tFsPbxQeT%2B0mY%2BVPd5vRSbuMbA8WQMx9Z0k2kQ1q3io5G1zt0tw%3D%3D)

浏览量184

Midclimateeee

echarts怎么设置仪表盘图表上下不留空?

echaets柱状图每一列多项展示但是有空值时怎么让图表依旧保持居中？ "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241014/347b09346c7a20a8657743c349f04a75.png)

浏览量164

一一在debug

Echarts快速上手案例报错TypeError： Cannot read properties of undefined (reading 'get')？

echarts官方文档的快速上手案例报错TypeError: Cannot read properties of undefined (reading 'get') ECharts // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); echarts.js文件报错 function collectAxesInfo(result, ecModel, api) { var globalTooltipModel = ecModel.getComponent('tooltip'); var globalAxisPointerModel = ecModel.getComponent('axisPointer'); // links can only be set on global. var linksOption = globalAxisPointerModel.get('link', true) || []; var linkGroups = []; // Collect axes info. 发生异常: TypeError: Cannot read properties of undefined (reading 'get') at collectAxesInfo (file:///Y:/Echarts/echarts.js:50056:46) at collect (file:///Y:/Echarts/echarts.js:50046:5) at file:///Y:/Echarts/echarts.js:77276:62 at detectSeriseType (file:///Y:/Echarts/echarts.js:28189:7) at Scheduler.wrapStageHandler (file:///Y:/Echarts/echarts.js:28111:23) at normalizeRegister (file:///Y:/Echarts/echarts.js:32925:34) at Object.registerProcessor (file:///Y:/Echarts/echarts.js:32819:5) at Object.install$m [as install] (file:///Y:/Echarts/echarts.js:77273:15) at use (file:///Y:/Echarts/echarts.js:38285:9) at Object.install$l [as install] (file:///Y:/Echarts/echarts.js:78529:5) 是什么原因？

浏览量179

biubiuuuuu

请问我如何修改echart 柱状图 hover时，背景色？

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240916/2a32f3d74b875ed3ca0c2d853a99e294.png)

浏览量178