echarts官方的api文檔：Apache ECharts
1、引入echarts的方式
從 Apache ECharts 官網(wǎng)下載界面 獲取官方源碼包后構(gòu)建。
在 ECharts 的 GitHub 獲取。
通過 npm 獲取 echarts，
npm install echarts --save新翎，詳見“在 webpack 中使用 echarts”通過 jsDelivr 等 CDN 引入
image.png
對應(yīng)的package.json文件會有對應(yīng)echarts版本號，表明安裝成功了
2、引入echarts的方式
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts
基本的echarts圖表的使用流程官方api中全面的展示了额嘿，接著就需要去理解每個部分的配置項的作用以及如何去配置
image.png
echarts 中各種內(nèi)容，被抽象為“組件”劣挫。例如册养，echarts 中至少有這些組件：xAxis（直角坐標系 X 軸）、yAxis（直角坐標系 Y 軸）压固、grid（直角坐標系底板）球拦、angleAxis（極坐標系角度軸）、radiusAxis（極坐標系半徑軸）帐我、polar（極坐標系底板）坎炼、geo（地理坐標系）、dataZoom（數(shù)據(jù)區(qū)縮放組件）拦键、visualMap（視覺映射組件）谣光、tooltip（提示框組件）、toolbox（工具欄組件）芬为、series（系列）等等萄金。
option 來描述其對圖表的各種需求，包括：有什么數(shù)據(jù)碳柱、要畫什么圖表捡絮、圖表長什么樣子、含有什么組件莲镣、組件能操作什么事情等等福稳。簡而言之，option 表述了：數(shù)據(jù)瑞侮、數(shù)據(jù)如何映射成圖形的圆、交互行為。
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: [], //已完成隱患數(shù)量
overData: [], // 逾期隱患
totalData: [], //全部隱患
timer: null, //設(shè)置定時器
optionbarline: {},// echarts圖表的配置項設(shè)置
};
},
mounted() {
// 獲取隱患數(shù)據(jù)
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")
);
// 初始化數(shù)據(jù)
(this.optionbarline = {
title: {
text: "隱患數(shù)量統(tǒng)計",
x: "10px",
// y 設(shè)置垂直安放位置，默認全圖頂端钮糖，可選值：'top' | 'bottom' | 'center' | {number}（y坐標梅掠，單位px）
y: "0px",
// itemGap設(shè)置主副標題縱向間隔酌住，單位px，默認為10阎抒，
itemGap: 20,
backgroundColor: "#EEE",
// 主標題文本樣式設(shè)置
textStyle: {
fontSize: 16,
fontWeight: "500",
color: "#000000",
},
},
legend: {
data: ["完成的隱患數(shù)量", "逾期的數(shù)量", "總數(shù)"],
x: "right",
// y 設(shè)置垂直安放位置酪我，默認全圖頂端，可選值：'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: "完成的隱患數(shù)量",
data: this.complatedData,
type: "line",
smooth: true,
symbol: "none",
},
{
name: "逾期的數(shù)量",
data: this.overData,
type: "line",
smooth: true,
symbol: "none",
},
{
name: "總數(shù)",
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
