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

一.前言。

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

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

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

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

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

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

资源三：PPChart （推荐指数：⭐⭐⭐⭐⭐）

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

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

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

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

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

资源六：MCChart （推荐指数：⭐⭐⭐⭐）

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

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

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

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

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

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

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

资源十：DataInsight （推荐指数：⭐⭐）

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

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

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

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

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

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

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

说明： 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依赖
复制代码

组件化实现每个echarts图表的独立管理，避免不必要的耦合。

说明：主组件（父组件）只用来存主内容区域和对应echrts图表的外部盒子；用子组件实现真正的容器来装载整个图表和实现对应图表的数据和图表渲染。
核心代码：

父组件：

<div class=“p-section bg”>
<div class=“p-title”>业务类型占比</div>
<!–以下为子组件–>
<ywlxzbChart></ywlxzbChart>
</div>
复制代码

子组件（echarts图表核心）：<template><divid="ywlx"style="width: 100%; height: 195px"v-loading="ywlezbLoading"></div>
</template><script>
import echarts from "echarts";
import * as API from "api/home.js";
export default {data() {return {ywlezbLoading: false,myChartLine: null,formData: [],nameData: [],};},name: "ywlxzbChart",methods: {//获取数据,Promise确保执行和绘画顺序getProfessionalCardsCount() {return new Promise((resolve, reject) => {this.ywlezbLoading = true;API.getProfessionalCardsCount().then((res) => {this.ywlezbLoading = false;if (res.code == 200) {this.formData = res.data.professions;this.nameData = [];this.formData.map((i) => {this.nameData.push(i.name);});}resolve(res);}).catch((err) => {this.ywlezbLoading = false;reject(err);});});},myEcharts() {// 基于准备好的dom，初始化echarts实例this.myChartLine = echarts.init(document.getElementById("ywlx"));// 指定图表的配置项和数据var option = {tooltip: {trigger: "item",formatter: "{a} <br/>{b} : {c} ({d}%)",},color: ["#31ceee", "#20adeb", "#6be7e8"],legend: {orient: "vertical",x: "right",align: "left",padding: [10, 5, 0, 0],data: this.nameData,formatter: function (name) {var oa = option.series[0].data;var num = oa[0].value + oa[1].value + oa[2].value;for (var i = 0; i < option.series[0].data.length; i++) {if (name == oa[i].name) {return name;}}},},series: [{name: "业务类型占比",type: "pie",radius: "68%",center: ["40%", "50%"],data: this.formData,itemStyle: {normal: {label: {show: true,//                               position:'inside',formatter: "{b}: {d}%",},},labelLine: { show: true },},labelLine: {normal: {length: 1,},},},],};// 使用刚指定的配置项和数据显示图表。this.myChartLine.setOption(option);},},mounted() {//图的大小自适应window.addEventListener("resize", () => {if (this.myChartLine) {this.myChartLine.resize();}});this.getProfessionalCardsCount().then((res) => {this.myEcharts();});},beforeDestroy() {//实例销毁之前调用if (!this.myChartLine) {return;}this.myChartLine.dispose();this.myChartLine = null;},
};
</script><style>
</style>
复制代码

注意点：

将echarts图表的数据和绘制分为两部分各自处理，一目了然，层次分明。
真实图表绘制操作务必放在数据请求赋值之后操作；为了确保执行准确性和可靠性，这里借助了Promise来实现。
组件销毁时要重置（销毁）图表。
为了提高用户体验感，强烈建议为图表容器加上loading状态。

效果图：

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

echarts字变大_在echarts中如何调整lable的字体大小？
波斯汪 series[i]-pie.data[i].label.normal.textStyle.fontSize透過設定 fontSize 就可以調整大小了, 你可以參考官網的範例, 手動修改左側 ...
[echarts] 案例大全 chartlib chartsdev ppchart madeapie MCChart
文章目录 chartlib chartsdev ppchart.com madeapie makeapie.cn MCChart chart.majh.top/ chartlib chartsdev ...
微信小程序使用echarts图表，与延迟加载图表，解决echarts文件过大
微信小程序使用echarts图表,与延迟加载图表,解决echarts文件过大引入echarts组件展示echarts图表数据延迟加载图表如何解决echarts文件过大引入echarts组件 ...
【ECharts系列|04可视化大屏】ECharts可视化经典案例总结
收集整理一些ECharts实现可视化大屏效果的一些经典案例,方便在工作的时候及时的响应客户,及修改展示,根据业务需求在此基础修改即可. 第一篇为Echarts入门文档,如果没有Echarts基础,理解 ...
34【源码】数据可视化：基于 Echarts + Python 动态实时大屏 - 视频平台
效果图展示 1.动态实时更新数据效果图说明: 其中今日抓拍,抓拍总数,预警信息统计,监控点位统计图表做了动态实时更新处理. 2.静态切片效果图一.确定需求方案 1.确定产品上线部署的屏幕L ...
echarts案例大全，echarts的Demo网站有哪些
很多开发人员用到echarts做大屏展示,一般常用的网站是 Apache Echarts,但是这个一个网站的demo不一定满足我们,那么除了Apache Echarts还有哪些我们可以用的echart ...
智慧农业系统 - 可视化大屏（Echarts）管理系统（HTTP(S)协议）物联网平台（MQTT协议）
一.平台功能特点农业数据实时监控,实时视频监控,历史数据分析: 支持电子地图,设备地理位置精确定位: 支持多级组织结构管理,满足集团大客户需求: 可视化大屏展示,数据指标一目了然,彰显企业数字化建设 ...
教你解决Taro微信小程序中使用Echarts体积过大的问题
教你解决Taro微信小程序中使用Echarts体积过大的问题背景为什么选择Echarts? 单包超过2M,如何处理? 以为到此就结束了? 最后背景近期笔者在使用Taro进行微信小程序开发,当引 ...
使用ECharts加载大数据量数据
使用ECharts加载大数据量数据言归正传,本次研究目的是通过echarts加载大数据量数据,测试数据点为24w左右,最终调试结果,加载一条曲线在2.5s左右,同时加载两条曲线为5s以为,8条曲线为 ...

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

一.前言。

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

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

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

最新文章

热门文章