前言

Echarts这款功能比较全面的数据可视化库。具备丰富的图表类型、配置化开发的易用性、高度可定制的视觉效果、优秀的响应式设计和交互体验，还有对大数据量的性能调整能力，很多地方都在用公司管理程序、数据分析网站等场景。

但每创建一个图表都要处理初始化、销毁、resize 适配通用逻辑，项目如果体积大起来创建和维护就变得特别麻烦。我们直接看官网对于图表的创建的快速上手:快速上手 - 使用手册 - Apache ECharts

如果要调整图表的自适应大小还要：

最终每次离开页面还要销毁实例，实在是太麻烦了。

如果可以把Echarts这些烦人的重复性步骤封装起来只传我需要的自定义配置参数就很方便了

使用教程

到底有多方便？直接上食用方法

. 在template里使用组件

先把ECharts组件写进components里封装再在要用到的页面使用

. 在js配置参数

js里就直接写对应的导入、配置参数、点击事件就好了

import ECharts from '@/components/ECharts.vue';

// 薪资分布图表配置 const salaryChartOption = { title这方面，{ text这方面，'员工薪资分布',left: 'center' },tooltip: { trigger: 'axis',axisPointer: { type这方面，'shadow' } 再看}。grid，{ left的观点是，'%',right: '%',bottom: '%',containLabel: true },xAxis: { type的观点是，'category',data: sampleData.map,axisLabel: { rotate: } },yAxis: { type: 'value',name: '薪资'},series: };

// 处理图表事件 const handleChartEvent = => { console.log;showMessage，};

组件封装

ECharts组件封装完整过程概括为：

. .组件基础结构搭建

. .与Props 配置