一.前言。
众所周知，在现今的开发大环境下，数据可视化（大屏化）项目在前端开发中的比重越来越大。而其中使用率最高的插件无疑就是 Apache Echarts。（ps: 以下简称为echarts）。本文就结合vue框架来讲解如何快速、高效、优雅地在项目中使用echarts。当然，本文篇幅最后也会为读者精心准备目前网络上最全面、最高效的echarts案例资源站集合。
二.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>
<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图表的 数据 和 绘制 分为两部分各自处理，一目了然，层次分明。
- 真实图表绘制操作务必放在数据请求赋值之后操作；为了确保执行准确性和可靠性，这里借助了Promise来实现。
- 组件销毁时要重置（销毁）图表。
- 为了提高用户体验感，强烈建议为图表容器加上loading状态。
- 效果图：
三.全网最全的echarts图表案例和实例资源站整理。
- 资源一：分享你我（推荐指数：⭐⭐⭐⭐）
- 资源二：ECharts官方案例（推荐指数：⭐⭐⭐⭐）
- 资源三：PPChart（推荐指数：⭐⭐⭐⭐⭐）
- 资源四：ECHARTS社区（推荐指数：⭐⭐⭐）
- 资源五：Made A Pie（推荐指数：⭐⭐⭐⭐）
- 资源六：ECharts官方案例（推荐指数：⭐⭐⭐⭐⭐）
- 资源七：chartsdev.com（推荐指数：⭐⭐）
- 资源八： 仿ECharts（推荐指数：⭐⭐⭐）
- 资源九： DataInsight （推荐指数：⭐⭐）
- 资源十：DataInsight阿里云--原ECharts官方社区Make A Pie案例源码及图表图 提取码：6l3t （推荐指数：⭐⭐⭐⭐⭐）
- 资源十一： 百度云--原ECharts官方社区Make A Pie案例源码及图表图 提取码：qqsy（推荐指数：⭐⭐⭐⭐⭐）