一些有意思的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作为横轴的维度

附录

相关推荐
zhougl99633 分钟前
html处理Base文件流
linux·前端·html
花花鱼36 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_39 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷6 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript