全网echarts案例资源大总结和echarts的高效使用技巧（细节版）

全网echarts案例资源大总结和echarts的高效使用技巧（细节版）

众所周知，在现今的开发大环境下，数据可视化（大屏化）项目在前端开发中的比重越来越大。而其中使用率最高的插件无疑就是 Apache Echarts。（ps: 以下简称为echarts）。本文就结合vue框架来讲解如何快速、高效、优雅地在项目中使用echarts。当然，本文篇幅也会为读者精心准备目前网络上最全面、最高效的echarts案例资源站集合。

二. 全网最全的echarts图表案例和实例资源站整理。

1. 资源一：分享你我 （推荐指数：）

• 优点：案例资源丰富，有主体分类，可检索，访问速度较快。
• 缺点：未做分页。

1. 资源二：ISWWQ.com （推荐指数：）

• 优点：案例资源丰富，可检索，有主体分类。
• 缺点：未做分页，访问速度较慢。

1. 资源三：PPChart （推荐指数：）

• 优点：案例资源丰富，有主体分类且分类较细，有分页，可检索，访问速度较快。
• 缺点：暂无。

1. 资源四：ECHARTS社区 （推荐指数：）

• 优点：案例资源丰富，有主体分类且分类较细，有分页，可检索，提供登录和社区。
• 缺点：访问速度慢，有广告。

1. 资源五：Made A Pie （推荐指数：）

• 优点：案例资源丰富，可检索，有主体分类。
• 缺点：访问速度较慢，未做分页。

1. 资源六：MCChart （推荐指数：）

• 优点：案例资源丰富，可检索，有主体分类。
• 缺点：详情图例加载慢，图例加载不出。

1. 资源七：ECharts官方案例 （推荐指数：）

• 优点：官方案例，资源稳定，主体分类多，可调节模式，可直接查看对应案例的配置项。
• 缺点：案例资源较少，未做分页，未提供检索。

1. 资源八：chartsdev.com （推荐指数：）

• 优点：案例资源丰富，有主体分类。
• 缺点：访问速度一般，未能开箱即用，排版较差，适用性较差等。

1. 资源九：[仿ECharts] （推荐指数：）

• 优点：资源较稳定，图标效果加载速度较快。
• 缺点：案例资源较少，未做分页，未提供检索等。

1. 资源十：DataInsight （推荐指数：）

• 优点：案例资源较丰富。
• 缺点：访问速度慢，未做主体分类，未提供检索等。

1. 资源十一：阿里云--原ECharts官方社区Make A Pie案例源码及图表图 （推荐指数：）

• 优点：提供原ECharts官方社区Make A Pie网站的所有案例源码及其对应的图例，可供查阅与开发成共享资源社区或网站。
• 缺点：未实现开箱即用。
• 说明：提取码：6l3t。

1. 资源十二：百度云--原ECharts官方社区Make A Pie案例源码及图表图 （推荐指数：）

• 优点：提供原ECharts官方社区Make A Pie网站的所有案例源码及其对应的图例，可供查阅与开发成共享资源社区或网站。
• 缺点：未实现开箱即用。
• 说明：提取码：qqsy。

三.echarts在vue项目中的使用说明和技巧。

1. 安装依赖和注意事项及对应的处理办法。

• 说明： vue中直接安装最新的echarts依赖包，可能会在运行时报echarts的init方法未定义的异常，此时可先卸载当前版本的echarts依赖包，重新安装指定稳定版本（如：v4.8.0）。如若此时还是报init未定义，那么可在入口文件main.js中引入时需按这种方式引入即可解决 ---- import * as echarts from 'echarts'。

• 核心代码和图例：

//常规安装

npm install echarts --save 

//如若按官网的上述依赖安装后报init未定义的话,那可能是由于所安装的当前ECharts版本过高导致,请安装以下版本

npm uninstall echarts --save   //卸载当前安装的ECahrts依赖

npm install echarts@4.8.0 --save     //重新安装低版ECahrts依赖

链接：https://juejin.cn/post/7078834647005822983
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。