echarts 学习笔记【1】常用组件

大杯美式不加糖

已于 2022-04-24 17:58:04 修改

阅读量2.3k

点赞数

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

于 2022-04-24 14:07:41 首次发布

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

版权

Echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

快速上手：

Echarts的官方文档写的其实非常清楚，Echarts的主要难点在于配置项比较多.在项目中多写多查，熟练后用起来还是很方便的。平时有不懂的配置项一定要优先去官方文档查

<!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: 700px;
      height: 500px;
    }
  </style>
</head>

<body>
  <div id="main"></div>
</body>
<!--CDN方式引入-->
<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>
<script>
// 初始化echarts容器
const dom = document.getElementById('main')
const myChart = echarts.init(dom)
// 配置项
const option = {
  xAxis: {
    data: ['html', 'css', 'js']
  },
  yAxis: {},
  series: {
    type: 'bar',
    data: [30, 20, 40]
  }
}
// 绑定配置
myChart.setOption(option)
</script>

</html>

这样一个简单的echarts图表就出现了：
在这里插入图片描述

配置项可详见官方文档的配置项手册

下面给出几个常用组件中的常用配置

标题组件（title）

  title: {
    text: '前端语言学习人数',
    subtext: '常用语言',
    left: 'center',
    textStyle: {
      color: '#42b983',
      fontSize: 24
    },
    subtextStyle: {
      color: 'blue',
      fontSize: 16
    },
    // show: false
  }

在这里插入图片描述

提示词（tooltip）

  /* 提示词 tooltip
  *  trigger 提示框触发方式
  *    item 图形触发，主要在散点图、饼图等无类目轴的图表中使用
  *    axis 坐标轴触发，主要在柱形图、折线图等会使用类目轴的图表
  *    none 什么都不触发
  * */
  tooltip: {
    trigger: 'item'
  }

使用 item 触发

在这里插入图片描述

使用 axis 触发

在这里插入图片描述

绘图区（grid）

  /* 绘图区 grid
  *  top right bottm left 绘图区在容器内的边距
  * */
 grid: {
   top: 100,
   left: 100
 }

图例（legend）

  /* 图例 legend
  *  data[] 图例的数据，每一项代表一个series的name
  * */
  legend: {
    data: ['studyNum', 'workNum'],
    left: 'right'
  },
  series: [
    {
      name: 'studyNum',
      type: 'bar',
      data: [30, 20, 40]      
    },
    {
      name: 'workNum',
      type: 'bar',
      data: [20, 15, 39]      
    }
  ]

在这里插入图片描述

工具类（toolbox）

内容很多，举几个常用的配置：

  /* 工具栏 toolbox
  *  feature 工具栏配置项
  *    saveAsImage{} 保存为图片
  *    dataView{} 数据视图工具
  *    restore{} 配置项还原
  *    dataZoom{} 数据区域缩放
  *    magicType{} 动态类型切换
  *     type[] 动态类型
  *       line 折线图
  *       bar 柱形图
  *       stack 堆叠
  *       tiled 平铺
  * */
  toolbox: {
    right: 50,
    feature: {
      saveAsImage: {},
      dataView: {},
      restore: {},
      dataZoom: {},
      magicType: {
        type: ['line', 'bar', 'stack', 'tiled']
      }
    }
  }

在这里插入图片描述

x 轴与 y 轴（xAxis、yAxis）

  /* x 轴
  *  name 坐标轴名称
  *  data[] 类目数据
  * */
  xAxis: {
    name: '前端语言',
    data: ['html', 'css', 'js']
  },
  /* y 轴
  *  name 坐标轴名称
  *  splitNumber 分割段数
  *  interval 强制设置坐标轴分割间隔
  *  
  * */
  yAxis: {
    name: '人数',
    splitNumber: 10
  }

在这里插入图片描述

系列（series）

  /* 系列列表 series
  *  type 列表类型
  *  name 系列名，用于提示tooltip、图例legend、筛选、数据更新等等
  *  data[] 数据
  *  markPoint{} 标记点
  *    data[] 标记点的数据数据
  *      {type: 'max'} 最大值
  *      {type: 'min'} 最小值
  *      {value: '值', coord: [x, y]} 坐标位
  *  markLine 标记线
  *    data[] 标记数据
  *      name 名称
  *      type 类型 average、min、max
  *      coord 点位
  *      ...
  * */
  series: [
    {
      name: 'studyNum',
      type: 'bar',
      data: [30, 20, 40],
      markPoint: {
        data: [
          { type: 'max' },
          { type: 'min' },
          { value: 30, coord: [0, 30] }
        ]
      }  
    },
    {
      name: 'workNum',
      type: 'bar',
      data: [20, 15, 39],
      markLine: {
        data: [
          { type: 'average' },
          { type: 'max' },
          { type: 'min' }
        ]
      }  
    }
  ]