在近期的项目中，有大量处理可视化数据的需求。说起这个，相信很多同学跟我一样，都会想到用 Echarts 来实现。没错，Echarts 拥有高度可定制化的配置，以及非常详尽的开发文档，并且它的最新版已经更新到了 v4.3。

x-charts 基于 ECharts 二次封装的图表库 ???????? 项目仓库地址: [链接] demo 演示地址: [链接] 特性 0 配置（简化繁琐的 options 配置） 可以针对项目提取共用的 default options 将 options 和 data 分离 使用方法 npm i @pdeng/x-charts new Xcharts(el: HTMLDivElement, type?: String, options?: Object).setData(data?:…

上一篇文章图片什么都有我就不重复了，由于时间属实是太仓促，在这段代码中，我删除了接口数据及其他功能，所以代码拿过来就能用，至于折现和拐点的那段代码，需要数据配合，这里就直接删除了，后期有时间，一定更新上！

在公司做了一版dashboard，对echarts有了大量的实践。坚果图，日历图，折线图，地理图。难易程度排名为坚果图，折线图，日历图，地理图。总结了以下几点注意事项：

有时候echarts设置了图表后，放大浏览器和缩小浏览器，父元素会跟着浏览器大小进行放大和缩小，而图表不会跟着父元素大小进行变化，这时候我们可以设置echarts对象，让他可以实现这样的效果。

ECharts 一个使用 JavaScript 实现的开源可视化库, 在前端我们可以使用这个库绘制各种可视化图表。我们需要掌握一些基本的数据知识，这些基本的数据知识能够帮助我们更好的理解和使用ECharts

Echarts main.js 注册全局echarts {代码…} core/echarts.js echarts按需引入 {代码…} use.vue 使用echarts实例 {代码…}

Question 1: 折线图和柱状图的双轴图如何做到线条/柱与对应的x/y轴的颜色区分？Answer : 在定义绘制echarts图形的option之前，在外部定义一个颜色数组，举例：

框架调研 为了让你们少走弯路，我总结了以下可借鉴的项目。如果你们愿意，完全可以基于他们的基础进行二次开发： draw.io 原型图设计编辑器 [[链接]] method draw svg绘制编辑器 [[链接]] Fabric.js canvas图形编辑器 [[链接]] 为什么我不在此基础上进行二次开发？大家都知道在已有的项目上进行二次开发难度有时也是很大…

现在各种框架各种库都很强大，但是也因为功能强大，导致很多配置都过于繁重，真正有用的就那么几个，今天就基于echarts封装一个通用柱形图!