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

附录

相关推荐
谈不譚网安7 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板12 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩13 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真19 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom1 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
鬼面瓷2 小时前
CAPL编程_03
前端·数据库·笔记
帅云毅2 小时前
Web漏洞--XSS之订单系统和Shell箱子
前端·笔记·web安全·php·xss