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多个坐标轴多组/一组数据 - 温度降水量示例相关推荐

将一组数据按每组n个元素进行分组
近期项目中需要将一组数据按个数分组的场景 /*** 将一组数据固定分组,每组n个元素* @param source 要分组的数据源* @param n 每组n个元素* @param <T&g ...
c++输出txt格式循环一组数据后换行再循环一次_numpy、pandas以及用pandas做数据分析的案例...
本文也是秦路老师python教程的学习笔记.这篇也是发给超哥看的:很多人说python很简单很好学,也有很多人说python没有java和c的功能强大.但是这都不重要,重要的是我们想学了,想画图也好做 ...
MITRE：利用微生物组时间序列数据推断与宿主状态变化相关的特征
文章目录 MITRE:利用微生物组时间序列数据推断与宿主状态变化相关的特征热心肠日报写在前面主要结果图1. MITRE通过对时间序列的微生物群落的系统发育信息进行学习,同宿主的状态改变联系起来 ...
怎么计算一组数据的波动_[理论+spss实战]一组数据的描述性统计分析
长按二维码,关注[学术点滴]获取更多资讯. 问:拿到一组数据首先要干什么?答:进行数据的基本分布描述本次推文分两部分第一部分:理论部分第二部分:SPSS实战操作操作者微信公众号[学术点滴] ...
求对一组数据进行排名的算法
为什么80%的码农都做不了架构师?>>> 我现在有一组数据,比如:25,19,29,3 怎么用java获得这组数据的排名,获得排名的结果应该是3,2,4,1 如果有相等的数据, ...
两组的数据平均值合并_不要进入数据陷进
学习统计让我们不再被一些数据迷惑进入数据陷进(例如平均工资)从而做出正确的决策.描述性统计分析包括数据的分布.集中.波动的测度指标. 平均值:一组数据的加和除以数据的个数(容易随极端值变化) 中位数: ...
如何在分组报表中实现组内数据补空行及组内页码
在对报表数据进行打印时,经常会要求进行精确打印,比如一张纸能打印 20 行数据,如果超过就分页,如果不满 20 行,则在数据下方进行补够空行.这种情况最常见于银行对账信息等明细数据的打印.同时,在某些 ...
同期对比图_Excel展示两组同期数据，这种左右对比图真好看，只需六步搞定
Excel数据展示过程中,一幅好的图表不仅仅代表的是美观,而且也能更加显而易见的看清楚数据的情况.对两组同期数据做对比图,这种情况相信大家都见到过. 相信许多同学在进行这样的两组数据对比的时候,一般都 ...
基于单细胞多组学数据无监督构建基因调控网络
在单细胞分辨率下识别基因调控网络(GRNs,gene regulatory networks)一直是一个巨大的挑战,而单细胞多组学数据的出现为构建GRNs提供了机会. 来自:Unsupervised ...

Echarts多个坐标轴多组/一组数据 - 温度降水量示例

一个坐标轴一组数据

一个坐标轴多组数据

Echarts多个坐标轴多组/一组数据 - 温度降水量示例相关推荐

最新文章

热门文章