数据可视化-echarts

回忆见、

于 2021-12-10 17:16:54 发布

阅读量814

点赞数

文章标签： echarts javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_48764743/article/details/121861017

版权

本文档详细介绍了如何利用Echarts库创建横向柱状图、纵向柱状图、面积占比图和环状图。首先，创建路由页面和图表组件，并配置路径信息。接着，获取Echarts实例并设置基础配置项。然后，获取数据并根据业务需求完善图表设置。同时，调整图表样式，如标题位置。为了实现窗口适配，监听窗口resize事件以调整图表大小。最后，在组件销毁时取消resize事件监听，确保资源释放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、绘制横向柱状图

二、绘制纵向柱状图

三、绘制面积占比图

四、绘制环状图

实现步骤
    1.创建路由页面和图表组件，配置路径信息
    2.获取echarts实例设置静态的基础配置项 initEcharts()
    3.获取数据 getData()
    4.根据业务数据继续完善图表 setEcharts()
    5.调整图表样式风格（标题位置 ）
    6.实现窗口适配，适配配置项取值类型是number的 （字体大小 ）Adaptive()
        window.addEventListener('resize',this.Adaptive)
    7.组件销毁取消监听  destroyed()
        window.removeEventListener('resize',this.Adaptive)