![cover](https://img-blog.csdnimg.cn/direct/4b91b12833454175a797367caee9bfcf.png)
Vue | 使用 ECharts 绘制折线图
一、安装和引入 ECharts二、使用 ECharts2.1新增 div 盒子2.2编写画图函数2.3完整代码结构三、各种小问题3.1函数调用问题3.2数据格式问题3.3坐标轴标签问题3.4间隔显示标签
目录
参考博客:Vue —— ECharts实现折线图
本文是在上述博客的基础上,补充介绍了我们可能会遇到的问题。
最终实现效果如下:
一、安装和引入 ECharts
在项目的根目录下,打开终端输入:
npm install echarts -S
在需要使用 ECharts 的 Vue 页面的 script 部分引入:
<script>
import * as echarts from 'echarts'
</script>
二、使用 ECharts
2.1 新增 div 盒子
在 Vue 页面的 template 部分新增一个 div 盒子,它是用来装折线图的:
<div id="main" style="width: 100%; height: 520px; background: #fff"></div>
id 是必须要写的,到时候 ECharts 会根据它来加载折线图,不过里面的名称可以自己定义。
2.2 编写画图函数
我们需要在 methods 中自定义一个 drawLine 函数(见后文代码)。函数名可以自定义,但是 id 参数是一定要给的。这里传的 id 就是刚才那个 div 盒子的 id,我的理解是,id 是用于让 ECharts 确定该在哪儿绘制折线图的。
2.3 完整代码结构
根据参考博客,完整代码如下。注意,代码中带有 “// 自定义” 的地方才是我们需要修改的。其他代码都是对折线图样式的设计,建议在能够成功展示数据之后修改:
<template>
<div>
<!-- 装ECharts的容器-->
<div id="main" style="width: 100%; height: 520px; background: #fff"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
charts: "",
opinionData: ["155", "400", "900", "800", "300", "900", "270"], // 数据
};
},
methods: {
drawLine(id) {
// 初始化折线图
this.charts = echarts.init(document.getElementById(id));
// 设置折线图数据和样式
this.charts.setOption({
title: {
left: "3%",
top: "5%",
text: "最近一周订单数量", // 自定义
},
tooltip: {
trigger: "axis",
},
legend: {
align: "right",
left: "3%",
top: "15%",
data: ["近一周"], // 自定义
},
grid: {
top: "30%",
left: "5%",
right: "5%",
bottom: "5%",
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
// 自定义:设置x轴刻度
xAxis: {
type: "category",
boundaryGap: true,
axisTick: {
alignWithLabel: true,
},
// 自定义标签
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
// 自定义:设置y轴刻度
yAxis: {
type: "value",
boundaryGap: true,
splitNumber: 4,
interval: 250,
},
// 设置数据
series: [
{
name: "近一周", // 自定义
type: "line",
stack: "总量", // 自定义
data: this.opinionData, // 自定义
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgb(255,200,213)",
},
{
offset: 1,
color: "#ffffff",
},
],
global: false,
},
},
itemStyle: {
color: "rgb(255,96,64)",
lineStyle: {
color: "rgb(255,96,64)",
},
},
},
],
});
},
},
};
</script>
三、各种小问题
3.1 函数调用问题
在我的 Vue 页面中,我是要先使用一个函数去获得折线图的数据,而不是像参考博客中那样写死的数据。因此,我绘制折线图的 drawLine 函数,是在获取数据的 fetchData 函数中调用的:
fetchData() {
fetchDataAPI.fetchData().then((response) => {
this.opinionData = response.data;
// 画图
setTimeout(() => {
this.drawLine("main");
}, 500);
});
},
注意:里面的函数名、API 名和 API 函数名请换成自己的!
使用 setTimeout 延时函数是为了解决 Initialize failed: invalid dom 问题,点击链接可以查看问题详情。
3.2 数据格式问题
以下两种格式都满足 ECharts 的要求:
// 格式一
opinionData: ["100", "200", "300"]
// 格式二
opinionData: [[0, "100"], [1, "200"], [2, "300"]]
我的理解是:针对格式一,在数组中只存放数据的 y 轴坐标,默认各个数据的 x 轴坐标等于数据的排列顺序;针对格式二,在二维数组中存放数据的 x 轴和 y 轴坐标。其中,0、1 和 2 分别是三个数据的 x 轴坐标,且应为 int 型。个人建议,如果没有顺序要求,采用格式一比较方便。
后文会提到,由于 x 轴的 type 是 category,因此所谓的 x 轴坐标,其实就是数据排列的顺序。
据我目前所知,到时候 x 轴上有几个刻度和折线上有几个点完全是由数据的个数决定的。所谓的设置 x 轴,其实设置的是 x 轴的文字标签。注意,数据和文字标签之间没有任何的固有联系!!!
3.3 坐标轴标签问题
设置坐标轴标签。可以看见,x 轴的 type 是 “category”,y 轴的 type 是 “value”。个人理解,它们分别是:文字标签和数值标签。文字标签和数据之间没有对应关系,数值标签和数据的 y 轴坐标是自动对齐的。参考博客的代码如下:
// 自定义:设置x轴刻度
xAxis: {
type: "category",
boundaryGap: true,
axisTick: {
alignWithLabel: true,
},
// 自定义标签
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
// 自定义:设置y轴刻度
yAxis: {
type: "value",
boundaryGap: true,
splitNumber: 4,
interval: 250,
},
我觉得 y 轴刻度比较容易设置(比如:设置它的最大、最小值和值之间的间隔),问问 ChatGPT 怎么搞就行了。难点在于,我有 24 个数据,但是我希望 x 轴刻度的标签是每两个才显示一个,也就是如何只为部分刻度设置标签。
注意:自定义标签也可以传变量,以实现动态更新的标签。
3.4 间隔显示标签
研究了很久,解决方法就是设置 axisLabel 属性,代码如下:
xAxis: {
type: "category",
boundaryGap: true,
axisTick: {
alignWithLabel: true,
},
// 自定义标签
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
// 间隔显示标签
axisLabel: {
formatter: function (value, index) {
return index % 2 == 0 ? value : "";
},
},
},
里面的 formatter 函数处理的就是 data 自定义标签。index 指明当前标签的序号,value 是当前标签的内容。这里我是每两个显示一个,因此判断条件为 index % 2 == 0 是否成立。若成立则显示标签内容 value;反之则不显示,即 "" 空字符串。
总结:一开始还是为每个刻度都设置标签,即 24 个(我上面代码就没写了哈,还是用的参考博客的 data),但是到时候只显示指定位置上的标签。
我自己踩了很多坑,希望这篇博客能够帮到你 ^-^
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)