I.はじめに。
ご存知のように、今日の開発環境では、フロントエンド開発におけるデータ視覚化（大画面）プロジェクトの割合が増加しています。そして、最も使用されているプラグインは間違いなくApacheEchartsです。（ps：以下echartsと呼びます）。この記事では、vueフレームワークを組み合わせて、プロジェクトでechartsをすばやく効率的かつエレガントに使用する方法を説明します。もちろん、この記事の最後に、読者のためにインターネット上で最も包括的で効率的なechartsケースリソースステーションのコレクションを注意深く準備します。
2.vueプロジェクトでのechartsの指示とスキル。
- インストールの依存関係と注意事項、および対応する処理方法。
- 説明：
最新のecharts依存関係パッケージがvueに直接インストールされている場合、実行時にechartsの未定義のinitメソッドの例外が報告されることがあります。この場合、echarts依存関係パッケージの現在のバージョンをアンインストールして、指定された安定バージョン（v4など）を再インストールできます。 .8.0）。現時点でinitが未定義であるとまだ報告されている場合は、この方法でエントリファイルmain.jsにインポートすることで解決できます---- import * as echartsfrom'echarts'。
- コアコードと凡例：
//常规安装
npm install echarts --save
//如若按官网的上述依赖安装后报init未定义的话,那可能是由于所安装的当前ECharts版本过高导致,请安装以下
版本
npm uninstall echarts --save //卸载当前安装的ECahrts依赖
npm install [email protected] --save //重新安装低版ECahrts依赖
复制代码- コンポーネント化により、不要な結合を回避するために、各echartsチャートの独立した管理が実現されます。
- 説明：
メインコンポーネント（親コンポーネント）は、メインコンテンツ領域とechrtsチャートに対応する外部ボックスを格納するためにのみ使用されます。子コンポーネントは、チャート全体をロードし、データとチャートレンダリングを実現するための実コンテナを実装するために使用されます。対応するチャート。
- コアコード：
父组件：
<div class="p-section bg">
<div class="p-title">业务类型占比</div>
<!--以下为子组件-->
<ywlxzbChart></ywlxzbChart>
</div>
复制代码子组件（echarts图表核心）：
<template>
<div
id="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チャートのデータと描画を2つの部分に分割し、それらを別々に処理します。これは一目で明確であり、明確な階層を持っています。
- 真实图表绘制操作务必放在数据请求赋值之后操作；为了确保执行准确性和可靠性，这里借助了Promise来实现。
- 组件销毁时要重置（销毁）图表。
- 为了提高用户体验感，强烈建议为图表容器加上loading状态。
- 效果图：
三. 全网最全的echarts图表案例和实例资源站整理。
- 资源一：分享你我 （推荐指数：⭐⭐⭐⭐）
- 优点：案例资源丰富，有主体分类，可检索，访问速度较快。
- 缺点：未做分页。
- 资源二：ISWWQ.com （推荐指数：⭐⭐⭐⭐）
- 优点：案例资源丰富，可检索，有主体分类。
- 缺点：未做分页，访问速度较慢。
- 资源三：PPChart （推荐指数：⭐⭐⭐⭐⭐）
- 优点：案例资源丰富，有主体分类且分类较细，有分页，可检索，访问速度较快。
- 缺点：暂无。
- 资源四：ECHARTS社区 （推荐指数：⭐⭐⭐）
- 优点：案例资源丰富，有主体分类且分类较细，有分页，可检索，提供登录和社区。
- 缺点：访问速度慢，有广告。
- 资源五：Made A Pie （推荐指数：⭐⭐⭐⭐）
- 优点：案例资源丰富，可检索，有主体分类。
- 缺点：访问速度较慢，未做分页。
- 资源六：ECharts官方案例 （推荐指数：⭐⭐⭐⭐⭐）
- 优点：官方案例，资源稳定，主体分类多，可调节模式，可直接查看对应案例的配置项。
- 缺点：案例资源较少，未做分页，未提供检索。
- 资源七：chartsdev.com （推荐指数：⭐⭐）
- 利点：ケースのリソースが豊富で、主題の分類があります。
- 短所：アクセス速度は平均的で、箱から出して使用することはできず、レイアウトも貧弱で、適用性も劣ります。
- リソース8：イミテーションEチャート （推奨インデックス：⭐⭐⭐）
- 利点：リソースは比較的安定しており、アイコン効果の読み込みが速くなります。
- 短所：ケースリソースが少ない、ページングがない、取得ができないなど。
- リソース9：DataInsight （推奨インデックス：⭐⭐）
- 利点：ケースリソースが豊富です。
- 短所：アクセス速度が遅い、主題の分類がない、検索ができないなど。
- リソース10：AlibabaCloud--元のECharts公式コミュニティMakeA Pieケースのソースコードと図 （推奨インデックス：⭐⭐⭐⭐⭐）
- 利点：元のECharts公式コミュニティMake A Pie Webサイトのすべてのケースソースコードと対応する凡例を提供します。これは、共有リソースコミュニティまたはWebサイトに表示および開発できます。
- 短所：そのままでは実装されていません。
- 説明：抽出コード：6l3t。
- リソース11：BaiduCloud--元のECharts公式コミュニティMakeA Pieケースのソースコードと図 （推奨インデックス：⭐⭐⭐⭐⭐）
- 利点：元のECharts公式コミュニティMake A Pie Webサイトのすべてのケースソースコードと対応する凡例を提供します。これは、共有リソースコミュニティまたはWebサイトに表示および開発できます。
- 短所：そのままでは実装されていません。
- 説明：抽出コード：qqsy。