echarts 学习笔记【5】数据集

最新推荐文章于 2024-06-03 23:02:52 发布

大杯美式不加糖

最新推荐文章于 2024-06-03 23:02:52 发布

阅读量380

点赞数

分类专栏： Echarts 文章标签：前端 echarts

本文链接：https://blog.csdn.net/qq_40988677/article/details/124399555

版权

Echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>Document</title>
  <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>