项目演示
https://www.bilibili.com/video/BV1dY411T71E?t=1.2
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); //绘图
不积跬步无以至千里 不积小流无以成江海
