数据可视化基础 - echarts进阶

95 阅读1分钟

9.

image.png image.png

创建echarts实例后进行配置:

1.定义数据集;

2.设置的dataset配置项,指定数据源source;

3.在series的每个图标配置中,指定图标使用数据集的哪一项,以及按需配置itemName等等。

image.png image.png

10.

image.png (echarts组件均在series中独立配置)

(1).tooltip-提示组件

鼠标移动图标项上显示对应数据。

image.png

(2).legend-图例切换组件

一个容器存在多个图表时,可以通过点击图例控制哪些系列不显示。

image.png

(3).toolbox-工具栏组件

内置有导出图片数据视图动态类型切换数据区域缩放重置五个工具。

image.png

(4).dataZoom-缩放组件

用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。

image.png

11.Echarts的坐标系

image.png

(1).单坐标系

image.png 没啥好说的,一个x轴和一个y轴。

(2).双坐标系

image.png 即一个轴对两个另一个轴的情况,需要存在两个轴的情况下,使用xAxisIndex或yAxisIndex指明哪一组数据使用哪个轴,eg:

image.png image.png

(3).多坐标系(不常用)

image.png

12.grid

直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图柱状图散点图(气泡图)

在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件,在 ECharts 3 中可以存在任意个 grid 组件。

image.png