【echart数组数据】echarts两条或两条以上x轴不同的线合并x轴含有不连续数据

一种方法是使用空字符串填充，类似于[1,2,3,'','','',6,7,8]
另一种方法是使用坐标，如[[0,0],[3,3]]

以下为使用坐标示例

<!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>

【echart数组数据】echarts两条或两条以上x轴不同的线合并x轴含有不连续数据相关推荐

Java面试题：在一个递增的数组里面，找出任意两个数的和等于100，编写程序输出这些数对，可以假设数组中不存在重复元素
本文使用两种算法来实现,分别是二分查找法和插值查找法,发现插值查找法更好,更快地找到需要的数据. 代码如下: package com.moson.search;import java.util.Arr ...
java整型转换为数组_基于java中byte数组与int类型的转换(两种方法)
java中byte数组与int类型的转换,在网络编程中这个算法是最基本的算法,我们都知道,在socket传输中,发送.者接收的数据都是 byte数组,但是int类型是4个byte组成的,如何把一个整形 ...
xlsx表格怎么筛选重复数据_excel表格如何筛选重复数据在Excel表格的两列数据中提取不重复值的四种方法...
excel表格如何筛选重复数据在Excel表格的两列数据中提取不重复值的四种方法,最近到了季度汇报的时候,掌握一手excel技能在此刻显得多么重要,为了是你的excel看起来更高大上,今天教大家设置 ...
如何排两列的序计算机考试,excel中两列数据怎么一起排序?excel两列同时排序的方法...
excel中两列数据怎么一起排序?excel两列同时排序的方法腾讯视频/爱奇艺/优酷/外卖充值4折起我们在使用Excel对数列排序时,有时会碰到需要对两列数据同时排序,下面就跟大家详细介绍操作方 ...
阿里开发者招聘节 | 面试题14：如何实现两金额数据相加（最多小数点两位）
为帮助开发者们提升面试技能.有机会入职阿里,云栖社区特别制作了这个专辑--阿里巴巴资深技术专家们结合多年的工作.面试经验总结提炼而成的面试真题这一次将陆续放出(面试题官方参考答案将在专辑结束后统一汇总 ...
opencv_python拉动进度条实现两幅图片融合及一幅图片自动平滑切换成另一张图片
一.拉动进度条实现两幅图片融合: 主要函数:cv2.createTrackbar()相关参数 int createTrackbar(const string& trackbarname, co ...
R语言ggplot2可视化使用不连续的y轴、中断的Y轴来可视化数值分布差异很大的数据实战：把数据轴分为两个区间或者多个区间来匹配不同区间数据的可视化（因为有的数据可能10附近，有的数值可能1W附近）
R语言ggplot2可视化使用不连续的y轴.中断的Y轴来可视化数值分布差异很大的数据实战:把数据轴分为两个区间或者多个区间来匹配不同区间数据的可视化(因为有的数据可能10附近,有的数值可能1W附近) ...
R语言两个dataframe纵向合并或者为dataframe添加数据行实战
R语言两个dataframe纵向合并或者为dataframe添加数据行实战目录 R语言两个dataframe纵向合并或者为dataframe添加数据行实战
Leetcode刷题 1441题：用栈操作构建数组（基于python3和c++两种语言）
Leetcode刷题 1441题: 用栈操作构建数组(基于python3和c++两种语言) ** 题目: ** 给你一个目标数组 target 和一个整数 n.每次迭代,需要从 list = {1,2 ...

【echart数组数据】echarts两条或两条以上x轴不同的线合并x轴含有不连续数据

【echart数组数据】echarts两条或两条以上x轴不同的线合并x轴含有不连续数据相关推荐

最新文章

热门文章

【echart数组数据】echarts两条或两条以上x轴不同的线合并x轴 含有不连续数据

【echart数组数据】echarts两条或两条以上x轴不同的线合并x轴 含有不连续数据相关推荐

最新文章

热门文章

【echart数组数据】echarts两条或两条以上x轴不同的线合并x轴含有不连续数据

【echart数组数据】echarts两条或两条以上x轴不同的线合并x轴含有不连续数据相关推荐