I. 서론.
우리 모두가 알고 있듯이 오늘날의 개발 환경에서는 프론트엔드 개발에서 데이터 시각화(대형 화면) 프로젝트의 비율이 증가하고 있습니다. 그리고 가장 많이 사용되는 플러그인은 의심할 여지 없이 Apache Echarts 입니다. (ps: 이하 echarts라고 칭함). 이 기사는 vue 프레임워크를 결합하여 프로젝트에서 echart를 빠르고 효율적이며 우아하게 사용하는 방법을 설명합니다. 물론 이 기사의 끝에서 우리는 독자를 위해 인터넷에서 가장 포괄적이고 효율적인 전자 차트 사례 리소스 스테이션 모음 을 신중하게 준비할 것 입니다.
2. vue 프로젝트의 echarts 지침 및 기술.
- 설치 종속성 및 주의 사항 및 해당 취급 방법.
- 예시:
vue에 최신 echarts 종속성 패키지를 직접 설치한 경우 런타임 시 echarts의 정의되지 않은 init 메소드 예외가 보고될 수 있으며 이 경우 echarts 종속성 패키지의 현재 버전을 제거하고 지정된 안정 버전(예: v4 .8.0) . 이 시점에서 여전히 init가 정의되지 않았다고 보고되면, 다음과 같은 방법으로 main.js 항목 파일에서 init를 가져와 해결할 수 있습니다. ---- import * as echarts from 'echarts' .
- 핵심 코드 및 범례:
//常规安装
npm install echarts --save
//如若按官网的上述依赖安装后报init未定义的话,那可能是由于所安装的当前ECharts版本过高导致,请安装以下
版本
npm uninstall echarts --save //卸载当前安装的ECahrts依赖
npm install [email protected] --save //重新安装低版ECahrts依赖
复制代码- 컴포넌트화는 불필요한 결합을 피하기 위해 각 차트 차트의 독립적인 관리를 구현합니다.
- 예시:
메인 컴포넌트(부모 컴포넌트)는 메인 컨텐츠 영역과 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图表案例和实例资源站整理。
- 资源一：分享你我 （推荐指数：⭐⭐⭐⭐）
- 优点：案例资源丰富，有主体分类，可检索，访问速度较快。
- 缺点：未做分页。
- 资源二：ISWWQ.com （推荐指数：⭐⭐⭐⭐）
- 优点：案例资源丰富，可检索，有主体分类。
- 缺点：未做分页，访问速度较慢。
- 资源三：PPChart （推荐指数：⭐⭐⭐⭐⭐）
- 优点：案例资源丰富，有主体分类且分类较细，有分页，可检索，访问速度较快。
- 缺点：暂无。
- 资源四：ECHARTS社区 （推荐指数：⭐⭐⭐）
- 优点：案例资源丰富，有主体分类且分类较细，有分页，可检索，提供登录和社区。
- 缺点：访问速度慢，有广告。
- 资源五：Made A Pie （推荐指数：⭐⭐⭐⭐）
- 优点：案例资源丰富，可检索，有主体分类。
- 缺点：访问速度较慢，未做分页。
- 资源六：ECharts官方案例 （推荐指数：⭐⭐⭐⭐⭐）
- 优点：官方案例，资源稳定，主体分类多，可调节模式，可直接查看对应案例的配置项。
- 缺点：案例资源较少，未做分页，未提供检索。
- 资源七：chartsdev.com （推荐指数：⭐⭐）
- 장점: 케이스 리소스가 풍부하고 주제 분류가 있습니다.
- 단점: 접근 속도가 평균이고, 바로 사용할 수 없고, 레이아웃이 열악하고, 적용성이 나쁩니다.
- 리소스 8: 모조 전자 차트(권장 지수: ⭐⭐⭐)
- 장점: 리소스가 비교적 안정적이고 아이콘 효과가 더 빨리 로드됩니다.
- 단점: 케이스 자원이 적고, 페이징이 없고, 검색이 없습니다.
- 리소스 9: DataInsight (권장 지수: ⭐⭐)
- 장점: 케이스 자원이 풍부합니다.
- 단점: 접근 속도가 느리고, 주제 분류가 없고, 검색이 안 되는 등
- 리소스 10: Alibaba Cloud--원래 ECharts 공식 커뮤니티 Make A Pie 사례 소스 코드 및 다이어그램 (권장 색인: ⭐⭐⭐⭐⭐ )
- 장점: 원본 ECharts 공식 커뮤니티 Make A Pie 웹사이트의 모든 사례 소스 코드 및 해당 범례를 제공하여 공유 리소스 커뮤니티 또는 웹사이트로 보고 개발할 수 있습니다.
- 단점: 즉시 구현되지 않습니다.
- 설명: 추출 코드: 6l3t .
- 리소스 11: Baidu Cloud--원래 ECharts 공식 커뮤니티 Make A Pie 케이스 소스 코드 및 다이어그램 (권장 색인: ⭐⭐⭐⭐⭐ )
- 장점: 원본 ECharts 공식 커뮤니티 Make A Pie 웹사이트의 모든 사례 소스 코드 및 해당 범례를 제공하여 공유 리소스 커뮤니티 또는 웹사이트로 보고 개발할 수 있습니다.
- 단점: 즉시 구현되지 않습니다.
- 설명: 추출 코드: qqsy .