echarts 三種資料雙y軸顯示 (文末附帶完整程式碼)
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>