在ECharts的图表混搭中,一个图表包含唯一图例、工具箱、数据区域缩放 模块、值域漫游模块和一个直角坐标系,直角坐标系可包含一条或多条类目轴线、一条或多条值轴线,类目轴线和值轴线最多上下左右共4条。 ECharts中支持任意图表的混搭,其中常见的图表混搭有折线图与柱状图的混搭、折线图与饼状图的混搭等。
利用某地区一年的降水量和蒸发量数据绘制双y轴的折线图与柱状图混搭图表,如图所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>
<title>5-1 双y轴的折线图与柱状图混搭图</title>
</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 waterMarkText = '自己想加入的内容'; //设置水印的字符
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.09;
ctx.font = '20px Microsoft Yahei'; //