ECharts的图表混搭-一一网

在ECharts的图表混搭中，一个图表包含唯一图例、工具箱、数据区域缩放模块、值域漫游模块和一个直角坐标系，直角坐标系可包含一条或多条类目轴线、一条或多条值轴线，类目轴线和值轴线最多上下左右共4条。
ECharts中支持任意图表的混搭，其中常见的图表混搭有折线图与柱状图的混搭、折线图与饼状图的混搭等。利用某地区一年的降水量和蒸发量数据绘制双y轴的折线图与柱状图混搭图表，如图所示。

在图表混搭代码中，数据中的yAxis数组中，通过代码position:’right’指定Y轴安置的位置（如果没有指定position的值，那么默认安置位置为’left’）；在series数组中，通过代码yAxisIndex:1，指定使用第2个Y轴（0代表第1个Y轴，1代表第2个Y轴）。
利用ECharts各图表的在线构建次数、各图表组件的使用次数、各版本下载和各主题下载情况的数据绘制柱状图与饼图混搭图表。

<html>

<head>
	<meta charset="utf-8">
	<script type="text/javascript" src='https://juejin.cn/post/js/echarts.js'></script>
</head>

<body>
	<div id="main" style="width: 800px; height: 600px"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		var option = {  //指定图表的配置项和数据
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
			tooltip: { trigger: 'axis' },
			legend: { data: ['降水量', '蒸发量'], left: 'center', top: 12 },
			xAxis: [
				{
					type: 'category',
					data: ['1月', '2月', '3月', '4月', '5月', '6月',
						'7月', '8月', '9月', '10月', '11月', '12月']
				}
			],
			yAxis: [
				{   //设置两个Y轴之1：降水量
					type: 'value', name: '降水量（mL）',
					min: 0, max: 250, interval: 50,
					axisLabel: { formatter: '{value} ' }
				},
				{   //设置两个Y轴之2：蒸发量
					type: 'value', name: '蒸发量（mL）', min: 0, max: 200,
					position: 'right',  //设置y轴安置的位置
					offset: 0,  //设置向右偏移的距离
					axisLine: { lineStyle: { color: 'red' } },
					axisLabel: { formatter: '{value} ' }
				}
			],
			series: [
				{
					name: '降水量', type: 'bar',
					itemStyle: {  //设置柱状图颜色
						normal: {
							color: function (params) {
								var colorList = [  //build a color map as your need
									'#fe9f4f', '#fead33', '#feca2b', '#fed728', '#c5ee4a',
									'#87ee4a', '#46eda9', '#47e4ed', '#4bbbee', '#4f8fa8',
									'#4586d8', '#4f68d8', '#F4E001', '#F0805A', '#26C0C0'];
								return colorList[params.dataIndex]
							},
						}
					},
					data: [50, 75, 100, 150, 200, 248, 220, 180, 155, 130, 90, 75]
				},
				{
					name: '蒸发量', type: 'line',
					yAxisIndex: 1,  //指定使用第2个y轴
					itemStyle: { normal: { color: 'red' } },  //设置折线颜色
					data: [58, 65, 90, 120, 130, 180, 150, 130, 125, 110, 150, 145]
				}
			]
		};
		myChart.setOption(option);  //为echarts对象加载数据 
	</script>
</body>

</html>
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端