系列文章目录
Vue + Element-UI —— 项目实战（零）（项目概述）
五、项目实战五
Ⅰ、Echarts 的使用
1. 安装与配置
- 安装 Echarts （此处安装的是固定版本 5.1.2）
npm i echarts@5.1.2
- 在 ./home/index.vue 引入 echarts
import Echart from "../../src/components/ECharts.vue";
import * as echarts from 'echarts'
- 这是之前请求成功后 data 中的数据
2. 折线图
- 使用 el-card 用来显示折线图的卡片块
<el-card shadow="hover" style="height: 280px">
<!-- ref打标识，用于获取当前的dom节点 -->
<div style="height: 280px" ref="echarts"></div>
</el-card>
- 在 mounted 钩子中给折线图进行相关数据的配置
mounted() {
getData().then((res) => {
// 将res下的code和data解构 data是数组List中的数据
const {
code, data } = res;
// 正常接口返回的时候
if (code === 20000) {
//获取home.js中定义好的tableData数据
this.tableData = data.tableData;
const order = data.orderData; //获取数据
const xData = order.date; //获取日期
const keyArray = Object.keys(order.data[0]); //接收数组的第一项
// 组装series数据
const series = [];
// 遍历key值
keyArray.forEach((key) => {
// 往series数组中添加元素
series.push({
name: key, //图例
data: order.data.map((item) => item[key]), //对应图例的数据
type: "line", //折线图
});
});
// 组装option
const option = {
xAxis: {
data: xData, //接受x坐标的值
},
yAxis: {
}, //y轴
// 图例(小标志)
legend: {
data: keyArray,
},
series, //组装好的数据
};
// 初始化echarts
const E = echarts.init(this.$refs.echarts);
//绘图
E.setOption(option);
}
}
3. 柱状图
- 使用 el-card 用来显示柱状图的卡片块
<el-card shadow="hover" style="height: 260px">
<!-- ref打标识，用于获取当前的dom节点 -->
<div style="height: 240px" ref="useEcharts"></div>
</el-card>
- 在 if 条件中插入对柱状图的配置
// 柱状图
const userOption = {
legend: {
// 图例文字颜色
textStyle: {
color: "#333",
},
},
grid: {
left: "20%",
},
// 提示框
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category", // 类目轴
data: data.userData.map((item) => item.date),
axisLine: {
lineStyle: {
color: "#17b3a3",
},
},
axisLabel: {
interval: 0,
color: "#333",
},
},
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "#17b3a3",
},
},
},
],
color: ["#2ec7c9", "#b6a2de"],
series: [
{
name: "新增用户",
data: data.userData.map((item) => item.new),
type: "bar", // 柱状图
},
{
name: "活跃用户",
data: data.userData.map((item) => item.active),
type: "bar",
},
],
};
// 初始化Echarts
const U = echarts.init(this.$refs.useEcharts);
// 绘图
U.setOption(userOption);
4. 饼图
- 使用 el-card 用来显示饼图的卡片块
<!-- 饼状图 -->
<el-card shadow="hover" style="height: 260px">
<!-- ref打标识，用于获取当前的dom节点 -->
<div style="height: 240px" ref="videoEcharts"></div>
</el-card>
- 在 if 条件中插入对饼状图的配置
// 饼图
const videoOption = {
tooltip: {
trigger: "item",
},
color: [
"#0f78f4",
"#dd536b",
"#9462e5",
"#a6a6a6",
"#e1bb22",
"#39c362",
"#3ed1cf",
],
series: [
{
data: data.videoData,
type: "pie",
},
],
};
// 初始化Echarts
const V = echarts.init(this.$refs.videoEcharts);
V.setOption(videoOption); //绘图
不积跬步无以至千里 不积小流无以成江海
点个关注不迷路（持续更新中…）