【高级课程笔记】—— Echarts高级应用（二）

一、视觉映射

 

注：visualMap 以前叫dataRange，如果你看到了比较老的教程或博客，里面有dataRange，要知道那就是视觉映射 visualMap

二、事件

ECharts 如何监听事件

　　

鼠标事件有哪些

组件交互事件的监听

 代码触发 ECharts 中组件的行为

三、富文本标签

富文本标签，就是内容丰富的文本标签。

在许多地方(如图、轴的标签等)都可以使用富文本标签。例如：

文本块和文本片段

• 文本块(Text Block)：文本标签块整体。
• 文本片段(Text fragment)：文本标签块中的部分文本。

文本标签的属性可以参考label：https://www.echartsjs.com/zh/option.html#series-bar.label

富文本的属性：https://www.echartsjs.com/zh/option.html#series-bar.label.rich.%3Cstyle_name%3E

富文本的实现步骤

 

四、原生图形组件

原生图形组件就是可以自定义图形的组件。

原生图形组件里绘制的图形，可以绑定鼠标事件、拖拽事件等。

echarts 有两种点位：坐标位，像素位。

坐标位有直角坐标位、地理坐标位等。

原生图形的位置就是基于像素位定位的。

echarts 实例对象提供了坐标位和像素位的转换方法：

• convertToPixel(坐标系，[x,y]) 坐标位转像素位
• convertFromPixel(坐标系，[x,y]) 像素位转坐标位

案例 – 折线图标记点的拖拽

　　

原生图形 

 原生图形的位置

五、响应式布局

在html 中使用css 中的flex 可以轻松实现响应式布局。

在echarts 里，如何适配不同尺寸的屏幕呢？

• 简单点的可以通过为尺寸、位置等属性设置百分比来实现。
• 复杂些的就需要自定义响应规则。

自定义响应规则的方法

• 建立基础配置项 baseOption
• 建立规则配置列表 media

1. 建立query
2. 建立此规则下的配置信息option

• echarts 实例基于baseOption 和media 绘制图表

---

注：课程来自开课吧