Echarts高级应用

多坐标轴

多坐标轴即是在一个图表中有两个Y轴

设置方法：

在Yaxis中写入两个对象：{}，{}，同时根据算法（min，max，行高）保持两个y轴数据一致
在series中设置数据时，适应YaxisIndex属性设置系列与哪个y轴相关联

异步数据

数据的更新有两种思路，

先请求到数据后，在加载配置
先加载部分配置，例如title，等到加载数据成功后，在加载配置

数据集

数据集的优点：

基于原视数据，设置映射关系，行成图表。
数据和配置分离开，便于单独管理。

数据集与图表的映射方式

第一列：前端：html,css,js 为映射的类目轴

第二列：为第一系列的数据

第三列：为第二系列的数据

 const source = [     ['前端','学习人数','就业人数'],
     ['html',20,30],
     ['css',40,60],
     ['js',40,70]   
 ]

数据集的行映射

第一行：前端：学习人数，就业人数：为映射的类目轴

第二行：为第一系列的数据

第三行：为第二系列的数据

 seriesLayoutBy：row   // 基于行映射

数据集的维度映射

数据集的维度指的就是每个系列的名称name。维度映射作用：对数据的维度信息统一定义和管理。 ECharts 默认会从 dataset.source 的第一行中获取维度信息。但是，如果在dataset 里指定了 dimensions，那么 ECharts 不再会自动从 dataset.source 中获取维度信息。

数据集的编码映射

encode可以指定某一系列对应某各维度的数据，默认series里第一个系列的就是数据源里第二列的数据，

区域缩放

作用：放大数据，便于观察细节。缩小数据，便于观察整体

dataZoom组件类型：

框选型数据区域缩放组件（dataZoomSelect）：提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在 toolbox 中。
内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。

视觉映射

visualMap 视觉映射可以让项目的数据和颜色、大小等属性相关联。

实际效果如下：

visualMap 的常见属性

type 映射方式
- continuous 连续型
- piecewise 分段型
min、max 映射区间的起始位置和结束位置，对应实际数据
range 显示此范围内的项目，百分百类型
calculable 是否显示拖拽用的手柄，在连续型的颜色映射器中
inRange 自定义选中范围中的视觉元素
- color[] 颜色映射
- symbolSize 大小映射
...

echarts事件

Echarts如何监听事件

和canvas类似，echarts同样以"on"关键字监测事件

 myChart.on('click', function (opt) {
     //事件相关配置
     console.log(opt);
 });

常见鼠标事件

click:单击

doubleclick:双击

mousedown:鼠标按下

mousemove:鼠标移动

mouseup:鼠标抬起

所有的鼠标事件包含参数params如被点击的图形信息params.componentType.

组件交互事件的监听

   /*
     * 使用on 方法绑定 legendselectchanged 图例开关点击事件
     * */
     myChart.on('legendselectchanged',function(opt){
         console.log(opt);
     })

富文本标签

富文本标签即是把文字和图片结合在一起，更直观形象的展示数据之间的关系

富文本的实现步骤

  // 基于准备好的dom，初始化echarts实例
     const myChart = echarts.init(document.getElementById('main'));
 
     // 数据
     const data=[
         {name:'杨戬',value:80,img:'./images/yj.jpg'},
         {name:'鲁班',value:60,img:'./images/lb.jpg'},
         {name:'沈梦溪',value:40,img:'./images/smx.jpg'},
         {name:'诸葛亮',value:30,img:'./images/zgl.jpg'}
     ];
 
     data.forEach(item=>{
         /*自定义标签 label
     *   formatter 文本片段
     *       '{样式名|文字内容}\n 换行'
     *   文本块的样式
     *       textBorderColor 文本描边颜色
     *       textBorderWidth 文本描边宽度
     *       ...
     *   rich 富文本，在其中写入样式
     *       width 宽
     *       height 高
     *       backgroundColor 背景色
     *           image 背景图
     *       fontSize 文字大小
     *       lineHeight 行高
     *       fontWeight 文本加粗
     *       ...
     * */
         item.label={
             formatter:'{img|}\n{name|'+item.name+'}',
             textBorderColor:'yellow',
             textBorderWidth:3,
             rich:{
                 img:{
                     width:60,
                     height:60,
                     backgroundColor:{
                         image:item.img
                     }
                 },
                 name:{
                     lineHeight:30,
                     fontSize:18
                 }
             }
         }
     })
   /*配置项*/
     const option = {
         title:{text:'英雄战力'},
         series: {
             type: 'pie',
             data,
             radius:'70%',
         }
     };
     myChart.setOption(option);

Echarts高级应用学习笔记