暗号：反正弦

多坐标轴

有时候在一个图表上，展示数据的单位不一样，需要用到多个坐标轴来使数据展现更具体：

yAxis:[
            {name:'学习人数',min:0,max:50},
            {name:'就业人数',min:0,max:1000}
        ],

可以在Axis属性上以对象的形式添加一组信息，这样就可以展示多一个坐标轴。

数据更新

echarts请求数据，可以通过ajax、fetch等放方式获取，可是数据更新有两种思路：

1. 先设置loading，在请求到数据之后，再setOption（）
2. 先设置setOption（），在请求到数据之后再追加配置

   // 异步更新
   fetch('./data/China.json')
        .then((res) => res.json())
        .then(data => {
          let option = {};
          myChart.setOption(option)
        }

   数据集
   dataset数据集是用来进行数据管理的：

• 通过原始数据，设置映射关系，形成图表。
• 数据和配置分离，便于单独管理。
• 数据可以被多个系列或者组件复用。
• 支持更多的数据的常用格式，例如二维数组、对象数组等。 ```json // 维度映射 —> 将横纵坐标的数据放到同一个数据集中，方便管理 const source=[

    ['html',  20,   25],
    ['css',   10,   15],
    ['js',    30,   40]

  ]; const dimensions=[‘大前端’,’学习人数’, ‘就业人数’]; dataset: {source,dimensions},

// 编码映射 —> 将data中的数据，按照维度展开 dataset: { /*

• dimensions 维度映射 []
• string，如 ‘someName’，等同于 {name: ‘someName’}
• Object
• name string
• type 类型
• number，默认，表示普通数据。
• ordinal，对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 ‘ordinal’ 类型
• / dimensions: [‘收入’,’寿命’,’人口’,’国家’,’年’], /数据源*/ source: data }, ```

  区域缩放

  区域缩放大多数情况是应用在地图上，为了概览整体，观察细节

• dataZoomSelect —> 框选区域进行缩放
• dataZoomInside —> 坐标系上通过鼠标拖拽、滚动或者手指滑动等操作进行缩放

• dataZoomSlider —> 单独的滑动条，用户在滑动条上进行缩放

  视觉映射

  visualMap 视觉映射可以让项目的数据和颜色、大小等属性相关联。
  在涉及到一些散点图的绘画中，通常都会加入 visualMap 将每个数据的信息给表现得更加具体。

  visualMap:{
            type:'continuous',
            min:0,
            max:100,
            inRange:{
                color:['#00acec','yellow','maroon'],
                symbolSize:[3,50]
            }
        },

  visualMap的属性：

  type 映射方式

• continuous 连续型

• piecewise 分段型

min 映射区间的起始位置，如0
max 映射区间的接收位置，如90
calculable 是否显示拖拽用的手柄，只适用于连续型
range [] 显示此范围内的项目，百分比类型，只适用于连续型,如[0,100]
dimension 基于哪个维度的数据进行视觉映射
inRange 自定义取色范围

• color[] 颜色映射
• symbolSize[] 大小映射

  事件

  echarts 也支持事件绑定，通过

  myChart.on('click', function (params) {
    console.log(params.name);
  });

  在我们需要通过图表进行跳转或者改变图表内部某些属性的操作的时候，就可以给我们的组件添加上事件。此外，echarts 支持常规的鼠标事件类型，包括’click’、’dblclick’、’mousedown’、’mousemove’、’mouseup’、
  ‘mouseover’、’mouseout’、’globalout’、’contextmenu’

  富文本标签

  如果在图表的tips或者其他地方需要展示图片已及文字等大量信息的，不妨使用echarts的富文本标签，通过rich去自定义更合适的展示工具：

  rich:{
  img:{
    width:60,
    height:60,
    backgroundColor:{
      image:item.img
    }
  },
  name:{
    fontSize:18,
    lineHeight:32
  },
  val:{
    fontSize:14
  },
  }