深圳做网站电话,企信网官网登录入口北京,谷歌seo难吗,广东网站备案电话号码目录
一、安装和引入 ECharts
二、使用 ECharts
2.1 新增 div 盒子
2.2 编写画图函数
2.3 完整代码结构
三、各种小问题
3.1 函数调用问题
3.2 数据格式问题
3.3 坐标轴标签问题
3.4 间隔显示标签 参考博客#xff1a;Vue —— ECharts实现折线图
本文是在上…目录
一、安装和引入 ECharts
二、使用 ECharts
2.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 idmain stylewidth: 100%; height: 520px; background: #fff/div id 是必须要写的到时候 ECharts 会根据它来加载折线图不过里面的名称可以自己定义。 2.2 编写画图函数
我们需要在 methods 中自定义一个 drawLine 函数见后文代码。函数名可以自定义但是 id 参数是一定要给的。这里传的 id 就是刚才那个 div 盒子的 id我的理解是id 是用于让 ECharts 确定该在哪儿绘制折线图的。 2.3 完整代码结构
根据参考博客完整代码如下。注意代码中带有 “// 自定义” 的地方才是我们需要修改的。其他代码都是对折线图样式的设计建议在能够成功展示数据之后修改
templatediv!-- 装ECharts的容器--div idmain stylewidth: 100%; height: 520px; background: #fff/div/div
/templatescript
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但是到时候只显示指定位置上的标签。 我自己踩了很多坑希望这篇博客能够帮到你 ^-^
