Echarts入门

webGIS
字数统计: 2.4k   |   阅读时长≈ 9 分钟

Echarts上手

1、配置项详解

  1. xAxis：直角坐标系中的x轴
  2. yAxis：直角坐标系中的y轴
  3. series：系列列表。每个系列通过type决定自己的图标类型

1.1、柱状图

柱状图：category：类目轴、value：数值轴

  1. 标记：最大值、最小值、平均值

    markPoint、markLine

  2. 显示：数值显示、柱宽度、横向柱状图

    lable、barWidth、x轴y轴角色互换

  3. 柱状图描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以很清晰的看出每个分类数据的排名情况

1.2、通用配置

  1. 标题：title

    文字样式（textStyle）、标题边框（borderWidth、borderColor、boderRadius）、标题位置（left、top、bottom、right）

  2. 提示：tooltip 提示框组件，用于配置鼠标滑过或点击图标时的显示框

    • 触发类型：trigger

      item、axis

    • 触发时机：triggerOn

      mouseOver、click

    • 格式化：formatter

      字符串模板、回调函数

  3. 工具按钮：toolbox echarts 提供的工具栏

    • 内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置，五个工具

    • 显示工具栏按钮：feature对象

      saveAsImage、dataView、dataZoom、magicType、restore

  4. 图例：legend：图例，用于筛选系列，需要和series配合使用

    • legen中的data是一个数组
    • legend中的data的值需要和series数组中某组数据的name值一样

1.3、折线图

  1. 图标类型：series下设置 type：line

  2. 标注区间：markArea，柱状颜色区间

  3. 线条控制：平滑风格

    smooth、lineStyle

  4. 填充风格

    areaStyle

  5. 紧挨边缘：在 xAxis 中设置

    boundaryGap:false

  6. 缩放脱离 “0” 值：在 yAxis 中设置，适用于变化不大的值

    scale:true

  7. 堆叠图：避免折线杂乱无章，图形的值是叠加的

    series中的对象中添加 stack:'all'

  8. 折线图常用来分析数据随时间的变化趋势

1.4、散点图

  1. 散点图可以帮我们推断出变量之间的相关性

  2. x轴、y轴的数据为二维数组

  3. 图标类型

    • 在series下设置 type:scatter
    • xAxis和yAxis的type都要设置为 value

  4. 调整

    将坐标轴都设置为脱离 0 值比例，在xAxis和yAxis中的 scale:true

  5. 气泡图效果：在 series 中设置

    • symbolSize：控制散点大小，支持回调函数
    • itemStyle：该对象下的color，支持回调函数

  6. 涟漪动画效果

    • 更改 series 中的type:effectScatter
    • rippleEffecrt:控制涟漪动画的效果
      • scale 控制涟漪动画的范围
    • showEffectOn：涟漪动画的触发时机
      • render：每个散点渲染之后，自动拥有涟漪的效果
      • emphasis：鼠标滑过时才产生涟漪

  7. 散点图可以帮助我们推断出不同维度数据之间的相关性

1.5、直角坐标系中的常用配置

  1. 直角坐标系图标：柱状图、折线图、散点图

    1. 配置1：网格 grid

      • grid 用来控制直角坐标系的布局和大小，可以控制图表的大小和位置

      • x轴和y轴就是在grid的基础上进行绘制的

      • 显示 grid

        show:true

      • grid 的边框

        borderWidth、borderColor

      • grid 的位置和大小

        left、top、right、bottom

        width、height

    2. 配置2：坐标轴 axis

      • 坐标轴分为x轴和y轴
      • 一个 grid 中最多有两种位置的x轴和y轴
      • 坐标轴类型 type
        • value：数值轴，自动从目标数据（series）中读取数据
        • category：类目轴，该类型必须通过data设置类目数据
      • 显示位置 position
        • xAxis：可取值为 top 或 bottom
        • yAxis：可取值为 left 或 right

    3. 配置3：区域缩放 dataZoom

      • 用于区域缩放，对数据范围过滤，x轴、y轴都可以拥有
      • dataZoom 是一个数组，可以配置多个区域缩放器
        • 类型 type
          • slider 滑块
          • inside 内置，依靠鼠标滚轮或者双指缩放
        • 指明产生作用的坐标轴
          • xAxisIndex：设置缩放组件控制的是哪个x轴，一般写 0 即可
          • yAxisIndex：设置缩放组件控制的是哪个y轴，一般写 0 即可
        • 指明初始状态的缩放情况
          • start、end

1.6、饼图

  1. 数据准备：数组，包含name和value
  2. series下设值type:pie，无须配置 xAxis 和 yAxis
    1. lable显示文字，formatter 设置显示的格式
    2. radius 设置饼图的半径，若设置为百分比形式，则百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比的设置，若设置为数组i形式，则第0个元素为内圆半径，第一个元素为外圆半径
    3. 南丁格尔图 roseType:’radius’ 饼图的每一个区域的半径是不同的，取决于占比大小
    4. 选中效果 selectMode:’single’/‘multiple’，选中偏移量 selectOffset:30
  3. 饼图可以让人快速了解不同分类的数据的占比情况

