echarts图表——平行坐标系&日历坐标系

十五.平行坐标系

平行坐标是可视化高维几何和分析多元数据的常用方法。为了在n维空间中显示一组点,绘制由n条平行线组成的背景,通常是垂直且等距的。为了反映变化趋势和各个变量间相互关系,往往将描述不同变量的各点连接成折线。所以平行坐标图的实质是将维欧式空间的一个点Xi(xi1,xi2,...,xim))映射到维平面上的一条曲线。

option = {
  parallelAxis: [
    { dim: 0, name: 'Price' },
    { dim: 1, name: 'Net Weight' },
    { dim: 2, name: 'Amount' },
    {
      dim: 3,
      name: 'Score',
      type: 'category',
      data: ['Excellent', 'Good', 'OK', 'Bad']
    }
  ],
  series: {
    type: 'parallel',
    lineStyle: {
      width: 4
    },
    data: [
      [12.99, 100, 82, 'Good'],
      [9.99, 80, 77, 'OK'],
      [20, 120, 60, 'Excellent']
    ]
  }
};

十六.日历坐标系

日历坐标系就是用来达到日历图效果。它可以和热力图、散点图等结合起来,展示随时间变化的趋势

function getVirtulData(year) {
  year = year || '2017';
  var date = +echarts.number.parseDate(year + '-01-01');
  var end = +echarts.number.parseDate(year + '-12-31');
  var dayTime = 3600 * 24 * 1000;
  var data = [];
  for (var time = date; time <= end; time += dayTime) {
    data.push([
      echarts.format.formatTime('yyyy-MM-dd', time),
      Math.floor(Math.random() * 10000)
    ]);
  }
  return data;
}
option = {
  visualMap: {
    show: false,
    min: 0,
    max: 10000
  },
  calendar: {
    range: '2017'
  },
  series: {
    type: 'heatmap',
    coordinateSystem: 'calendar',
    data: getVirtulData('2017')
  }
};
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容