echarts 三种数据双y轴显示 （文末附带完整代码）

说明：网络引用echarts.js和直接下载echarts引用的样式可能会不一致，需要对折线的样式和字体进行修改的请参考我的另外一篇文章https://blog.youkuaiyun.com/Wangwangwang___/article/details/81317732

1、展示效果：

2、代码说明：

3、完整代码 

 <div id="trmmEcharts"  class="echartsDiv"></div>

<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    // 使用
    require(
            [
                'echarts',
                'echarts/chart/line',//折线图
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表

                var myChartTrmm = ec.init(document.getElementById('trmmEcharts'));

                var  option = {
                    title : {
                        text: '重点水体区域分布年际对比',
                        x:'center',
                        y:'top',
                    },
                    legend: {
                        data:['当前面积','均值','对比差值'],
                        y:'26'
                    },
                    tooltip: {
                        trigger: 'axis',
                        textStyle:{align:'left'}
                    },
                    grid: {
                        top: '22%',
                        left: '1%',
                        right: '1%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['2015-07-01至2015-07-31','2016-07-01至2016-07-31','2017-07-01至2017-07-31','2018-07-01至2018-07-31']

                    },
                    yAxis: [
                        {
                            name: '水体面积',
                            type: 'value',
                            max: 2000,
                            splitLine:{show: false}
                        },
                        {
                            name: '对比差值',
                            nameLocation: 'start',
                            max: 10,
                            type: 'value',
                            splitLine:{show: false}
                        }
                    ],
                    series: [
                        {
                            name:'当前面积',
                            type:'line',
                            data: [1980,1985,1990,1985],
                            itemStyle : { normal: {label : {show: true, position: 'top',textStyle:{color:'#B42E29'}}}},
                        },
                        {
                            name:'均值',
                            type:'line',
                            data: [1850,1877,1988,1976],
                            itemStyle : { normal: {label : {show: true, position: 'bottom',textStyle:{color:'#2D3E4C'}}}},
                        },
                        {
                            name:'对比差值',
                            type:'line',
                            yAxisIndex:1,
                            data: [5,3,3,2],
                            itemStyle : { normal: {label : {show: true, position: 'top',textStyle:{color:'#5F97A0'}}}},
                        }]
                };

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