echarts formatter_手把手教你玩转echarts(二)折线图
茫茫人海中与你相遇
相信未来的你不会很差
作者:婷酱Yaaa
来源:https://juejin.im/post/5f0292d35188252e5a5dbed0
前言
哈喽,everybody,我又来了。话不多说,这次给大家带来的是echarts
系列之折线图,满满的干货。一个小实例让你对echarts折线图不再陌生!
剖析你的心
啊呸,错了,是剖析设计图。心有啥好剖析的?
简简单单的设计图,那让我们来分析一下折线图的细节在哪里:
- 图例。今日、昨日、历史最高。位置在左侧。图标颜色为渐变色,高度大致2px。
- Y坐标轴。字体大致为10px,紧贴坐标轴线。
- X坐标轴最小值不显示。
- 折线图为区域显示,并显示渐变色从左至右。
- 折现同样为渐变色,从左至右。
- 分割线为虚线且有颜色。
绘制图形
基础的图形生成我就不再复述了,不会的同学可以看我的系列第一篇手把手教你玩转Echarts(一),这里我就继续讲配置了。
图例
legend: { right: "3%", top: "5%", textStyle: { color: colors[3], fontSize: 8 }, itemWidth: 15, // 图例标记的图形宽度 itemHeight: 3, // 图例标记的图形高度 icon: "rect", // 图例形状为方形 data: ["今日", "昨日", "历史最高"] // 图例的数据数组},
Y坐标轴
yAxis: [{ type: "value", axisLine: { // 坐标轴线的配置 show: false, lineStyle: { // 轴线样式 color: colors[3] } }, splitLine: { // y轴分割线配置 show: true, lineStyle: { // 分割线样式 type: 'dashed', // 虚线 color: '#1e47697d' } }, axisTick: { // 轴线上的刻度线配置 show: false }, axisLabel: { fontSize: 8, formatter: v => { return v >= 1000 ? v / 1000 + "k" : v; } }}],
微说下axisLabel.formatter,其实这里很灵活,支持字符串模板和回调函数两种形式,可以是string
或者Function
.其实是对刻度值的一个格式化。官方例子在这里
X坐标轴
xAxis: [ { type: "category", boundaryGap: false, axisLine: { lineStyle: { color: colors[3] } }, axisLabel: { // 坐标轴刻度设置 fontSize: 8, margin: 4, // 距离坐标轴的距离 }, axisTick: { // 是否显示刻度 show: false }, data: [] // 数据数组,可以异步获取赋值 }],
渐变色
1.先引入echarts
import echarts from "echarts";
2.定义色彩数组,也就是取色盘。
const colors = [ new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 四个位置依次为左、下、右、上, 为逆时针。所以这里为横向渐变 { offset: 0, color: "#504DFF" }, { offset: 1, color: "#91E6FF" } ]), "#A2C6E0", "#1e47697d"];
3.配置series
// ... series: [ { name: "今日", // 系列名称,用于tooltip的显示, 与legend的data是相对应的 type: "line", // 类型,是折线还是柱子还是其他的 // stack: "总量", // 是否显示图形堆叠 color: colors[0], // 这里是指对应折线`line`的颜色 areaStyle: { opacity: ".3", color: colors[0] // 一个颜色数组中的某个值 }, symbol: "none", // 标记的图形 smooth: false, // 是否平滑曲线显示 data: [120, 132, 101, 134, 90, 230, 210] // 对应x轴上的value值 }, // ... ]
完整配置
export default { inject: ['queryD'], data() { return { option: {...option}, timer: null }; }, mounted() { this.initChart(); this.getVolumn(); window.addEventListener("resize", this.initChart); this.timer = setInterval(this.getVolumn, this.$store.state.demo.time) }, methods: { initChart() { let myChart = echarts.init(document.getElementById("hourTrend")); myChart.setOption(this.option); myChart.resize(); }, async getVolumn() { try { const res = await this.$axios.post("/api/weightHourInfo", JSON.parse(this.queryD)); // 这段代码如果有可优化的地方,请告知。反正我也不会承认自己菜的! ? if (res.data && res.data.data) { const arr = res.data.data; this.option.xAxis[0].data = []; this.option.series[0].data = []; this.option.series[1].data = []; this.option.series[2].data = []; arr.forEach(el => { this.option.xAxis[0].data.push(el.hour); this.option.series[0].data.push(el.chargeableWeight); this.option.series[1].data.push(el.chargeableWeightYest); this.option.series[2].data.push(el.chargeableWeight9); }); this.initChart(); } } finally { } } }, destroyed() { window.removeEventListener("resize", this.initChart); clearInterval(this.timer) }};
小结
这里不清楚大家是否有仔细看里面的配置,其实都有很多的相似点,比如:
x轴、y轴都可以设置name
、axisLine
、axisLabel
、axisTick
、color
等等,这些都是有规律可循的,然后根据不同的类型在series设置不同的个性化配置。
写在最后
文笔垃圾,也没有觉得自己很厉害。都是基础的文章,写给自己的,也给一些么有接触过的同学一点方向。当然,还是那句废话“如果对你有用的话,记得给小仙女点个赞哟”♥
我们在虚拟的空间与你相遇,期待可以碰撞出不一样的火花
公众号ID:前端大联盟扫码关注最新动态
echarts formatter_手把手教你玩转echarts(二)折线图相关推荐
- python画折线图-手把手教你Python yLab的绘制折线图的画法
Python的可视化工具有很多,数不胜数,各有优劣.本文就对其中的pylab进行介绍.之所以介绍这一款,是因为它和Matlab的强烈相似度,如果你使用过Matlab,那么相信pylab你也会很快上手. ...
- echarts 折线图 设置y轴最小刻度_手把手教你玩转echarts(二)折线图
茫茫人海中与你相遇 相信未来的你不会很差 作者:婷酱Yaaa 来源:https://juejin.im/post/5f0292d35188252e5a5dbed0 前言 哈喽,everybody,我又 ...
- graphpad 折线图横坐标比例_你的paper你的图 | 手把手教你GraphPad Prism绘制XY折线图...
图文撰写 | 小蔡老师Figure图微信公众号 科研论文中,图都标记为Figure或Fig,本公众号的主旨是为大家讲解科研过程中的作图步骤,以及相关的问题!同时,我们还将以最新发表.或各学科Top期刊 ...
- python画折线图详解-手把手教你Python yLab的绘制折线图的画法
Python的可视化工具有很多,数不胜数,各有优劣.本文就对其中的pylab进行介绍.之所以介绍这一款,是因为它和Matlab的强烈相似度,如果你使用过Matlab,那么相信pylab你也会很快上手. ...
- 手把手教你玩转SOCKET模型之重叠I/O篇(下)
http://blog.csdn.net/PiggyXP/archive/2004/09/23/114908.aspx 四. 实现重叠模型的步骤 作了这么多的准备工作,费了这么多的笔墨,我们终 ...
- 手把手教你玩转SOCKET模型:完成例程(Completion Routine)篇
本文假设你已经对重叠I/O的机制已有了解,否则请先参考本系列的前一篇<手把手教你玩转SOCKET模型之重叠I/O篇>: 目录: 1.完成例程的优点 2.完成例程的基本原理 3.关于完成例程 ...
- 手把手教你玩转SOCKET模型:完成端口(Completion Port)详解
这篇文档我非常详细并且图文并茂的介绍了关于网络编程模型中完成端口的方方面面的信息,从API的用法到使用的步骤,从完成端口的实现机理到实际使用的注意事项,都有所涉及,并且为了让朋友们更直观的体会完成端口 ...
- 手把手教你玩转网络编程模型之完成例程(Completion Routine)
前 言 记得写这个系列的上一篇文章的时候已经是四年前了,准确的说是四年半以前了,翻开我尘封已久的IO模型里面的"完成例程"的实现方式及示例代码. 本文凝聚着笔者心血,如要转载,请 ...
- 手把手教你玩转ARP包(一)
原文地址:http://blog.csdn.net/piggyxp/article/details/19606 前 言 首先要感谢网络安全资深专家卢湖川博士以及VC网络版的limin朋友提供的资料 ...
最新文章
- C++longest common string最长公共字符串的实现(附完整源码)
- 一个致命的 Redis 命令,导致公司损失 400 万
- 机器学习数据集的获取和测试集的构建方法
- 报错,o.h.engine.jdbc.spi.SqlExceptionHelper : Data truncation: Data too long for column ‘verify_msg‘
- asp.net signalR 专题—— 第一篇 你需要好好掌握的实时通讯利器
- Linux常用文档操作命令--2
- IPC Hi3518EV300开发板——1. Linux系统移植
- 2022华为杯研究生数学建模竞赛选题建议
- JavaScript世界各地时间转换为北京时间
- 关于用LM2596做的DC-DC数控电源
- web前端零基础html5 +css3基础教程
- 软件开发程序员需要掌握的技术
- android手机设置查看电池耗电,安卓查看电池损耗代码【搞定指南】
- 强化学习-Q-Learning算法
- 记参加1024程序员节北京峰会和开发者之夜活动
- linux虚拟光驱挂载教程,VMWare 挂载虚拟光驱及制作floppy linux
- 重新学习JSP之五——投票系统
- 【IAP】新建虚拟产品、新建测试帐号、获取产品列表、向自己的服务器生成订单、发送购买请求、服务端数据安全
- 用接口实现计算每个立方体的体积并输出结果的程序(接口及多态性及匿名方法的结合使用)
- 矩阵之间欧式距离的快捷计算方法
热门文章
- MATLAB实战系列(十二)-如何用人工鱼群算法解决带时间窗车辆路径(CVRP)问题(附MATLAB代码)
- tableau实战系列(六)-小面积图表如何完整显示标签
- 支持向量机原理(二)
- Myeclipse10下搭建SSH框架(图解)Struts2.1+Spring3.0+Hibernate3.3
- mysql中OPTIMIZE TABLE的作用
- Matplotlib实例教程(三)折线图 plt.plot()
- Python入门100题 | 第020题
- 聚类算法中各种距离的计算与python的具体实现代码
- 【机器学习算法-python实现】svm支持向量机(2)—简化版SMO算法
- android tesseract-ocr实例教程(包含中文识别)(附源码)