ECharts折线图渲染速度变慢、ECharts折线图数据为0时不显示线条

男娘i 2022-10-05 09:48 703阅读 0赞

> **写在前面：在公司做一个大屏可视化项目时，遇到了这样的需求：  
> 1.使折线图渲染速度变慢；  
> 2.当折线图数据为0时不显示线条**

本文就拿ECharts给的示例做演示。

1.  示例代码如下：

import * as echarts from 'echarts';
    
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom, 'dark');
    var option;
    
    option = { 
        xAxis: { 
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: { 
            type: 'value'
        },
        series: [{ 
            data: [90, 100, 110, 100, 0, 0, 0],
            type: 'line',
            smooth: true
        }]
    };
    
    option && myChart.setOption(option);

1.  示例结果如下：

![在这里插入图片描述][20210608134531596.gif_pic_center]

**然后看一下上面的两个需求：**

1.  使折线图渲染速度变慢。只需要加一个`animationDuration`属性即可。

代码如下：

import * as echarts from 'echarts';
    
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom, 'dark');
    var option;
    
    option = { 
    	animationDuration: 3000, // 使折线图渲染速度变慢，当前为3秒
        xAxis: { 
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: { 
            type: 'value'
        },
        series: [{ 
            data: [90, 100, 110, 100, 0, 0, 0],
            type: 'line',
            smooth: true
        }]
    };
    
    option && myChart.setOption(option);

结果如下：

![在这里插入图片描述][20210608135104984.gif_pic_center]

1.  当折线图数据为0时不显示线条。

意思就是下图红框内的线条不要，因为数据是0。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70]  
**我们只需要操作series中的data数据即可。  
拿现在的示例`data: [90, 100, 110, 100, 0, 0, 0]`来说，只需要把数据改成如下格式`data: [90, 100, 110, 100, '-', '-', '-']`。**

有两种方法：

①由后端操作数组，把值为0的那一项赋值为’-’，返回给前端；

②由前端`forEach`遍历数组，把找到的为0的那项赋值为’-’（前提是确保只要为0一定不显示，避免有些时候为0也要显示）。

代码如下：

import * as echarts from 'echarts';
    
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom, 'dark');
    var option;
    
    option = { 
    	animationDuration: 3000, // 使折线图渲染速度变慢，当前为3秒
        xAxis: { 
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: { 
            type: 'value'
        },
        series: [{ 
            data: [90, 100, 110, 100, '-', '-', '-'],
            type: 'line',
            smooth: true
        }]
    };
    
    option && myChart.setOption(option);

结果如下：

![在这里插入图片描述][20210608140028232.gif_pic_center]

--------------------

[20210608134531596.gif_pic_center]: /images/20221005/ff33eaed5e3349bba68ae53e34052639.png
[20210608135104984.gif_pic_center]: /images/20221005/8cea928fef784f25833d4f3dab663f1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70]: /images/20221005/2019f6de1a5a4c59b137ccdc3d4db09f.png
[20210608140028232.gif_pic_center]: /images/20221005/297a52e3c6944b49bca04ef9725c6ebd.png