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. The plugin with the highest usage rate 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 , the most comprehensive and efficient collection of echarts case resource sites on the Internet will be carefully prepared for readers .
2. Instructions and tips for using echarts in the vue project.
- Installation dependencies and precautions and corresponding solutions.
- illustrate:
Directly install the latest echarts dependency package in vue, and an exception may be reported when the init method of echarts is undefined. 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 not defined at this time, it can be solved by importing it in this way when importing in the entry file main.js ---- import * as echarts from 'echarts' .
- Core code and legend:
//常规安装
npm install echarts --save
//如若按官网的上述依赖安装后报init未定义的话,那可能是由于所安装的当前ECharts版本过高导致,请安装以下
版本
npm uninstall echarts --save //卸载当前安装的ECahrts依赖
npm install echarts@4.8.0 --save //重新安装低版ECahrts依赖
- Componentization realizes the independent management of each echarts chart, avoiding 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 sub-component is used to realize 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:
- The data and drawing of the echarts chart are divided into two parts to be processed separately, which is clear at a glance and has a clear hierarchy.
- The actual chart drawing operation must be performed after the data request assignment ; in order to ensure the accuracy and reliability of the execution, Promise is used here to achieve it.
- To reset (destroy) the graph when the component is destroyed.
- In order to improve the user experience, it is strongly recommended to add a loading state to the chart container.
- Renderings:
3. Organize the most complete echarts chart cases and example resource stations on the whole network.
- Resource 1: Share with you and me (recommendation index: ⭐⭐⭐⭐)
- Resource 2: ECharts Official Case (Recommendation Index: ⭐⭐⭐⭐)
- Resource 3: PPChart (recommended index: ⭐⭐⭐⭐⭐ )
- Resource Four: ECHARTS Community (Recommendation Index: ⭐⭐⭐)
- Resource Five: Made A Pie (Recommendation Index: ⭐⭐⭐⭐)
- Resource 6: ECharts Official Case (Recommendation Index: ⭐⭐⭐⭐⭐ )
- Resource Seven: chartsdev.com (recommended index: ⭐⭐)
- Resource 8: Imitation of ECharts (Recommendation Index: ⭐⭐⭐)
- Resource Nine: DataInsight (Recommendation Index: ⭐⭐)
- Resource 10: DataInsight Alibaba Cloud -- the original ECharts official community Make A Pie case source code and chart extraction code: 6l3t (recommended index: ⭐⭐⭐⭐⭐ )
- Resource 11: Baidu Cloud--the original ECharts official community Make A Pie case source code and chart extraction code: qqsy (recommended index: ⭐⭐⭐⭐⭐ )