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>