ECharts柱状图案和折线图的结合

本案例中,展示了在同一个图表内同时画充柱状图和折线图。
(本例子数据纯属虚构,参考来源:https://gallery.echartsjs.com/editor.html?c=xxveE59vna)

在Echarts中,可以在同一个图表使用多个不同或相同的类型的统计,已达到不同的数据展示需求。下面就来看看本例子,学习使用Echarts常用的知识点。

1.开始构建图表

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。

<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">// <![CDATA[
	//设置全屏
	$('#echart').width($(document).width())
	$('#echart').height($(document).height())
	// 基于准备好的dom,初始化echarts实例
	var myChart = echarts.init(document.getElementById('echart'));

	// 指定图表的配置项和数据
	var option = {
		backgroundColor: '#0f375f',
		grid: {
			top: "25%",
			bottom: "10%"
		},
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "shadow",
				label: {
					show: true
				}
			}
		},
		legend: {
			data: ["同比", "投资额"],
			top: "15%",
			textStyle: {
				color: "#ffffff"
			}
		},
		xAxis: {
			data: [
				"1月",
				"2月",
				"3月",
				"4月",
				"5月",
				"6月",
				"7月"
			],
			axisLine: {
				show: false //隐藏X轴轴线
			},
			axisTick: {
				show: false //隐藏X轴刻度
			},
			axisLabel: {
				show: true,
				textStyle: {
					color: "#ebf8ac" //X轴文字颜色
				}
			}
		},
		yAxis: [{
				type: "value",
				name: "亿元",
				nameTextStyle: {
					color: "#ebf8ac"
				},
				splitLine: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: "#ebf8ac"
					}
				}
			},
			{
				type: "value",
				name: "同比",
				nameTextStyle: {
					color: "#ebf8ac"
				},
				position: "right",
				splitLine: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				},
				axisLabel: {
					show: true,
					formatter: "{value} %", //右侧Y轴文字显示
					textStyle: {
						color: "#ebf8ac"
					}
				}
			},
			{
				type: "value",
				gridIndex: 0,
				min: 50,
				max: 100,
				splitNumber: 8,
				splitLine: {
					show: false
				},
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					show: false
				},
				splitArea: {
					show: true,
					areaStyle: {
						color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
					}
				}
			}
		],
		series: [{
				name: "同比",
				type: "line",
				yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
				smooth: true, //平滑曲线显示
				symbol: "none", //标记的图形为实心圆
				itemStyle: {
					//折线拐点标志的样式
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: "#ff464b"
						},
						{
							offset: 0.5,
							color: "#ff2c9e"
						},
						{
							offset: 1,
							color: "#f813b5"
						}
					])
				},
				lineStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: "#ff464b"
						},
						{
							offset: 0.5,
							color: "#ff2c9e"
						},
						{
							offset: 1,
							color: "#f813b5"
						}
					]),
					width: 10
				},
				data: [2, 6, 4, 8 ,2 ,6 ,2]
			},
			{
				name: "投资额",
				type: "bar",
				barWidth: 30,
				itemStyle: {
					normal: {
						barBorderRadius: 60,
						shadowColor: 'rgba(255,255,255,0.3)',
						shadowBlur: 10,
						shadowOffsetX: 2,
						shadowOffsetY: 3,
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: "#34f5c1"
							},
							{
								offset: 1,
								color: "#10a9d5"
							}
						])
					}
				},
				data: [2, 6, 4, 8 ,2 ,6 ,2]
			}
		]
	};

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

2.要点分析

(1)单个图表实例中存在多个 y轴的时候

yAxis: [{...}]

可以包含多个轴,然后在对应的图标系列中使用yAxisIndex,指定使用哪一个y轴。

图表预览地址:https://www.deepsea887.com/?page_id=142

发表评论

电子邮件地址不会被公开。 必填项已用*标注