一些有意思的echart处理分享

分享一些便捷方式以供参考,助你轻便处理数据,快速成图。

发现身边事儿、聊点周奇遇,我是沈二,期待奇遇的互联网灵魂~、一起聊天吹水,探索新的可能~wx:breathingss,入圈吧!

数据集 dateSet

ECharts 4 开始支持了 数据集dataset)组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便。

为什么使用dataset?

而数据设置在 数据集(dataset) 中,会有这些好处:

  • 能够贴近数据可视化常见思维方式:(I)提供数据,(II)指定数据到视觉的映射,从而形成图表。
  • 数据和其他配置可以被分离开来。数据常变,其他配置常不变。分开易于分别管理。
  • 数据可以被多个系列或者组件复用,对于大数据量的场景,不必为每个系列创建一份数据。
  • 支持更多的数据的常用格式,例如二维数组、对象数组等,一定程度上避免使用者为了数据格式而进行转换。 以下是传统方式和数据集的写法区别

传统

js 复制代码
option = {
 xAxis: {
   type: 'category',
   data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
 },
 yAxis: {},
 series: [
   {
     type: 'bar',
     name: '2015',
     data: [89.3, 92.1, 94.4, 85.4]
   },
   {
     type: 'bar',
     name: '2016',
     data: [95.8, 89.4, 91.2, 76.9]
   },
   {
     type: 'bar',
     name: '2017',
     data: [97.7, 83.1, 92.5, 78.1]
   }
 ]
};

这种方式的优点是,适于对一些特殊的数据结构(如"树"、"图"、超大数据)进行一定的数据类型定制。 但是缺点是,常需要用户先处理数据,把数据分割设置到各个系列(和类目轴)中。此外,不利于多个系列共享一份数据,也不利于基于原始数据进行图表类型、系列的映射安排。

数据集

  • 方式1

    用 dimensions 指定了维度的顺序,可以看到数据结构有明显的不同

js 复制代码
option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 用 dimensions 指定了维度的顺序。直角坐标系中,如果 X 轴 type 为 category,
    // 默认把第一个维度映射到 X 轴上,后面维度映射到 Y 轴上。
    // 如果不指定 dimensions,也可以通过指定 series.encode
    // 完成映射,参见后文。
    dimensions: ['product', '2015', '2016', '2017'],
    source: [
      { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
      { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
      { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
      { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};
  • 方式2 这种方式类似带表头的表格二维数据
js 复制代码
option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 提供一份数据。
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  // 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
  xAxis: { type: 'category' },
  // 声明一个 Y 轴,数值轴。
  yAxis: {},
  // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

数据集处理公共函数

这里提供了一个确定列表中的三维数据方法,分别是 x、y、value 三者的处理区分,能够快速的把图例和值进行区分,方便快速显示

js 复制代码
//用于将list数据转换为dataset结构
const tranListToDataSet=(dataVal,x,y,itemKey)=>{
const cxList=[...new Set(dataVal.map(it=>it[x]))];
  var dt= [...new Set(dataVal.map(it=>it[y]))];
  dt.sort();
var data=[];
dt.map(time=>{
  var obj={ time:time};
 cxList.map(it=>{
   obj[it]=0;
   const [item]=dataVal.filter(vt=>vt[x]==it&&vt[y]==time);
    if(item){
      obj[it]=item[itemKey]||0;
    }
 })
   data.push(obj);
})
var dataset={"dimensions":['time',...cxList],"source":data};
return dataset;
}

用法如下

js 复制代码
 const list=  apiFlowList.map(it=>{
       it.name='流量';
       it.monitorTime=dayjs(it.monitorTime).format('HH-mm');
       return it;
     })
     const dataset=tranListToDataSet(list,
     'name',
     'monitorTime',
     'value');
     this.dataset=dataset;

x可以当作样例维度,y作为横轴的维度

附录

相关推荐
gnip12 分钟前
js上下文
前端·javascript
中草药z12 分钟前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)26 分钟前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休36 分钟前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel42 分钟前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组1 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽1 小时前
threejs入门学习日记
前端·javascript·three.js
朝阳5811 小时前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
slim~1 小时前
javaweb基础第一天总结(HTML-CSS)
前端·css·html