I. Introduction.
As we all know, in today's development environment, the proportion of data visualization (large screen) projects in front-end development is increasing. And the most used plugin is undoubtedly Apache Echarts . (ps: hereinafter referred to as echarts). This article combines the vue framework to explain how to use echarts in projects quickly, efficiently and elegantly. Of course, at the end of this article, we will carefully prepare the most comprehensive and efficient collection of echarts case resource stations on the Internet for readers .
2. Instructions and skills of echarts in the vue project.
- Installation dependencies and precautions and corresponding handling methods.
- illustrate:
If the latest echarts dependency package is directly installed in vue, an exception of undefined init method of echarts may be reported at runtime. In this case, you can uninstall the current version of the echarts dependency package and reinstall the specified stable version (eg v4.8.0) . If it is still reported that init is undefined at this time, it can be solved by importing it in the entry file main.js in this way---- import * as echarts from 'echarts' .
- Core code and legend:
//常规安装
npm install echarts --save
//如若按官网的上述依赖安装后报init未定义的话,那可能是由于所安装的当前ECharts版本过高导致,请安装以下
版本
npm uninstall echarts --save //卸载当前安装的ECahrts依赖
npm install [email protected] --save //重新安装低版ECahrts依赖
复制代码- Componentization realizes the independent management of each echarts chart to avoid unnecessary coupling.
- illustrate:
The main component (parent component) is only used to store the main content area and the external box corresponding to the echrts chart; the child component is used to implement the real container to load the entire chart and realize the data and chart rendering of the corresponding chart.
- Core code:
父组件：
<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>
复制代码- important point:
- Divide the data and drawing of the echarts chart into two parts and deal with them separately, which is clear at a glance and has a clear hierarchy.
- 真实图表绘制操作务必放在数据请求赋值之后操作；为了确保执行准确性和可靠性，这里借助了Promise来实现。
- 组件销毁时要重置（销毁）图表。
- 为了提高用户体验感，强烈建议为图表容器加上loading状态。
- 效果图：
三. 全网最全的echarts图表案例和实例资源站整理。
- 资源一：分享你我 （推荐指数：⭐⭐⭐⭐）
- 优点：案例资源丰富，有主体分类，可检索，访问速度较快。
- 缺点：未做分页。
- 资源二：ISWWQ.com （推荐指数：⭐⭐⭐⭐）
- 优点：案例资源丰富，可检索，有主体分类。
- 缺点：未做分页，访问速度较慢。
- 资源三：PPChart （推荐指数：⭐⭐⭐⭐⭐）
- 优点：案例资源丰富，有主体分类且分类较细，有分页，可检索，访问速度较快。
- 缺点：暂无。
- 资源四：ECHARTS社区 （推荐指数：⭐⭐⭐）
- 优点：案例资源丰富，有主体分类且分类较细，有分页，可检索，提供登录和社区。
- 缺点：访问速度慢，有广告。
- 资源五：Made A Pie （推荐指数：⭐⭐⭐⭐）
- 优点：案例资源丰富，可检索，有主体分类。
- 缺点：访问速度较慢，未做分页。
- 资源六：ECharts官方案例 （推荐指数：⭐⭐⭐⭐⭐）
- 优点：官方案例，资源稳定，主体分类多，可调节模式，可直接查看对应案例的配置项。
- 缺点：案例资源较少，未做分页，未提供检索。
- 资源七：chartsdev.com （推荐指数：⭐⭐）
- Advantages: Case resources are abundant, with subject classification.
- Disadvantages: The access speed is average, it cannot be used out of the box, the layout is poor, and the applicability is poor.
- Resource 8: Imitation ECharts (Recommendation index: ⭐⭐⭐)
- Advantages: The resources are relatively stable, and the icon effect loads faster.
- Disadvantages: fewer case resources, no paging, no retrieval, etc.
- Resource 9: DataInsight (Recommendation index: ⭐⭐)
- Advantages: Case resources are abundant.
- Disadvantages: slow access speed, no subject classification, no retrieval, etc.
- Resource 10: Alibaba Cloud--the original ECharts official community Make A Pie case source code and diagram (recommended index: ⭐⭐⭐⭐⭐ )
- Advantages: Provide all case source code and corresponding legends of the original ECharts official community Make A Pie website, which can be consulted and developed into a shared resource community or website.
- Cons: Not implemented out of the box.
- Description: Extraction code: 6l3t .
- Resource 11: Baidu Cloud--The original ECharts official community Make A Pie case source code and diagram (recommended index: ⭐⭐⭐⭐⭐ )
- Advantages: Provide all case source code and corresponding legends of the original ECharts official community Make A Pie website, which can be consulted and developed into a shared resource community or website.
- Cons: Not implemented out of the box.
- Description: Extraction code: qqsy .