散点图

基本样式

<!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 data = [
  // x y z
  [0, 0, 20],
  [10, 10, 40],
  [20, 10, 50],
  [30, 30, 30],
]

const option = {
  xAxis: {},
  yAxis: {},
  series: {
    type: 'scatter',
    data
  }
}

myChart.setOption(option)
</script>

</html>

在这里插入图片描述

symbolSize

  series: {
    type: 'scatter',
    data,
    symbolSize: (param) => {
      return param[2] // 根据 z 轴的数值动态设置标识的大小
    }
  }

在这里插入图片描述

K线图

常用于股票

基本样式

<!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 option = {
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: {},
  series: {
    type: 'candlestick',
    // [open, close, lowest, highest] - [开盘值，收盘值，最低值，最高值]
    data: [
      [20, 30, 10, 40],
      [30, 20, 10, 40],
      [30, 20, 0, 40],
      [30, 20, 0, 80],
    ]
  }
}

myChart.setOption(option)
</script>

</html>

在这里插入图片描述

雷达图

基本样式

<!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 data = [
  {
    name: '关羽',
    value: [80, 70, 50, 80, 98]
  },
  {
    name: '鲁班',
    value: [5, 98, 98, 5, 5]
  }
]

const option = {
  title: {
    text: '英雄实力对比'
  },
  legend: {},
  radar: {
    indicator: [
      { name: '生命', min: 0, max: 100 },
      { name: '攻击', min: 0, max: 100 },
      { name: '暴击', min: 0, max: 100 },
      { name: '防御', min: 0, max: 100 },
      { name: '速度', min: 0, max: 100 },
    ]
  },
  series: {
    type: 'radar',
    data
  }
}

myChart.setOption(option)
</script>

</html>

在这里插入图片描述

仪表盘

基本样式

<!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 option = {
  series: {
    id: 1,
    type: 'gauge',
    detail: {
      formatter: '{value}%'
    },
    data: [
      {
        name: '速度',
        value: 90
      }
    ]
  }
}

myChart.setOption(option)

// 随机修改仪表盘，每隔一秒钟修改一次
setInterval(() => {
  myChart.setOption({
    series: [
      {
        id: 1,
        data: [
          {
            name: '速度',
            value: Math.round(Math.random()*100)
          }
        ]
      }
    ]
  })
}, 300)
</script>

</html>

echarts 学习笔记【4】散点图、K线图、雷达图、仪表盘

散点图

基本样式

symbolSize

K线图

基本样式

雷达图

基本样式

仪表盘

基本样式