Echarts多个坐标轴多组/一组数据 - 温度降水量示例
生活随笔
收集整理的這篇文章主要介紹了
Echarts多个坐标轴多组/一组数据 - 温度降水量示例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一個坐標軸一組數據
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>echarts</title><!-- <script src="/static/js/jquery-1.7.2.min.js" charset="UTF-8"></script> --><script src="static/js/echarts.js"></script></head><body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var a = 123; //測試變量作用域// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {//標題title: {text: '溫度-降水量示例'},tooltip: {show: true,trigger: 'axis',axisPointer: {type: 'cross',animation: false,label: {show: true,backgroundColor: '#0D4286'}}},toolbox: {show: true,feature: {mark: {show: true},dataZoom: {//yAxisIndex: 'none'yAxisIndex: 0},dataView: {show: true,readOnly: false,},magicType: {show: true,type: ['line', 'bar']},restore: {show: true,},saveAsImage: {show: true,}}},//圖例,可以通過點擊選擇顯示和隱藏某組數據legend: {data: ['降水量', '平均溫度1']},dataZoom: [{id: 'dataZoomX',show: true,realtime: true,orient: "horizontal",start: 0,end: 50,dataBackground: {lineStyle: {color: '#95BC2F'},},textStyle: {color: "#ffffff"},},],//x軸值xAxis: {type: 'category',axisLabel: {rotate: 45,textStyle: {fontSize: '8'}},data: ['2019-01-01','2019-01-02', '2019-01-03','2019-01-04', '2019-01-05', '2019-01-06', '2019-01-07', '2019-01-08']},//如果不定義y軸,會根據數據自動生成y軸yAxis: [{type: 'value',name: '水量',min: 0,max: 120,interval: 50,axisLabel: {formatter: '{value}毫升'}}, {type: 'value',name: '溫度',min: 0,max: 27,interval: 5,axisLabel: {formatter: '{value}度'}}],//傳入的數據(可以是多個數組)series: [{name: '降水量',type: 'line',yAxisIndex: 0,data: [80, 89, 85, 108, 109, 120]}, {name: '平均溫度1',type: 'line',yAxisIndex: 1,data: [[0,0],[3,1]]}, ]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html> </html>一個坐標軸多組數據
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>echarts</title><!-- <script src="/static/js/jquery-1.7.2.min.js" charset="UTF-8"></script> --><script src="static/js/echarts.js"></script></head><body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var a = 123; //測試變量作用域// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {//標題title: {text: '溫度-降水量示例'},tooltip: {show: true,trigger: 'axis',axisPointer: {type: 'cross',animation: false,label: {show: true,backgroundColor: '#0D4286'}}},toolbox: {show: true,feature: {mark: {show: true},dataZoom: {//yAxisIndex: 'none'yAxisIndex: 0},dataView: {show: true,readOnly: false,},magicType: {show: true,type: ['line', 'bar']},restore: {show: true,},saveAsImage: {show: true,}}},//圖例,可以通過點擊選擇顯示和隱藏某組數據legend: {data: ['降水量', '平均溫度1']},dataZoom: [{id: 'dataZoomX',show: true,realtime: true,orient: "horizontal",start: 0,end: 50,dataBackground: {lineStyle: {color: '#95BC2F'},},textStyle: {color: "#ffffff"},}, ],//x軸值xAxis: {type: 'category',axisLabel: {rotate: 45,textStyle: {fontSize: '8'}},data: ['2019-01-01', '2019-01-02', '2019-01-03', '2019-01-04', '2019-01-05', '2019-01-06', '2019-01-07','2019-01-08']},//如果不定義y軸,會根據數據自動生成y軸yAxis: [{type: 'value',name: '水量',min: 0,max: 120,interval: 50,axisLabel: {formatter: '{value}毫升'}}],//傳入的數據(可以是多個數組)series: [{name: '降水量',type: 'line',yAxisIndex: 0,data: [80, 89, 85, 108, 109, 120]}, {name: '降水量1',type: 'line',yAxisIndex: 0,data: [86, 98, 90, 120, 117, 126]}, ]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html> </html>總結
以上是生活随笔為你收集整理的Echarts多个坐标轴多组/一组数据 - 温度降水量示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JS读取嵌套的JSON数据
- 下一篇： Echarts给坐标轴添加自定义属性