ECharts的图表混搭之绘制双y轴的折线图与柱状图混搭图表

在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';  //

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值