自制echarts雙y軸折線圖
阿新 • • 發佈：2019-02-14
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>我是echarts</title> </head> <body> <div id='main' style='width: 100%; height: 450px;'></div> </body> <script src="http://guangzhou.auto.qq.com/js/echarts.js" type="text/javascript" charset="utf-8"></script> <script> getEchart(); function getEchart(){ var dataX =["2018-2-26","2018-2-24","2018-2-22","2018-2-20","2018-2-18","2018-2-16","2018-2-14","2018-2-12","2018-2-10","2018-2-8","2018-2-6","2018-2-4"], dataY1=[523, 700, 825, 620, 873, 943, 432, 721,201,340,462,243], dataY2=[175, 260, 345, 592, 320, 431, 142, 189,80,150,124,89]; var myChart=echarts.init(document.getElementById('main')); var option = { title:{ },grid:{ bottom: 70 },toolbox:{ show:true, right:160, feature:{ magicType: { type: ['line', 'bar'] }, saveAsImage:{}, dataView:{}, restore: {}, } },tooltip:{ trigger: 'axis' },dataZoom: [ { type:'slider', show: true, realtime: true, start: 0, end: 50 }, { type: 'inside', show: true, realtime: true, start: 0, end: 50 } ],legend:{ data:['PV','報名人數'], itemGap:30, itemWidth:70, itemHeight:12, }, xAxis:{ data: dataX, },yAxis:[{ name:'PV', nameTextStyle:{ color:'#666666', fontWeight:'bolder', fontSize:14 }, axisLabel:{ color:'#333333', fontSize:14 } },{ name:'報名人數', nameTextStyle:{ color:'#666666', fontWeight:'blod', fontSize:14 } }],series:[ { name: 'PV', type: 'line', data: dataY1, yAxisIndex: 0, symbol:'circle', symbolSize:9, //拐點標誌樣式 itemStyle: { normal: { color:'#FF5100', lineStyle:{color:'#FF5100',width:'3'}, areaStyle:{type:'default'} } }, //漸變橙白 areaStyle:{ normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(255,213,193,0.3)' }, { offset: 0.8, color: 'rgba(255,255,255,0.2)' }]) } } },{ name: '報名人數', type: 'line', data: dataY2, yAxisIndex: 1, symbol:'circle', symbolSize:9, //拐點標誌樣式 itemStyle: { normal: { color:'#2B9BF8', lineStyle:{color:'#2B9BF8',width:'3'}, areaStyle:{type:'default'} } }, //漸變藍白 areaStyle:{ normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(189,221,248,1)' }, { offset: 0.8, color: 'rgba(255,255,255,0.2)' }]) } } }] }; myChart.setOption(option); } </script> </html>