Echarts多Y轴探索

最新推荐文章于 2024-07-04 10:50:41 发布
最新推荐文章于 2024-07-04 10:50:41 发布
阅读量301 收藏
点赞数
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/wangmengjun/blog/801134
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

用过好多图表库，还是对Echarts最有好感。：）

本文使用Echarts来给出多Y轴的实例。

在给出多Y轴实例前，咱们首先来看一下Echarts实现图形化的基本步骤；单Y轴实例；双Y轴实例。本文采用的ECharts版本为3.2.2，大家可以到ECharts的下载页面下载。

ECharts图形化步骤

引入ECharts

将下载的echarts.min.js文件，使用<script>标签引入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

指定图形展示区域

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

初始化echarts实例

 // 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById('main'));

指定配置项和数据

// 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

设置Option显示图表

       // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

一个ECharts官网示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

单Y轴

如下给出一个2016年每月新增设备数的柱状图，数据纯属虚构。

代码

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="height: 500px; width: 1200px"></div>

	<!-- ECharts单文件引入 -->
	<script src="echarts.min.js"></script>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts图表
		var myChart = echarts.init(document.getElementById('main'));
		option = {
			tooltip : {
				trigger : 'axis'
			},
			grid : {
				right : '20%'
			},
			toolbox : {
				feature : {
					dataView : {
						show : false,
						readOnly : false
					},
					restore : {
						show : false
					},
					saveAsImage : {
						show : false
					}
				}
			},
			legend : {
				data : [ '设备新增数量' ]
			},
			xAxis : [ {
				type : 'category',
				axisTick : {
					alignWithLabel : false
				},
				data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
						'2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
						'2016-11', '2016-12' ]
			} ],
			yAxis : [ {
				type : 'value',
				name : '设备新增数量',
				min : 0,
				max : 11000,
				position : 'left',
				axisLine : {
					lineStyle : {}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} ],
			series : [ {
				name : '设备新增数量',
				type : 'bar',
				data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000, 3002, 3580,
						5063, 1520, 9000 ]
			} ]
		};

		// 为echarts对象加载数据 
		myChart.setOption(option);
	</script>
</body>

图形展示

双Y轴

在上述单Y轴的柱状图中展示了一个2016年每月新增设备数的数据。接下来，我们在上述基础上添加2016年每月新增产品数。

假设，一个产品可以有多个设备。

但是，可能一个产品包含上百、上千甚至更多的设备数，那么，问题来了 ？

如果使用单轴的柱状图就会产生问题？

设备数图形较为明显、而产品数的图形展示不明显，几乎看不到变化，

因为设备数和产品数不在同一个数量级上。

为了解决这个问题，咱么可以展示两个Y轴，分别表示设备数和产品数即可。

代码

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="height: 500px; width: 1200px"></div>

	<!-- ECharts单文件引入 -->
	<script src="echarts.min.js"></script>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts图表
		var myChart = echarts.init(document.getElementById('main'));
		option = {
			tooltip : {
				trigger : 'axis'
			},
			grid : {
				right : '20%'
			},
			toolbox : {
				feature : {
					dataView : {
						show : false,
						readOnly : false
					},
					restore : {
						show : false
					},
					saveAsImage : {
						show : false
					}
				}
			},
			legend : {
				data : [ '设备新增数量', '产品新增数量' ]
			},
			xAxis : [ {
				type : 'category',
				axisTick : {
					alignWithLabel : false
				},
				data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
						'2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
						'2016-11', '2016-12' ]
			} ],
			yAxis : [ {
				type : 'value',
				name : '设备新增数量',
				min : 0,
				max : 11000,
				position : 'left',
				axisLine : {
					lineStyle : {}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '产品新增数量',
				min : 0,
				max : 200,
				position : 'right',
				axisLine : {
					lineStyle : {}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} ],
			series : [
					{
						name : '设备新增数量',
						type : 'bar',
						data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
								3002, 3580, 5063, 1520, 9000 ]
					},
					{
						name : '产品新增数量',
						type : 'bar',
						yAxisIndex : 1,
						data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
								150 ]
					} ]
		};

		// 为echarts对象加载数据 
		myChart.setOption(option);
	</script>
</body>

图形展示

三个Y轴

在上述单Y轴的柱状图中展示了一个2016年每月新增设备数和2016年每月新增产品数的数据，这个部分，我们还想在图形上展示2016年每月新增厂商数。

