echarts---formatter dataZoom 背景图设置简单了解

echarts中formatter dataZoom 背景图配置的简单了解

感觉是自己理解能力不够还是怎么样,每次从echarts找一些需要的东西总是费上好半天才可以,简单记录一些小知识点：

• formatter
  之前老是看不懂formatter如何使用,我对他简单理解就是格式化,比如说:tooltip(提示框)中formatter,或者legend(图例)中使用formatter,我们将提示的信息展示成我们需要的样子,通过我们都会使用一个function来返回,下面是代码:
  formatter: function (params) {
  return ‘顺序: ’ + params.data[0]+’
  经度: ’ + params.data[1].toFixed(2) + ‘
  纬度: ’ + params.data[2].toFixed(2) +’
  时间: ’ + params.data[3] ;
  },
  function中的params: 代表我们图中展示的数据(series中的data),会自动获取到
  toFixed(2) :这其实是代表这个数字 小数点后几位,2代表小数点后二位

• dataZoom
  用于区域缩放的一个组建,当我们的x,y轴 要通过鼠标滑轮或者拖拉等方式对这个图进行缩放时候可以使用
  dataZoom: [
  {
  id: ‘dataZoomX’,
  type: ‘inside’,
  //表示第几个
  xAxisIndex: 0,
  filterMode: ‘filterMode’
  },
  {
  id: ‘dataZoomY’,
  type: ‘inside’,
  yAxisIndex: 0,
  filterMode: ‘filterMode’
  }
  ],
  不做过多解释,可以通过echarts官方文档看一些配置概念,这里有一个地方需要注意:当x,y的filterMode都是empty的时候,会发现鼠标划几下就不可以动了
  - 背景图的配置
  1.首先将我们的图片转为base64图片,网上很多在线工具转换,将转换完的Base64编码复制下来共我们使用,这个编码就是我们要使用的图片
  var bgPatternSrc = ‘data:image/png;base64,…..’; 这个Base64编码巨长,不用怀疑就是他
  var bgPatternImg = new Image();
  bgPatternImg.src = bgPatternSrc;
  2.将图片设置进我们的option
  option= {
  //设置背景图片
  backgroundColor: {
  image: bgPatternImg,
  repeat: ‘no-repeat’
  },
  }
  这只是我使用到的一些简单的地方,说的也比较通俗,仅作了解