Part1echart.js绘制折线图
1Echart简介
Echart是百度研发团队开发的一款报表视图JS插件,功能十分强大,对开发者和用户友好。
- EChart下载地址:http://echarts.baidu.com/download.html
- Echart官方网站:https://www.echartsjs.com/index.html
- demo列表:https://echarts.apache.org/examples/zh/index.html
折线图示例
每个示例都有对应的代码,可以直接拿下来用。
2option中的重要属性
echart的调用十分简单,只需引入echart.js库,再调用相关的init方法,设置配置项即可得到图。
let chart = echarts.init(myChartDom) // 初始化画布节点
chart.setOption(options) // 将配置项在画布上画出来
- title:写标题,属性如下
- show:false/true 标题是否显示;
- text:标题内容;textstyle修饰标题样式
- subtext:副标题,也可以算是内容;subtextStyle修饰副标题样式;
- legend:图例组件展现了不同系列的标记(symbol),颜色和名字;
- show:false/true 是否显示;
- data:图例的数据数组;
- grid:直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图;
- show:false/true 是否显示;
- top、left、right、bottom标识上左右下的边距;
- xAxis :直角坐标系 grid 中的 x 轴,单个 grid 组件最多只能放上下两个 x 轴。
- type:坐标轴类型。
'value'
数值轴,适用于连续数据。'category'
类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。'time'
时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。- data:类目数据,在类目轴(type: ‘category’)中有效。
- yAxis:直角坐标系 grid 中的 y 轴,单个 grid 组件最多只能放左右两个 y 轴。
- type:坐标轴类型。
'value'
数值轴,适用于连续数据。'category'
类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。'time'
时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。- dataZoom:组件 用于对数据进行区域缩放,从而能自由关注细节的数据信息,或者概览数据整体
- type:slider; 是否显示 组件。如果设置为
false
,不会显示,但是数据过滤的功能还存在; - backgroundColor:组件的背景颜色。
- realtime:拖动时,是否实时更新系列的视图。如果设置为
false
,则只在拖拽结束的时候更新。 - top、left、right、bottom标识上左右下的边距;
- tooltip:提示框组件
- show:false/true 是否显示;
- trigger:触发类型;
'item'
:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。'axis'
:坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。- color:调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。
默认为:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
- seriers: 系列列表。每个系列通过type 决定自己的图表类型;
- series[i]-line:折线
- itemStyle:折线拐点标志的样式;
- series[i]-bar:柱状图通过柱形的高度来表现数据的大小,用于有至少一个类目轴的直角坐标系上。
3option示例
气温变化折线图
option = {
title: {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['最高气温', '最低气温']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name: '最高气温',
type: 'line',
data: [10, 11, 13, 11, 12, 12, 9],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name: '最低气温',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
position: 'start',
formatter: '最大值'
},
type: 'max',
name: '最高点'
}]
]
}
}
]
};
image-20210823180507254
项目中的折线图
在本人遇到的一些项目中,有些需求,使用echart.js可以很舒服地就把问题解决了,下面分享一下。
放大缩小实现
实现要点
- 借助echart.js的options配置中的dataZoom配置项实现
打标签实现
实现要点
- 获取按下按钮时,当前数据列表中最后一个数据
- 保留每条线打标签的数据,并且把控好对应关系
- 每次刷新画图时,将所有标记点都画进去
数据融合实现
实现要点
- 收集两条线的所有数据,融入到一个对象中
- 重新渲染一块画布,并将所有数据在画布上画出
- 通过按钮控制各个画布的展开和收回
option配置如下。
option = {
"grid": {
"left": "10%",
"right": "10%",
"bottom": "40%",
"top": "10%"
},
"dataZoom": {
"type": "slider",
"show": true,
"start": 0,
"end": 100,
"height": 16,
"bottom": "5%"
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross",
"animation": false,
"label": {
"backgroundColor": "#505765"
}
}
},
"xAxis": [
{
"type": "category",
"boundaryGap": false,
"axisLine": {
"onZero": false
},
"data": [
"00:00:07",
"00:00:23",
"00:00:41",
"00:00:62",
"00:00:86",
"00:01:01",
"00:01:21",
"00:01:44",
"00:01:61",
"00:01:82",
"00:02:01",
"00:02:22",
"00:02:41",
"00:02:61",
"00:02:81",
"00:03:01",
"00:03:28",
"00:03:50",
"00:03:70",
"00:03:88",
"00:04:08",
"00:04:29",
"00:04:48",
"00:04:69"
],
"axisLabel": {
"show": true,
"inside": false,
"rotate": 0,
"margin": 5,
"color": "#999",
"interval": 4
}
}
],
"yAxis": [
{
"type": "value",
"scale": true,
"show": true
}
],
"series": [
{
"name": "one_table2",
"type": "line",
"symbol": "none",
"lineStyle": {
"width": 1
},
"markPoint": {
"data": [
{
"name": "标记点",
"value": -58,
"xAxis": "00:01:61",
"yAxis": -58,
"xIndex": 8
},
{
"name": "标记点",
"value": -59,
"xAxis": "00:01:82",
"yAxis": -59,
"xIndex": 9
},
{
"name": "标记点",
"value": -33,
"xAxis": "00:02:01",
"yAxis": -33,
"xIndex": 10
}
],
"effect": {
"show": true,
"shadowBlur": 0
}
},
"data": [ -38,-4,-10,-53,-18,-14,-54,-55,-58,-59,-33,-49,-23,-10,-51,-3,-32,-34,-3,-36,-13,-42,-18,-28,-54,-7,-2,-15,-2,-31,-25,-37,-58,-46,-5,-19,-21,-43,-3,-59,-21,-8,-15,-43,-54,-58,-48,-1,-1,-4,-2,-17,-58,-15,-7,-8,-58,-4,-20,-45,-3,-58,-40,-12,-19
]
},
]
}