前端---Echarts的使用

54 阅读1分钟

踏浪前行风正劲,

不负韶华争朝夕。

加油!奥利给 ✌✌✌

Echarts

echarts——是一个使用javaScript实现的开源可视化库。可以流畅的运行在pc和移动设备上。兼容当前大部分浏览器(IE9/10/11,chrome, firefox,safari等),底层是依赖矢量图形ZRender,提供直观、交互丰富、可高度定制的数据可视化图表。

echarts——提供了折线图、柱状图、散点图、饼图、k图(股票那种),用于地理数据的地图、热力图、线图等等。

Echarts基本使用

Snipaste_2023-02-15_10-29-42.png

效果:

Snipaste_2023-02-15_10-30-00.png

Echarts一个容器展示多个图表

Snipaste_2023-02-15_10-29-42.png

效果:

Snipaste_2023-02-15_11-21-08.png

Echarts 4.0 新特性:dataset

echarts——Echarts 4 开始支持了数据集(dataset)组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以自由指定数据到视觉的映射。这一特性将逻辑和数据分离,带来更好的复用,并易于理解。

Snipaste_2023-02-15_10-29-42.png

Snipaste_2023-02-15_10-30-00.png

Echarts: 组件

echarts 中除了绘图之外,其他的部分都可抽象为【组件】。例如,echarts中至少有这些组件:xAxis(直角坐标系x轴)、yAxis(直角坐标系y轴)、grid(直角坐标系底板)、angleAxis(极坐标系角度轴)...

Echarts:坐标系

Snipaste_2023-02-15_10-29-42.png

效果:

Snipaste_2023-02-16_09-46-13.png

Echarts坐标系:多个坐标系

Snipaste_2023-02-16_10-00-25.png

效果:

Snipaste_2023-02-16_09-59-26.png