ECharts笔记

ECharts的基本使用

ECharts官网

使用步骤：

1. 引入 echarts.js 文件

2. 准备一个呈现图表的盒子

3. 初始化 echarts 实例对象

   var myChart =echarts.init(document.getElementById('main'))

4. 准备配置项

   var option = {
     xAxis: { // x轴
       type: 'category',//类名
       data: ['小明', '小红', '小王']
    },
     yAxis: {// y轴
       type: 'value'//数组
    },
     series: [
      {
         name: '语文',
         type: 'bar',//图标类型
         data: [70, 92, 87],
      }
    ]
   }

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

   myChart.setOption(option)

除了配置项会发生改变之外,其他的代码 都是固定不变的

ECharts常用的图表

• 柱状图bar（柱状图描述的是分类数据，呈现的是每一个分类中有多少）

• 折线图 line （分析数据随时间的变化趋势）

• 散点图 scatter （分析不同维度数据之间的相关性）

• 饼图 pie （分析不同分类的数据的占比情况）

• 地图 map （分析不同地理位置上数据的差异）

• 雷达图 radar（分析多个维度的数据与标准数据的对比情况）

• 仪表盘图 gauge（展现某个指标的进度或实际情况 ）

配置项小结

通用配置：

• title 标题

  • textStyle borderWidth borderColor borderRadius 文字样式 边框宽度 边框颜色 边框圆角

    left top right bottom 左边 顶部 右边 底部

• tooltip 提示内容

  • trigger triggerOn formatter 触发类型 触发时机 内容自定义

• toolbox.feature

  • saveAsImage dataView restore dataZoom magicType 保存图片 数据视图 重置 缩放 图表转换

• legend 图例数据

  • data 图例数据, 需要和series数组中某组数据的name值一致

直角坐标系配置：

（bar，line，scatee）

• grid

  show	borderWidth	borderColor	left	top	right
  是否可见	边框宽度	边框颜色	左边	顶部	右边

  还有宽高和底部等

• axis

  type	data	positon
  轴类型	数据	显示位置

• dataZoom

  type	xAxisIndex	yAxisIndex	start	end
  缩放块类型	x轴索引	y轴索引	开始	结束

具体详情配置可参照官方手册

高级配置

显示相关

---

• 主题 (默认俩款，可自定义)

  var chart = echarts.init(dom, 'light')
  var chart = echarts.init(dom, 'dark')

• 调色盘（局部全局、渐变色）

• 样式

• 自适应

  • 步骤1：监听窗口大小变化

  • 步骤2：在事件处理函数中调用 ECharts 实例对象的 resize 即可

动画

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

加载动画

• 显示加载动画

  • mCharts.showLoading()
    一般, 我们会在获取图表数据之前 显示加载动画

• 隐藏加载动画

  • mCharts.hideLoading()
    一般, 我们会在获取图表数据之后 隐藏加载动画, 显示图表

增量动画

---

所有数据的更新都通过 setOption 实现, 我们不用考虑数据到底产生了那些变化, ECharts 会找到两组 数据之间的差异然后通过合适的动画去表现数据的变化

动画的配置

---

• 开启动画 animation: true

• 动画时长 animationDuration: 5000

• 缓动动画 animationEasing : 'bounceOut'

  linear ,线性变化, 这样动画效果会很均匀 bounceOut ,这样动画效果会有一个回弹效果

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

交互API

全局echarts对象

全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的

• echarts.init（初始化ECharts实例对象 使用主题）

• echarts.registerTheme (注册主题 只有注册过的主题,才能在init方法中使用该主题)

• echarts.registerMap

  注册地图数据
  $.get('json/map/china.json', function (chinaJson) {
        echarts.registerMap('china', chinaJson);
  });
  geo组件使用地图数据
  var option = {
    geo: {
       type: 'map',
       map: 'china',
   },
  })

• echarts.connect

  • 一个页面中可以有多个独立的图表

  • 每一个图表对应一个 ECharts 实例对象

  • connect 可以实现多图关联，传入联动目标为 EChart 实例，支持数组

    这样, 由于我们打开了toolbox中的saveAsImage, 所以会出现下载图片的按钮. 而通过 echarts.connect([mCharts, mCharts2]) , 此时点击下载图片按钮, 保存下来的图片就是两个图 表的图片了.

echartsInstance对象

---

eChartsInstance 对象是通过 echarts.init 方法调用之后得到的

• echartsInstance.setOption (设置或修改图表实例的配置项以及数据 多次调用setOption方法 合并新的配置和旧的配置 增量动画)

• echartsInstance.resize

  重新计算和绘制图表
  一般和window对象的resize事件结合使用
  window.onresize = function(){
    myChart.resize();
  }

• echartsInstance.on echartsInstance.off(绑定或者解绑事件处理函数)

  • 鼠标事件

    常见事件: 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup' 等
    事件参数 arg:  和事件相关的数据信息
    
    

    mCharts.on('click', function (arg) {
      // console.log(arg)
      console.log('饼图被点击了')
    })

    解绑事件:
    

    mCharts.off('click')

  • ECharts 事件

    常见事件:
    legendselectchanged、'datazoom'、'pieselectchanged'、'mapselectchanged'
    等
    事件参数 arg:  和事件相关的数据信息
    mCharts.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('图例选择发生了改变...')
    })

• echartsInstance.dispatchAction (主动触发某些行为, 使用代码模拟用户的行为)

  // 触发高亮的行为
  mCharts.dispatchAction({
    type: "highlight",
    seriesIndex: 0,
    dataIndex: 1
  })
  // 触发显示提示框的行为
  mCharts.dispatchAction({
    type: "showTip",
    seriesIndex: 0,
    dataIndex: 3
  })

• echartsInstance.clear (清空当前实例，会移除实例中所有的组件和表清空之后可以再次 setOption)

• echartsInstance.dispose(销毁实例销毁后实例无法再被使用)

---