echarts 学习笔记【5】数据集

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

基本使用

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    #main {
      width: 800px;
      height: 500px;
    }
  style>
head>

<body>
  <div id="main">div>
body>
<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js">script>
<script>
const dom = document.getElementById('main')
const myChart = echarts.init(dom)
// 数据源,支持二维数组和对象数组
const source = [
  ['前端', '学习人数', '就业人数'],
  ['html', 30, 40],
  ['css', 20, 30],
  ['js', 40, 50]
]
// const source = [
//   { '前端': 'html', '学习人数': 30, '就业人数': 40 },
//   { '前端': 'css', '学习人数': 20, '就业人数': 30 },
//   { '前端': 'js', '学习人数': 40, '就业人数': 50 },
// ]

const option = {
  dataset: { 
    source,
    seriesLayoutBy: 'column' // 行列映射,数据源格式用二维数组的时候有效
  },
  tooltip: {},
  xAxis: {
    type: 'category' // 类目轴,适用于离散的类目数据
  },
  yAxis: {
    type: 'value' // 数值轴,适用于连续数据。
  },
  series: [
    { type: 'bar' },
    { type: 'bar' },
    { type: 'bar' }
  ]
}

myChart.setOption(option)
script>

html>

echarts 学习笔记【5】数据集_第1张图片
当把 seriesLayoutBy 设置为 row 时,效果会变成以数组行为类目轴的形式:
echarts 学习笔记【5】数据集_第2张图片

你可能感兴趣的:(Echarts,前端,echarts)