Echarts 折线图点与纵坐标值对应不准确问题解决

野性酷女 2022-04-03 03:06 1077阅读 0赞

### 关于Echarts踩坑记录 ###

对于Echarts，是百度开发的开源数据可视化库，兼容大部分浏览器，最近一直在用它做数据可视化，感觉很好用，效果也比较理想，向大家推荐一下  
官网地址: [走你][Link 1].

在开发过程中难免出现一些小问题，在这里总结一下，以便以后参考。

##### 1.折线图点与纵坐标值对应不准确 #####

问题如下图![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3c5MDMzMjg2MTU_size_16_color_FFFFFF_t_70]

问题解决：

function getServerSeries() {
        console.log(vm.echartsSeries)
        var serie = [];
        if (vm.echartsSeries != null) {
    
            for (var i = 0; i < vm.echartsSeries.length; i++) {
                var item = {
                    name: vm.echartsSeries[i].name,
                    type: 'line',
                    //stack:'总量',
                    smooth:true,
                    data: vm.echartsSeries[i].dataValue
                }
                serie.push(item);
            }
        }
    
        return serie;
    }

将stack属性去掉或者注释，同时上方代码为series数据动态生成方法，结合vue框架向后台请求数据并动态更新。

[Link 1]: http://echarts.baidu.com/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3c5MDMzMjg2MTU_size_16_color_FFFFFF_t_70]: /images/20220403/ebe175e26c0e49069ad028be9bdbbb39.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1077人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts 折线图拐点超过某值突出显示，颜色变红

![在这里插入图片描述][198b80c65c724e61a9b1ac41f8ca946e.png_pic_center] 第015个 [点击查看专栏目录][Link 1]

朱雀/ 2024年03月27日 16:29/ 0 赞/ 80 阅读

相关解决echarts纵坐标数字太长，导致遮挡的问题

![20201203111541756.png][] 数字位数过多时，在小屏手机会出现数字显示不全，被遮挡的问题。此处记录下，在摸索下有两种办法解决这个问题。 1.改变距

傷城~/ 2022年12月26日 04:43/ 0 赞/ 535 阅读

相关 echarts的折线图数据出现坐标和值对不上的问题

问题：项目中需要使用不同的折线表示不同车辆的情况，后端返回的数据和折线图悬停的值是一样的，这并没有什么错误。但是细心看就会发行这些值和Y轴坐标对应不上。 ![wat

小鱼儿/ 2022年12月03日 05:16/ 0 赞/ 632 阅读

相关 echarts折线图

记录echarts折现图配置我们先来看看效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

拼搏现实的明天。/ 2022年11月18日 13:44/ 0 赞/ 291 阅读

相关 echarts添加纵坐标的单位

百度搜索出来的结果这种方法是通过格式化来添加单位的，但是单位并未显示在左上角（1）yAxis : \[ \{ type : ‘value’, max:

r囧r小猫/ 2022年10月02日 12:44/ 0 赞/ 510 阅读

相关 Echarts学习记录——不等距折线图

Echarts学习记录——不等距折线图需求横坐标为一个区间，折线的每个点在区间内展示。如横坐标是24小时的时间点，其中展示每个小时内某个时间点的数值。如下

r囧r小猫/ 2022年06月14日 06:07/ 0 赞/ 231 阅读

相关 echarts折线图拐点和曲线属性

[echarts折线图个性化填充、线条、拐点样式][echarts] 由于每组数据的拐点样式、线条颜色都不一样，所以series里的每组数据都需要单独设置样式。首先先

我不是女神ヾ/ 2022年05月20日 01:26/ 0 赞/ 680 阅读

相关 echarts折线图

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0J

我不是女神ヾ/ 2022年04月18日 04:09/ 0 赞/ 372 阅读

相关 Echarts 折线图点与纵坐标值对应不准确问题解决

关于Echarts踩坑记录对于Echarts，是百度开发的开源数据可视化库，兼容大部分浏览器，最近一直在用它做数据可视化，感觉很好用，效果也比较理想，向大家推荐一下

野性酷女/ 2022年04月03日 03:06/ 0 赞/ 1078 阅读

相关 echarts折线图不堆叠设置

折线图堆叠的重要参数stack。只要将stack的值设置不相同，就不会堆叠了。实例如下，红色部分为需要修改的： option = {

男娘i/ 2021年07月26日 21:27/ 0 赞/ 872 阅读