设备数和产品数已经占用了两个Y轴，还能再添加一个新的Y轴进去吗？ 

答案是肯定的。

ECharts为yAxis提供的offset属性，就是为多轴服务的。详情，请参考yAxis配置属性。

代码

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="height: 500px; width: 1200px"></div>

	<!-- ECharts单文件引入 -->
	<script src="echarts.min.js"></script>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts图表
		var myChart = echarts.init(document.getElementById('main'));
		var colors = [ '#5793f3', '#d14a61', '#675bba' ];
		option = {
			color : colors,

			tooltip : {
				trigger : 'axis'
			},
			grid : {
				right : '20%'
			},
			toolbox : {
				feature : {
					dataView : {
						show : false,
						readOnly : false
					},
					restore : {
						show : false
					},
					saveAsImage : {
						show : false
					}
				}
			},
			legend : {
				data : [ '设备新增数量', '产品新增数量', '厂商新增数量' ]
			},
			xAxis : [ {
				type : 'category',
				axisTick : {
					alignWithLabel : false
				},
				data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
						'2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
						'2016-11', '2016-12' ]
			} ],
			yAxis : [ {
				type : 'value',
				name : '设备新增数量',
				min : 0,
				max : 11000,
				position : 'left',
				axisLine : {
					lineStyle : {
						color : colors[2]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '产品新增数量',
				min : 0,
				max : 200,
				position : 'right',
				axisLine : {
					lineStyle : {
						color : colors[0]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '厂商新增数量',
				min : 0,
				max : 200,
				position : 'right',
				offset : 80,
				axisLine : {
					lineStyle : {
						color : colors[1]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} ],
			series : [
					{
						name : '设备新增数量',
						type : 'bar',
						data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
								3002, 3580, 5063, 1520, 9000 ]
					},
					{
						name : '产品新增数量',
						type : 'bar',
						yAxisIndex : 1,
						data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
								150 ]
					},
					{
						name : '厂商新增数量',
						type : 'bar',
						data : [ 12, 15, 26, 36, 25, 18, 16, 47, 58, 69, 93,
								150 ]
					} ]
		};

		// 为echarts对象加载数据 
		myChart.setOption(option);
	</script>
</body>

图形展示

小结

在ECharts的option中，我们可以配置参数来指定用于展示的图形类型、图形数据、图形属性等（如标题、颜色等），具体可以参考配置项。

四轴

如果还需要展示更多的Y轴数据，那么只要在yAxis选项中，指定不同的Y轴及其相关的位置或者偏移量offset即可。

代码如下：

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="height: 500px; width: 1200px"></div>

	<!-- ECharts单文件引入 -->
	<script src="echarts.min.js"></script>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts图表
		var myChart = echarts.init(document.getElementById('main'));
		option = {
			tooltip : {
				trigger : 'axis'
			},
			grid : {
				right : '20%'
			},
			toolbox : {
				feature : {
					dataView : {
						show : false,
						readOnly : false
					},
					restore : {
						show : false
					},
					saveAsImage : {
						show : false
					}
				}
			},
			legend : {
				data : [ '设备新增数量', '产品新增数量', '厂商新增数量', 'XX新增数量' ]
			},
			xAxis : [ {
				type : 'category',
				axisTick : {
					alignWithLabel : false
				},
				data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
						'2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
						'2016-11', '2016-12' ]
			} ],
			yAxis : [ {
				type : 'value',
				name : '设备新增数量',
				min : 0,
				max : 11000,
				position : 'left',
				axisLine : {
					lineStyle : {}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '产品新增数量',
				min : 0,
				max : 200,
				position : 'right',
				axisLine : {
					lineStyle : {}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '厂商新增数量',
				min : 0,
				max : 200,
				position : 'right',
				offset : 80,
				axisLine : {
					lineStyle : {}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : 'XX新增数量',
				min : 0,
				max : 200,
				position : 'right',
				offset : 160,
				axisLine : {
					lineStyle : {}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} ],
			series : [
					{
						name : '设备新增数量',
						type : 'bar',
						data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
								3002, 3580, 5063, 1520, 9000 ]
					},
					{
						name : '产品新增数量',
						type : 'bar',
						yAxisIndex : 1,
						data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
								150 ]
					},
					{
						name : '厂商新增数量',
						type : 'bar',
						data : [ 12, 15, 26, 36, 25, 18, 16, 47, 58, 69, 93,
								150 ]
					},
					{
						name : 'XX新增数量',
						type : 'bar',
						data : [ 121, 125, 26, 36, 125, 88, 66, 147, 158, 99,
								93, 108 ]
					} ]
		};

		// 为echarts对象加载数据 
		myChart.setOption(option);
	</script>
</body>

自定义

如果对EChart提供的颜色不满意，我们也可以指定图形展示的颜色。

其实，EChart已经提供了好多套主题，用来展示图形。

示例代码如下：

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="height: 500px; width: 1200px"></div>

	<!-- ECharts单文件引入 -->
	<script src="echarts.min.js"></script>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts图表
		var myChart = echarts.init(document.getElementById('main'));
		var colors = [ '#5793f3', '#d14a61', '#675bba' ];
		option = {
			color : colors,

			tooltip : {
				trigger : 'axis'
			},
			grid : {
				right : '20%'
			},
			toolbox : {
				feature : {
					dataView : {
						show : false,
						readOnly : false
					},
					restore : {
						show : false
					},
					saveAsImage : {
						show : false
					}
				}
			},
			legend : {
				data : [ '设备新增数量', '产品新增数量', '厂商新增数量' ]
			},
			xAxis : [ {
				type : 'category',
				axisTick : {
					alignWithLabel : false
				},
				data : [ '2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
						'2016-06', '2016-07', '2016-08', '2016-09', '2016-10',
						'2016-11', '2016-12' ]
			} ],
			yAxis : [ {
				type : 'value',
				name : '设备新增数量',
				min : 0,
				max : 11000,
				position : 'left',
				axisLine : {
					lineStyle : {
						color : colors[2]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '产品新增数量',
				min : 0,
				max : 200,
				position : 'right',
				axisLine : {
					lineStyle : {
						color : colors[0]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			}, {
				type : 'value',
				name : '厂商新增数量',
				min : 0,
				max : 200,
				position : 'right',
				offset : 80,
				axisLine : {
					lineStyle : {
						color : colors[1]
					}
				},
				axisLabel : {
					formatter : '{value}'
				}
			} ],
			series : [
					{
						name : '设备新增数量',
						type : 'bar',
						data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
								3002, 3580, 5063, 1520, 9000 ]
					},
					{
						name : '产品新增数量',
						type : 'bar',
						yAxisIndex : 1,
						data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
								150 ]
					},
					{
						name : '厂商新增数量',
						type : 'bar',
						data : [ 12, 15, 26, 36, 25, 18, 16, 47, 58, 69, 93,
								150 ]
					} ]
		};

		// 为echarts对象加载数据 
		myChart.setOption(option);
	</script>
</body>

自定义颜色的图形展示如下：

至此，使用ECharts完成多Y轴展示的示例就展示完毕了。

ECharts是一个比较丰富的图形展示库，大家可以参考官网的说明和实例，打造属于自己的个性化图形。

转载于:https://my.oschina.net/wangmengjun/blog/801134

weixin_34194317
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts formatter_Echarts多Y轴探索
weixin_39622568的博客
11-29 556
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖轻量级的 Canvas 类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。用过好多图表库，还是对Echarts最有好感。：)本文使用Echarts来给出多Y轴的实...
echarts的多个y轴
热门推荐
weixin_45884508的博客
08-04 1万+
y轴的设置可以根据自己的需要进行修改，axisLabel设置原点的颜色 axisLine设置y轴的颜色，需要对应的yAxisIndex通过设置，需要修改颜色与y轴进行对应。可以根据项目需要自行修改，
Echarts中的折线图，多个Y轴集中在左侧（在Vue中使用多个Y轴的折线图）
最新发布
weixin_65793170的博客
07-04 541
在 ECharts 中，创建一个带有多个 Y 轴的折线图，并且将这些 Y 轴都集中显示在图表的左侧，可以通过合理配置 yAxis 和 series 的属性来实现。
echarts多个Y轴
weixin_48058348的博客
07-19 567
【代码】echarts多个Y轴。
echarts系列-----2 (多个Y轴)
Zhooson的博客
05-15 9863
本篇讲解的echarts 多个Y轴的实现方法，具体见代码，并标注注释（例子 文档事例都是有的，传送门
echart 多Y轴
weixin_40112036的博客
11-07 258
有些项目中，要去图表有多个y轴，并且每一个折线的颜色和y轴对应起来
echarts实现多个y轴
算法与编程之美
01-11 3490
1 问题描述在日常画图，如柱形图、折线图这些图表，需要两组或者两组以上不同的数据，且数据的大小有一定的差异时，通常是需要用两个y轴来体现的。2 算法描述若要更改y轴的个数，我们需要用到yA...
echarts实现获取datazoom的起始值(包括x轴和y轴)
11-20
本篇将详细介绍如何在ECharts中获取DataZoom组件对于x轴和y轴的起始值，并探讨与之相关的知识点。 首先，我们需要了解ECharts的DataZoom组件的基本概念。DataZoom是一种可交互的数据区域缩放工具，它可以为x轴或y轴...
Echarts，拖拽功能
05-29
每个数据项可以是一个包含数值的数组，例如`[x轴值, y轴值]`。为了启用拖拽功能，需要在`series`中添加`draggable`属性，并将其设置为`true`。 ```javascript var option = { // ...其他配置项... series: [{ ...
echarts的相关文件
05-30
6. **气泡图.html**：气泡图通过三个维度（x轴、y轴和气泡大小）展示数据，常用于表示三个变量之间的关系。这个示例可能展示了某种关联性的多维数据。 7. **时间轴.html**：ECharts的时间轴组件可以用于展示时间...
howler音频插件和echarts图表插件
07-07
在这个例子中，我们首先初始化了一个ECharts实例，然后设置了图表的配置项，包括x轴、y轴的数据和系列（这里是柱状图），最后调用`setOption`方法更新图表。 总的来说，howler音频插件和echarts图表插件都是...
echarts实现多维坐标轴
09-17
在开发过程中可能会遇到把数据显示在同一个坐标轴中，但是x，y轴的数据单位不一样
echarts小案例
04-20
然后，我们需要设置图表的配置项（option），包括图表的标题、x轴和y轴的数据、系列等。以下是一个基础的折线图配置： ```javascript var option = { title: { text: 'ECharts示例' }, tooltip: {}, legend: {...
echart 多Y轴展示
iorn_mangg的博客
05-28 979
效果图：
怎么在echarts上多个y轴
macrun28的博客
10-29 6345
最近被叫去写数据后台的页面，嗯，我是一个java开发，还是偏数据方向，但是，不能让cto和师傅失望，ok，但是会写的慢一点。（说这句话的时候我已经给后台写了7个页面，包括接口和sql）。其实echarts对前端来说挺简单的，我主要写给那些和我一样非前端的，如有错误，可以提，不接受批评，谢谢。这里写代码片 var lineChartDataOne = { title: {
echarts学习: 在图表中添加多条y轴会怎么样？
m0_52912501的博客
06-05 701
在撰写如何绘制双y轴图表文章时，我突然萌生出了一个想法，如果给图表添加两个以上的y轴会怎么样呢? 带着这个问题我开始了自己的探索之旅。
echarts 折线图多Y轴，每一条Y轴独属于一个区域，折线之间不交集。
weixin_39246975的博客
12-21 5811
1、前景：在echarts中设置多个Y轴的时候，如果不想Y轴的折线有交叉，则需要考虑一下这个方案： 每一条Y轴分为一个区域，使得每一个Y轴都是一个独立的区域，举个例子：四条Y轴，那就是每条Y轴占四分一。但是要怎么实现呢？ 先看图： 实现前：折线之间是有交叉的2、实现后：每条折线之间分为区域去显示，毫无交集 3、实现的方法：利用echarts 官方提供的max和min函数 max:function(value){ let lengs = 4; //四条Y轴
Echarts 添加多个 Y 轴并可对 Y 轴的最大最小值进行自定义编辑
虎康的博客
04-02 609
过程线图Y主轴：Y次轴：编辑y轴 相关图
echarts折线图多y轴
weixin_40496191的博客
09-20 951
【代码】echarts多y轴。
echarts多Y轴
09-22
ECharts是一个用于数据可视化的JavaScript库，它支持多个Y轴。在ECharts的option中，通过yAxis属性可以定义多个Y轴，并为每个Y轴设置不同的名称、位置和样式等属性。你可以在yAxis数组中定义多个对象，每个对象代表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值