Echarts 快速入门折线图
基础折线图
简单折线图
如果我们想建立一个横坐标是类目型(category)、纵坐标是数值型(value)的折线图,我们可以使用这样的方式:
option = {xAxis: {type: "category",data: ["a", "b", "c"],},yAxis: {type: "value",},series: [{type: "line",data: [1, 2, 3],},],
};
只需要把类型设置为line
即可
这里
xAxis
和yAxis
的type
属性都可以隐去不写。因为坐标轴的默认类型是数值型,而xAxis
指定了类目型的data
,所以ECharts
也能识别出这是类目型的坐标轴。为了让大家更容易理解,我们特意写了
type
。在实际的应用中,如果是'value'
类型,也可以省略不写。
笛卡尔坐标系折线图
如果我们希望折线图在横坐标和纵坐标上都是连续的,即在笛卡尔坐标系中,只要把 series
的 data
每个数据用一个包含两个元素的数组表示就行了。
option = {xAxis: {},yAxis: {},series: [{data: [[1, 2],[2, 1],[3, 4],],type: "line",},],
};
折线图样式设置
折线图样式
折线图中折线的样式可以通过 lineStyle
设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等,具体的可以参考配置项手册 series.lineStyle
了解。
这里,我们以设置颜色(color)、线宽(width)和折线类型(type)为例说明。
option = {xAxis: {data: ["a", "b", "c", "d", "e", "f"],},yAxis: {},series: {data: [1, 2, 3, 4, 5, 6],type: "line",lineStyle: {normal: {color: "red",width: 3,type: "dashed",},},},
};
数据点样式
数据点的样式可以通过 series.itemStyle
指定填充颜色(color)、描边颜色(borderColor)、描边宽度(borderWidth)、描边类型(borderType)、阴影(shadowColor)、不透明度(opacity)等。
案例:
option = {xAxis: {data: ["a", "b", "c", "d", "e", "f"],},yAxis: {},series: {data: [1, 2, 3, 4, 5, 6],type: "line",lineStyle: {normal: {opacity: 0,},},},
};
在数据点处显示数值
在系列中,这数据点的标签通过 series.label
属性指定。
如果将 label
下的 show
指定为true
,则表示该数值默认时就显示;
如果为 false
,而 series.emphasis.label.show
为 true
,则表示只有在鼠标移动到该数据时,才显示数值。
option = {xAxis: {data: ["a", "b", "c", "d", "e", "f"],},yAxis: {},series: {data: [1, 2, 3, 4, 5, 6],type: "line",label: {show: false,position: "top",textStyle: {fontSize: 20,},},emphasis: {label: {show: true,},},},
};
空数据
在一个系列中,可能一个横坐标对应的取值是“空”的,将其设为 0 有时并不能满足我们的期望–空数据不应被其左右的数据连接。
在 ECharts 中,我们使用字符串 '-'
表示空数据,这对其他系列的数据也是适用的。
option = {xAxis: {data: ["a", "b", "c", "d", "e", "f"],},yAxis: {},series: {data: [1, 2, '-', 4, 5, 6],type: "line",},
};
堆叠折线图
与堆叠柱状图类似,堆叠折线图也是用系列的 stack
设置哪些系列堆叠在一起。
option = {xAxis: {data: ["a", "b", "c", "d", "e", "f"],},yAxis: {},series: [{data: [1, 2, 3, 4, 5, 10],type: "line",stack: "x",},{data: [6, 5, 4, 3, 2, 1],type: "line",stack: "x",},],
};
但是不同的是,如果不加说明的话,我们很难判断出这是一个堆叠折线图,还是一个普通的折线图。
所以,对于堆叠折线图而言,一般建议使用区域填充色以表明堆叠的情况。
option = {xAxis: {data: ["a", "b", "c", "d", "e", "f"],},yAxis: {},series: [{data: [1, 2, 3, 4, 5, 10],type: "line",stack: "x",areaStyle: {},},{data: [6, 5, 4, 3, 2, 1],type: "line",stack: "x",areaStyle: {},},],
};
区域面积图
当然你也可以不堆叠,这样更适合对比
option = {xAxis: {data: ["a", "b", "c", "d", "e", "f"],},yAxis: {},series: [{data: [1, 2, 3, 4, 5, 10],type: "line",stack: "x",},{data: [6, 5, 4, 3, 2, 1],type: "line",stack: "y",},],
};
区域面积图将折线到坐标轴的空间设置背景色,用区域面积表达数据。
相比普通的折线图,区域面积图的视觉效果更加饱满丰富,在系列不多的场景下尤其适用。
option = {xAxis: {data: ["a", "b", "c", "d", "e", "f"],},yAxis: {},series: [{data: [1, 2, 3, 4, 5, 10],type: "line",areaStyle: {},},{data: [6, 5, 4, 3, 2, 1],type: "line",areaStyle: {opacity: 0.5,},},],
};
通过 areaStyle
设置折线图的填充区域样式,将其设为为 {}
表示使用默认样式,即使用系列的颜色以半透明的方式填充区域。
如果想指定特定的样式,可以通过设置 areaStyle
下的配置项覆盖,如第二个系列将填充区域的颜色设为不透明度为 0.5 的黄色。
除了opacity
之外还可以通过调整color
中的```rgba``颜色的透明度实现
平滑曲线图
平滑曲线图也是折线图的一种变形,这种更柔和的样式也是一种不错的视觉选择。使用时,只需要将折线图系列的 smooth
属性设置为 true
即可。
option = {xAxis: {data: ["a", "b", "c", "d", "e", "f"],},yAxis: {},series: [{data: [1, 2, 3, 4, 5, 10],type: "line",smooth: true,},],
};
阶梯线图
阶梯线图又称方波图,它使用水平和垂直的线来连接两个数据点,而普通折线图则直接将两个点连接起来。
阶梯线图能够很好地表达数据的突变。
在 ECharts 中,系列的 step
属性用来表征阶梯线图的连接类型,它共有三种取值:'start'
、'middle'
和 'end'
,分别表示在当前点,当前点与下个点的中间点,下个点拐弯。
option = {xAxis: {data: ["a", "b", "c", "d", "e", "f"],},yAxis: {},series: [{data: [1, 2, 3, 4, 5, 10],type: "line",step: "start",smooth: true,},{data: [1, 2, 3, 4, 5, 10],type: "line",step: "middle",smooth: true,},{data: [1, 2, 3, 4, 5, 10],type: "line",step: "end",smooth: true,},],
};
请注意这个例子中不同的
step
取值对应的数据点和连线的区别。
Echarts 快速入门折线图相关推荐
- [VUE2/VUE3]基于echarts的动态折线图组件
[VUE2/VUE3]基于echarts的动态折线图组件 时间格式化代码 export default function formatSecond(value: number) {let millis ...
- 【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置(已解决附源码)
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...
- echarts type:line 折线图 折线折点样式
echarts type:line 折线图 折线折点样式 series: [{name: '课时',type: 'line',data: [23,60,20,36,23,85],label:{ //折 ...
- 直播app源代码,echarts 柱状图,折线图互转实例
直播app源代码,echarts 柱状图,折线图互转实例的相关代码 function initDayChart(){var myChart = echarts.init(document.getEle ...
- 在 Echarts 中设置折线图x轴文字的倾斜度
在 Echarts 中设置折线图x轴文字的倾斜度 在工作需求中,有需要把 Echarts 折线图的文字变成倾斜的样式.类似这样的: 这个功能咋实现? 很简单.加一句话就行了 // 配置项 option ...
- ECharts入门——折线图与柱状图
为第一次使用ECharts的小伙伴提供参考,废话不对说,直接上代码 这里主要对两个官网案例进行讲解: https://echarts.apache.org/examples/en/editor.htm ...
- Apache ECharts快速入门
文章目录 一.Apache ECharts简介 二.快速入门 1.获取 Apache ECharts 2.引入 Apache ECharts 3.简单图表示例 一.Apache ECharts简介 A ...
- 【前端统计图】echarts实现单条折线图
五分钟上手: 图片.png <!DOCTYPE html> <html><head><meta charset="utf-8">&l ...
- android时间轴折线图,echarts时间轴折线图
当使用echarts折线图时,每个数据会打点,在数据量小的时候,美观又快捷,但是当数据量过大时,会非常的卡,以及不美观 例如: series: { symbol:'circle', } > EC ...
最新文章
- python 零矩阵
- Java普通对象的内存配置
- 将url参数字符串转成数组
- linux suse 共享目录_SUSE环境下YAST源(连接共享目录)
- laravel安装laravel-ide-helper扩展进行代码提示(二)
- [论文阅读] Deep Transformers For Fast Small Intestine Grounding In Capsule Endoscope Video
- conda创建环境及激活环境失败问题
- MapInfo中MIF文件和MID文件的格式
- chm打开秒退_无法打开chm文件
- 微信直播王者荣耀设置教程(微信教程)
- 为了找出羞羞视频,百度云居然有“娇喘模式”
- freeswitch呼叫中心之freeswitch集成百度MRCP智能语音
- 最简单、最详细的装系统教程,你get到了吗?
- 对QT5信号与槽的认识
- 解决a标签下载网络图片直接打开的问题,通过浏览器下载网络文件
- 解决mac终端放大字体重启又变小了
- 国内免费php mysql空间,[php mysql]国内有什么好的免备案免费php+mysql空间
- Unity 2D横版移动跳跃
- 【Python技巧】(虚拟环境报错、pycharm)无法加载文件 ...\venv\Scripts\activate.ps1,因为在此系统上禁止运行脚本。
- 是男人就撑过20秒的游戏分析+无敌Patch的实现
热门文章
- linux ks脚本,linux安装详解-配置ks.cfg实现自动安装过程
- 那些停课的日子 by yjjr
- ES6 箭头函数大起底:熟知这几个特点让你少踩很多坑
- form标签action跳转后,jquery失效的问题
- Microsoft .NET Core 1.0.0 VS 2015 Tooling Preview 2 0x80070003
- 查询快递,查看单号更新几条物流信息
- java protostuff 序列化_使用Protostuff序列化
- 今天给大家分享使用Scratch做飞不出去的醉酒蝴蝶!
- 一个让你觉得相见恨晚的工具——utools
- 4012: 分赃不均(kas)