html折线图多图并列,Echarts实现多个x轴或y轴曲线图
Echarts实现多个x轴或y轴曲线图
Echarts实现多个x轴或y轴曲线图
效果图如下：
1.1 配置option对象
option:{
// 设置 x 轴的样式
xAxis:{},
// 设置 y 轴的样式
yAxis:[],
// 设置每条曲线的数据和样式
series:[],
// 设置鼠标hover时的提示信息
tooltip:{},
// 调整表格两边的空白的区域
grid:{},
// 调整图样的名称
legend:{}
// 定义图样和每条曲线的颜色
color:[]
}
yAixs 用来配置 y 轴的数据，样式和名称，当把 yAxis 设置为一个数组，且给数组添加多个对象时，就可以实现多个 y 轴的效果。
但是这些 y 轴都是重叠的，我们可以通过每个 y 轴的 offset 属性来调整 y 轴使它们到达合适的位置
通过 axisTick 和axisLabel 属性可以分别设置 y 轴上的刻度和刻度值的位置，是在左侧显示还是在右侧
如果表格左右的留白空间不足以放下多个 y 轴，可以通过设置 grid 属性来调整空白和图像的比例
具体实现代码如下：
option = {
yAxis: [
{
name: '指标参数一(单位)',
type: 'value',
// max: 700,
// min: 0,
// 让表格的刻度向靠里侧显示
axisTick: {
inside: true
},
axisLabel: {
inside: true
},
// 设置刻度线的颜色等样式
axisLine: {
lineStyle: {
color: 'red',
width: 3
}
},
splitLine: {
show: true, //想要不显示网格线，改为false
lineStyle: {
// 设置网格为虚线
type: 'dashed'
}
}
},
{
name: '指标参数二(单位)',
// max: 800,
// min: 0,
type: 'value',
axisLine: {
lineStyle: {
color: 'orange',
width: 3
}
},
splitLine: {
show: false //想要不显示网格线，改为false
},
// 设置坐标轴偏移位置
offset: -1060
},
{
name: '指标参数三(单位)',
// max: 900,
// min: 0,
type: 'value',
axisLine: {
lineStyle: {
color: 'green',
width: 3
}
},
offset: -1160,
splitLine: {
show: false //想要不显示网格线，改为false
}
},
{
name: '指标参数四(单位)',
// max: 1000,
// min: 0,
type: 'value',
axisTick: {
inside: true
},
axisLabel: {
inside: true
},
axisLine: {
lineStyle: {
color: 'blue',
width: 3
}
},
splitLine: {
show: false //想要不显示网格线，改为false
}
},
{
name: '指标参数五(单位)',
// max: 1100,
// min: 0,
type: 'value',
offset: 100,
axisTick: {
inside: true
},
axisLabel: {
inside: true
},
axisLine: {
lineStyle: {
color: 'purple',
width: 3
}
},
splitLine: {
show: false //想要不显示网格线，改为false
}
},
{
name: '指标参数六(单位)',
// max: 700,
// min: 0,
type: 'value',
offset: 200,
axisTick: {
inside: true
},
axisLabel: {
inside: true
},
axisLine: {
lineStyle: {
color: 'pink',
width: 3
}
},
splitLine: {
show: false //想要不显示网格线，改为false
}
}
],
// 调整表格两边空白的区域
grid: {
// 左侧
x: '20%',
// 上部
// y: 25,
// 右侧
x2: '20%'
// 下部
// y2: 35
},
}
xAxis，配置 x 轴数据、样式、名称，如果想设置多个 x 轴和上述 y 轴同理
当 x 轴的 type 是 ‘time’ 类型时，刻度值需要在series 属性中设置具体见下文 xAxis: {
name: '时间',
type: 'time',
// boundaryGap: false, //x下标在刻度处显示
splitLine: {
show: true, //想要不显示网格线，改为false
lineStyle: {
// 设置网格为虚线
type: 'dashed'
}
},
// splitArea: { show: true }, //保留网格区域
// 设置刻度线的颜色等样式
axisLine: {
lineStyle: {
color: 'black',
width: 3
}
}
}
series，用于配置每条曲线的名称、曲线中点的值，和 x 轴的时间刻度值
series 为一个数组时，里面的每一个对象都是一条曲线，所以可以配置多条曲线。
通过 yAxisIndex 可以设置每个曲线对应的上面的 yAxis 中的 y 轴的索引，把曲线和不同的 y 轴匹配起来
smooth 为 true 时，则可以折线变成曲线 series: [
{
// 曲线数据配置
data: [
{
// value[0] 为时间 value[1] 为值
value: ['1997-10-1', 300]
},
{
value: ['1997-10-2', 200]
},
{
value: ['1997-10-3', 500]
},
{
value: ['1997-10-4', 600]
},
{
value: ['1997-10-5', 400]
},
{
value: ['1997-10-6', 200]
}
],
// 曲线名
name: '参数1',
// 设置参数对应的y坐标轴的索引
type: 'line',
// 曲线平滑设置
smooth: true
},
{
data: [
{
value: ['1997-10-1', 180]
},
{
value: ['1997-10-2', 250]
},
{
value: ['1997-10-3', 50]
},
{
value: ['1997-10-4', 450]
},
{
value: ['1997-10-5', 400]
},
{
value: ['1997-10-6', 200]
}
],
// 曲线名
name: '参数2',
// 设置所在曲线对应的y坐标轴的索引
yAxisIndex: 1,
type: 'line',
// 曲线平滑设置
smooth: true
},
{
data: [
{
value: ['1997-10-1', 100]
},
{
value: ['1997-10-2', 800]
},
{
value: ['1997-10-3', 250]
},
{
value: ['1997-10-4', 350]
},
{
value: ['1997-10-5', 360]
},
{
value: ['1997-10-6', 500]
}
],
name: '参数3',
// 设置参数对应的y坐标轴的索引
yAxisIndex: 2,
type: 'line',
// 曲线平滑设置
smooth: true
},
{
data: [
{
value: ['1997-10-1', 200]
},
{
value: ['1997-10-2', 400]
},
{
value: ['1997-10-3', 600]
},
{
value: ['1997-10-4', 800]
},
{
value: ['1997-10-5', 1000]
},
{
value: ['1997-10-6', 1100]
}
],
name: '参数4',
// 设置参数对应的y坐标轴的索引
yAxisIndex: 3,
type: 'line',
// 曲线平滑设置
smooth: true
},
{
data: [
{
value: ['1997-10-1', 1100]
},
{
value: ['1997-10-2', 800]
},
{
value: ['1997-10-3', 600]
},
{
value: ['1997-10-4', 500]
},
{
value: ['1997-10-5', 400]
},
{
value: ['1997-10-6', 200]
}
],
name: '参数5',
// 设置参数对应的y坐标轴的索引
yAxisIndex: 4,
type: 'line',
// 曲线平滑设置
smooth: true
},
{
data: [
{
value: ['1997-10-1', 700]
},
{
value: ['1997-10-2', 600]
},
{
value: ['1997-10-3', 500]
},
{
value: ['1997-10-4', 400]
},
{
value: ['1997-10-5', 300]
},
{
value: ['1997-10-6', 200]
}
],
name: '参数6',
// 设置参数对应的y坐标轴的索引
yAxisIndex: 5,
type: 'line',
// 曲线平滑设置
smooth: true
}
]
tooltip 属性用于配置鼠标放到曲线图上展示的数据展示样式
tooltip: {
trigger: 'axis', // 有3个属性值 axis item none
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985' //配置展示方块的背景颜色
}
}
}
通过 legend 属性配置图样的文字信息和样式
legend: { // 调整图样文字
data: ['参数1', '参数2', '参数3', '参数4', '参数5', '参数6']
}
通过 color 属性定义图样和曲线的颜色
// 定义图例和曲线颜色
color: ['red', 'orange', 'green', 'blue', 'purple', 'pink']
1.2 创建HTML元素
设置要放入曲线的div的宽度和高度
// 曲线图显示在这个div中，
// 这里设置的是高为600px ，宽为1600px
#myChart {
width: 1600px;
height: 600px;
}
1.3 渲染曲线图
let myChart = echarts.init(document.getElementById('myChart'))
myChart.setOption(this.option)
记录了开发过程中的一个Echart曲线图的需求问题，希望能够帮到大家。
Echarts实现多个x轴或y轴曲线图相关教程
C++实现环形队列
C++实现环形队列 实现环形队列 线性队列原理图： 假设是长度为5的数组，初始状态，空队列如所示，front与 rear指针均指向下标为0的位置。然后入队 a1 、 a2 、 a3 、 a4 ， front指针依然指向下标为0位置，而rear指针指向下标为4的位置。 出队 a1 、 a2 ，则f
Python实现爆火抖音的弹窗表白软件
Python实现爆火抖音的弹窗表白软件 最近抖音爆火的窗口表白 心中的女孩如果收到了，肯定会看着满屏幕的窗口感动不止，对你倾心 很多人学习python，不知道从何学起。 很多人学习python，掌握了基本语法过后，不知道在哪里寻找案例上手。 很多已经做案例的人，
jsp +sql 实现教评系统的增删改查
jsp +sql 实现教评系统的增删改查 jsp +sql 实现教评管理系统的增删改查 这里只拿学生管理在举例子，这个代码还有不完美的地方，待改进 添加 sadd.jsp 表单 %@ page language=java contentType=text/html; charset=UTF-8 pageEncoding=UTF-8%!DOCTYPE htmlhtm
01-复杂度2 Maximum Subsequence Sum (25分)【java实现】
01-复杂度2 Maximum Subsequence Sum (25分)【java实现】 Java实现代码： import java.util.Scanner;import java.io.*;public class Main { private static Reader reader; public static void main(String[] args) {// Scanner sc = new Scanner(System.in);
mysql实现有集合字段一行拆多行数据方法
mysql实现有集合字段一行拆多行数据方法 通常在使用表的过程中，存在多个数据id集合放在同一个字段存储时，我们需要查询该字段多个id数据时，不能通过find_in_set()函数时，可通过对该集合进行拆分多行，如图： 查询该表open_flag有(2,3)的数据，利用mysql
Python 实现图片转字符画，静态图、GIF 都能转
Python 实现图片转字符画，静态图、GIF 都能转 字符画是一种由字母、标点或其他字符组成的图画，它产生于互联网时代，在聊天软件中使用较多，本文我们看一下如何将自己喜欢的图片转成字符画。 很多人学习python，不知道从何学起。 很多人学习python，掌握了基
mysql使用FIND_IN_SET()函数实现某个字段查询某个数值问题
mysql使用FIND_IN_SET()函数实现某个字段查询某个数值问题 如果存在某个字段存储用逗号隔开的id集合时，需要查询该集合某个id时，使用find_in_set()函数实现，如： 如果需要查询包含open_flag包含3的数据时，如图 SELECT * FROM a_equip WHERE FIND_IN_SET(
JAVASE二维数组实现吃货订单系统
JAVASE二维数组实现吃货订单系统 该系统加深初学者对循环和数组的理解 1.订餐模块 2.查看钱袋模块 3.签收模块 4.删除模块 代码如下： public class EatTest { //订单数组 String[][] peopleArr=new String[5][]; static Scanner s=new Scanner(System.in); //