echarts实现双Y轴之散点和折线图
生活随笔
收集整理的這篇文章主要介紹了
echarts实现双Y轴之散点和折线图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><title></title><script src="echarts.js"></script> </head><body><div id="box" style="width: 600px; height:400px;"></div><script>// 獲取到這個DOM節點，然后初始化var myChart = echarts.init(document.getElementById("box"));data_line=[['100', '800'],['1100', '400'],]data_scatter=[ ['100', '800'],['200', '300'],['300', '500'],['400', '300'],['500', '100'],['600', '400'],['700', '500'],['800', '200'],['900', '800'],['1000', '300'],['1100', '500'],['1200', '300'],['1300', '100'],['1400', '400'],['1500', '500'],['1600', '200']]// option 里面的內容基本涵蓋你要畫的圖表的所有內容var option = {backgroundColor: '#FBFBFB',tooltip: {trigger: 'axis'},legend: {data: ['充值', '消費']},calculable: true,xAxis:[{axisLabel: {rotate: 30,interval: 0},axisLine: {lineStyle: {color: '#CECECE'}},type: 'value',boundaryGap: false,splitLine: {show: true,interval: 'auto',lineStyle: {color: ['#FBFBFB']}},axisTick: {show: false},}],yAxis: [{type: 'value',splitLine: {lineStyle: {color: ['#D4DFF5']}},axisLine: {lineStyle: {color: '#CECECE'}}}],axisTick: {show: false},series: [{name: '充值',type: 'line',symbol: 'none',smooth: 0.3,color: ['#66AEDE'],// data:[800, 300, 500, 800, 300, 600,500,600]data: data_line,lineStyle: {normal: {width: 5}}},{name: '消費',type: 'scatter',symbol: 'circle',color: ['#90EC7D'],// data: [600, 300, 400, 200, 300, 300, 200, 400]data: data_scatter,}]};// 一定不要忘了這個，具體是干啥的我忘了，官網是這樣寫的使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script> </body></html>效果圖：
? ? ? ? ? ? ? ? ? ? ? ? ? ??
參考自：https://www.jianshu.com/p/a17ab6913cb3
總結
以上是生活随笔為你收集整理的echarts实现双Y轴之散点和折线图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 戴尔笔记本电脑开机黑屏怎么办_戴尔笔记本
- 下一篇： TensorFlow8-mnist手写数