shyarchershyarcher
首页
  • 学习笔记
  • 旧版迁移内容
Github
首页
  • 学习笔记
  • 旧版迁移内容
Github
  • 学习笔记

    • 博客搭建

      • Vuepress+githubPages搭建个人博客流程
    • AI部署

      • AI服务器配置指南
      • OpenCode 部署与使用完全指南
    • vue相关

      • 01vue的基本概念
      • 02侦听器和axios
      • 03vue生命周期和组件数据传递
      • 04vuex笔记
      • vue3学习笔记
      • pinia学习笔记
    • js相关

      • 原型和继承
      • jQuery笔记
    • react相关

      • Hooks笔记
      • React学习笔记
    • 后端

      • 关于服务器的一些概念
      • node.js笔记
      • nodejs后台起服务步骤
    • git相关

      • 给git设置代理
      • git笔记
    • 部署相关

      • webpack笔记
    • echarts

      • echarts笔记
  • 旧版迁移内容

    • 利用Hugo+gitHub搭建个人博客
    • 利用JavaSwing开发一款桌面塔防游戏
    • 配置达梦驱动包至本地Maven库
    • 热部署插件JRebel使用说明
    • Windows触摸板操作及谷歌浏览器快捷键整理
    • yapi部署笔记

Echarts数据可视化学习笔记

  • 常用图表
  • 各种图表的适用范围
  • 使用Echarts的一般步骤
  • 常用配置项

常用图表

笛卡尔坐标系(直角坐标系)

柱状图(bar)、折线图(line)、散点图(catter)/涟漪散点图(effectCatter)

地图坐标系

地图(geo)

极坐标系

饼图(pie)、雷达图(radar)、仪表盘(gauge)

各种图表的适用范围

柱状图:

适用于直观的展示数据在每种分类的具体数值

折线图

适用于表现数据随着横坐标的变化趋势

散点图

适用于显示数据在不同维度的相关性

涟漪散点图

展示气泡,可以和地图配合使用

地图

展示数据在地理位置上的差异

饼图

展示数据在各个类目的占比情况

雷达图

展示数据在各种维度与标准值的差异,如能力值图表(六边形战士马龙)

仪表盘

展示数据在某个指标的进度

使用Echarts的一般步骤

1.引入echarts.js模块

2.创建呈现图表的容器

3.初始化echarts实例对象

4.准备配置项option

5.将配置项设置给echarts实例

常用配置项

笛卡尔坐标系

grid

axis

dataZoom

通用配置项

title

tooltip

toolbox

legend

类目配置项

series

地图配置项

geo

雷达配置项

radar

最近更新: 2026/8/11 15:57
Contributors: shyarcher