1.7、地图

  1. 地图图表的使用方式

    1. 百度地图APi
    2. 矢量地图，需要准备矢量地图数据

  2. 矢量地图实现步骤

    1. 准备矢量地图json文件

    2. 使用ajax获取json文件

      1. $.get(‘文件路径’,function(json){})

      2. 在回调函数中往echarts全局对象注册地图的json数据

        echarts.registerMap(‘map’,json)

      3. 在 geo下设置

        • type:map,map:’map’
        • roam:true，开启地图的缩放和拖动
        • label:{show:true}，展示地图标签
        • zoom，设置初始化的缩放比例
        • center，设置图表中心点

  3. 常见效果

    1. 显示某个区域

      • 加载该区域的矢量地图数据
      • 通过 registerMap 注册到 echarts 全局对象中
      • 指明 geo 配置下的 type 和 map 属性
      • 通过 zoom 放大该区域
      • 通过 center 定位中心点

    2. 地图上显示数据

      1. 将 series 下的数据和 geo 关联起来

        geoIndex:0,type:’map’

      2. 结合 visualMap配合使用

        1. min、max 范围
        2. inRange:{color:[‘white’,’red’]} 控制颜色渐变的范围
        3. calculable:true 出现滑块，筛选数据

    3. 地图结合散点图的使用

      1. series 增加新的对象

      2. 配置新对象的type

        type:effectScatter

      3. 让散点图使用地图坐标系统

        coordinateSystem:’geo’

1.8、雷达图

  1. 定义各个维度的最大值，在 radar 对象下

    indicator:[{name:’易用性’,max:100}, …]

  2. 在 series 下设置 type:radar

  3. 常见效果

    1. radar 对象下 shape:’circle’ 设置雷达的形状

  4. 雷达图可以用来分析多个维度的数据与标准数据的对比情况

1.9、仪表盘

  1. 主要用于进度把控以及数据范围的检测
  2. series 下的 type:’gauge’
  3. 常见效果
    • min、max 控制仪表盘的范围
    • 多个指针，data中增加对象
    • itemStyle，控制每个指针的样式

2、高级配置

2.1、调色盘

  1. 是一组颜色、图形，series 会从中选取颜色

  2. 主题调色板，引入主题

  3. 全局调色板

    在 option 中配置color:[…] 数组

  4. 局部调色板

    在 series 中设置 color:[…] 数组

  5. 调色盘作用遵循就近原则

  6. 颜色渐变

    1. 线性渐变

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      itemStyle:{
          color:{
              type:'linear',
             	x:0,
      		y:0,
      		x2:0,
      		x3:1,
      		colorStops:[{
                  offset:0,
                  color:'red'//0%处的颜色
              },
              {
                  offset:1,
                  color:'blue'//100%处的颜色
              }],
              globalCoord:false //却省为 false
                      
          }
      }

    2. 径向渐变

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      itemStyle:{
          color:{
              type:'radial',
             	x:0.5,//圆心坐标
      		y:0.5,
      		r:0.5,//范围
      		colorStops:[{
                  offset:0,
                  color:'red'//0%处的颜色
              },
              {
                  offset:1,
                  color:'blue'//100%处的颜色
              }],
              global:false //却省为 false
                      
          }
      }

2.2、样式

  1. 直接样式，在series 的每个data下

    itemStyle、textStyle、lineStyle、areaStyle、label

  2. 高亮样式，鼠标滑过时的颜色变化

    在 emphasis 中包裹 itemStyle、textStyle、lineStyle、areaStyle、label

2.3、自适应

  1. 当浏览器的大小发生变化的时候，如果想让图表也能随之适配变化

  2. 监听窗口大小变化的事件

  3. 在事件处理函数中调用Echarts实例对象的resize即可

    1
    2
    3
    4
    5
    window.onresize = function(){
        myChart.resize()
    }
    // 或者
    window.onresize = mychart.resize

2.4、动画

  1. 加载动画

    Echarts已经内置好了加载数据的动画，只需要在合适的时机显示或隐藏即可

    • 显示加载动画

      1
      mCharts.showLoading()

    • 隐藏加载动画

      1
      mCharts.hideLoading()

  2. 增量动画

    实现方式

    1
    mCharts.setOption(option)

  3. 动画配置项

    • 开启动画

      1
      animation:true;//默认为 true

    • 动画时长

      1
      2
      3
      4
      animationDuration:7000//以毫秒为单位，支持回调函数
      animationDuration:function(arg){
          console.log(arg)
      }

    • 缓动动画

      1
      animationEasing:'bounceOut'// linear

    • 动画阈值

      1
      animationThreshold:8//单种形式的元素数量大于这个阈值时会关闭动画

2.5、交互API

  1. 全局echarts对象

    引入echarts.js 文件之后就可以直接使用

    • init：初始化实例对象，主题的引入
    • registerTheme：注册主题，只有注册过的主题才能在init方法中使用该主题
    • registerMap：注册地图数据
    • connect
      • 一个页面可以有多个独立的图表
      • 每一个图表对应一个Echarts实例对象
      • connect可以实现多图关联，传入联动目标为Echarts实例对象，支持数组
      • 应用场景：保存图片的自动拼接、刷新按钮、重置按钮、提示框联动、图例选择、数据范围修改

  2. echartsInstance对象

    是通过echarts.init()方法调用之后得到的

    • setOption

    • resize：重新计算和绘制图表，一般和window对象的resize事件结合使用

    • on\off

      • 绑定或者解绑事件处理函数

      • 鼠标事件

        常见事件：’click’、’dblclick’、’mousedown’、’mousemove’、’mouseup’等

        常见参数：arg 和事件相关的数据信息

      • ECharts事件

        常见事件：legendselectchanged、datazoom、pieselectchanged、mapselectchanged

        常见参数：arg 和事件相关的数据信息

    • dispatchAction：触发某些行为，使用代码模拟用户的行为

      1
      2
      3
      4
      5
      mCharts.dispatchAction({
          type:'highlight',//事件类型
          seriesIndex:0,//图表索引
          dataIndex:1//图表中哪一项高亮
      })

    • clear：清除当前实例，会移除实例中所有的组件和图表

    • dispose：销毁实例

  • Copyrights © 2022-2023 hqz

请我喝杯咖啡吧~

支付宝
微信