echarts官方的api文档：Apache ECharts
1、引入echarts的方式
从 Apache ECharts 官网下载界面 获取官方源码包后构建。
在 ECharts 的 GitHub 获取。
通过 npm 获取 echarts，
npm install echarts --save，详见“在 webpack 中使用 echarts”通过 jsDelivr 等 CDN 引入
image.png
对应的package.json文件会有对应echarts版本号，表明安装成功了
2、引入echarts的方式
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts
基本的echarts图表的使用流程官方api中全面的展示了，接着就需要去理解每个部分的配置项的作用以及如何去配置
image.png
echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）等等。
option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。
3、开始封装echarts图表
<template>
<Card>
<div id="chartmainbar"></div>
</Card>
</template>
<script>
import { dangerNumStatistics } from "@/api/user";
export default {
name: "chart",
// props: ["complatedData", "overData", "totalData"],
data() {
return {
complatedData: [], //已完成隐患数量
overData: [], // 逾期隐患
totalData: [], //全部隐患
timer: null, //设置定时器
optionbarline: {},// echarts图表的配置项设置
};
},
mounted() {
// 获取隐患数据
this.timer = setTimeout(() => {
this.handleData();
});
this.drawLine();
this.resizeEcharts = () => {
this.$echarts.init(document.getElementById("chartmainbar")).resize();
};
window.addEventListener("resize", this.resizeEcharts);
},
methods: {
handleData() {
dangerNumStatistics().then((res) => {
if (res.code == 0) {
this.complatedData = res.data.map((item) => {
return item.completeNum;
});
this.overData = res.data.map((item) => {
return item.overNum;
});
this.totalData = res.data.map((item) => {
return item.totalNum;
});
this.drawLine();
}
});
},
drawLine() {
//基于准本好的DOM，初始化echarts实例
let chartmainbar = this.$echarts.init(
document.querySelector("#chartmainbar")
);
// 初始化数据
(this.optionbarline = {
title: {
text: "隐患数量统计",
x: "10px",
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: "0px",
// itemGap设置主副标题纵向间隔，单位px，默认为10，
itemGap: 20,
backgroundColor: "#EEE",
// 主标题文本样式设置
textStyle: {
fontSize: 16,
fontWeight: "500",
color: "#000000",
},
},
legend: {
data: ["完成的隐患数量", "逾期的数量", "总数"],
x: "right",
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: "top",
textStyle: {
color: "#666", // 图例文字颜色
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
xAxis: {
type: "category",
boundaryGap: false,
axisLine: {
show: false,
},
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
},
yAxis: {
type: "value",
axisLine: {
show: false,
},
},
series: [
{
name: "完成的隐患数量",
data: this.complatedData,
type: "line",
smooth: true,
symbol: "none",
},
{
name: "逾期的数量",
data: this.overData,
type: "line",
smooth: true,
symbol: "none",
},
{
name: "总数",
data: this.totalData,
type: "line",
smooth: true,
symbol: "none",
},
],
color: ["#10AB89", "#E97B13", "#0d427e"],
}),
//绘制图表
chartmainbar.setOption(this.optionbarline);
},
},
destroyed() {
// 清除定时器
clearTimeout(this.timer);
},
};
</script>
<style scoped>
#myChart > div {
margin: 0px 60px;
}
#chartmainbar {
width: 80% !important;
height: 300px !important;
float: left;
}
/* #chartmainbar > div {
width: 80%;
} */
</style>
图表的效果展示.png
