Highcharts与ECharts在大数据量下的使用与比较

业务需求

对百万级数据点进行绘制

Highcharts实现

使用Highcharts的Boost 模块实现该功能。Boost 模块由 WebGL 而不是默认的 SVG来实现图表的渲染,从而在几毫秒内呈现数十万个数据点。除了 WebGL 渲染之外,它还通过尽可能跳过数据的处理和检查来节省时间,但这可能导致在启用 Boost 模块后一些其他功能存在一些限制。

引入依赖项

javascript 复制代码
import Highcharts from "highcharts";
import boost from "highcharts/modules/boost";
boost(Highcharts)

关键配置项

javascript 复制代码
Highcharts.chart('container', {
    boost: {
      useGPUTranslations: true
    },
});

完整代码

javascript 复制代码
<template>
  <div id="app">
    <div id="container"></div>
  </div>
</template>

<script>
import Highcharts from "highcharts";
import boost from "highcharts/modules/boost";
boost(Highcharts)

export default {
  name: 'App',
  mounted () {
     this.getChart();
  },
  methods: {
    getChart(){
      var n = 1000000,
      data = this.getData(n);// 获取数据
      console.time('line');
      Highcharts.chart('container', {
        boost: {
          useGPUTranslations: true
        },
        title: {
          text: 'Highcharts drawing ' + n + ' points'
        },
        subtitle: {
          text: 'Using the Boost module'
        },
        tooltip: {
          valueDecimals: 2
        },
        series: [{
          data: data,
          lineWidth: 0.5
        }]
      });
      console.timeEnd('line');
    },
    getData(n) {
      var arr = [], i, a, b, c, spike;
      for (i = 0; i < n; i = i + 1) {
        if (i % 100 === 0) {
          a = 2 * Math.random();
        }
        if (i % 1000 === 0) {
          b = 2 * Math.random();
        }
        if (i % 10000 === 0) {
          c = 2 * Math.random();
        }
        if (i % 50000 === 0) {
          spike = 10;
        } else {
          spike = 0;
        }
        arr.push([i, 2 * Math.sin(i / 100) + a + b + c + spike + Math.random()]);
      }
      return arr;
    },
  }
}
</script>
<style>
.container{
  width: 400px;
  height: 400px;
}
</style>

效果图

数据渲染耗时:

ECharts实现

使用large属性启用大规模路径图的优化。是否开启大数据量优化,在数据图形特别多而出现卡顿时候可以开启。开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。

缺点:优化后不能自定义设置单个数据项的样式。

引入依赖项

javascript 复制代码
import * as echarts from 'echarts';

关键配置项

javascript 复制代码
config =  {
    series: [
          {
            type: 'line',
            data: this.ydata,
            large: true
          }
      ]
};

完整代码

javascript 复制代码
<template>
  <div id="app">
    <div id="container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  data () {
    return {
      xdata:[],
      ydata:[],
    }
  },
  mounted () {
     this.getEChart();
  },
  methods: {
    getECharts(){
      var n = 1000000,
      this.getData(n);// 获取数据
      console.time('echartsline');
      let EChart = echarts.init(document.getElementById("EChart"));
      let config = {
        title: { text: 'Echarts drawing ' + n + ' points' },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            silent: false,
            data:this.xdata
        },
        yAxis: {},
        series: [
          {
            type: 'line',
            data: this.ydata,
            large: true
          }
        ],
        
      };
      EChart.setOption(config);
      console.timeEnd('echartsline');
    },
    getData(n) {
      var arr = [], i, a, b, c, spike;
      for (i = 0; i < n; i = i + 1) {
        if (i % 100 === 0) {
          a = 2 * Math.random();
        }
        if (i % 1000 === 0) {
          b = 2 * Math.random();
        }
        if (i % 10000 === 0) {
          c = 2 * Math.random();
        }
        if (i % 50000 === 0) {
          spike = 10;
        } else {
          spike = 0;
        }
        arr.push([i, 2 * Math.sin(i / 100) + a + b + c + spike + Math.random()]);
        this.xdata.push(i);
        this.ydata.push(arr[i][1]);
      }
      return arr;
    },
  }
}
</script>
<style>
.container{
  width: 400px;
  height: 400px;
}
</style>

效果图

渲染时间对比

1w 20w 50w 100w 200w
Highcharts(折线图-1条) 106.7 ms 304.1 ms 1004.7 ms 1459.8 ms 2359.1 ms(tooltip几乎无延迟)
ECharts(折线图-1条) 66.1 ms 449.7 ms (tooltip卡顿) 1200.7 ms(tooltip卡顿) 2030.0 ms(tooltip卡顿) 4529.7 ms(tooltip卡顿)
Highcharts(折线图-5条) 151.5 ms 1082.6 ms 3205.9 ms 4734.0 ms -
ECharts(折线图-5条) 109.4 ms 1780.4 ms 4800.5 ms 10812.4 ms (25s) -
Highcharts(柱状图) 142.1 ms 480.5 ms 1012.4 ms 1521.5 ms 5869.1 ms
ECharts(柱状图) 54.2 ms 194.3 ms 339.9 ms 681.0 ms 449.7 ms

折线图:单条折线图时Highcharts与ECharts渲染时间在10w数据时基本持平,但ECharts在此数据量下tooltip仍然会出现卡顿的情况。10条折线时,15w数据量下,两者渲染时间基本持平,但ECharts在1.8w数据量时tooltip出现明显卡顿

柱状图:ECharts渲染时间远优于Highcharts

此demo使用版本:

json 复制代码
{
    "node": "^12.20.0",
    "highcharts": "^11.2.0",
    "echarts": "^5.0.0",
}
相关推荐
码上暴富1 天前
Echarts雷达图根据数值确定颜色
前端·javascript·echarts
懒大王95271 天前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
小谭鸡米花3 天前
uni小程序中使用Echarts图表
前端·小程序·echarts
@AfeiyuO4 天前
分类别柱状图(Vue3)
typescript·vue·echarts
Pu_Nine_94 天前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
小白_ysf5 天前
uniapp和vue3项目中引入echarts 、lime-echart(微信小程序、H5等)
微信小程序·uni-app·echarts·h5·lime-echart
Chan166 天前
【智能协同云图库】基于统一接口架构构建多维度分析功能、结合 ECharts 可视化与权限校验实现用户 / 管理员图库统计、通过 SQL 优化与流式处理提升数据
java·spring boot·后端·sql·spring·intellij-idea·echarts
zhangzuying10266 天前
基于Vue3 +ElementuiPlus + Dexie.js自研的浏览器插件新建标签页tab
vue.js·typescript·echarts
java水泥工7 天前
基于Echarts+HTML5可视化数据大屏展示-学生综合成绩评价系统大屏
spring boot·echarts·html5
java水泥工8 天前
基于Echarts+HTML5可视化数据大屏展示-茶叶种植大数据溯源平台
大数据·echarts·html5