多的不说直接上代码：

<html>
<html lang="en"><head>
    <meta charset="utf-8">
    <title>ECharts · Example</title>
    <script src="./ECharts · Example_files/els.js"></script>
</head>
<body>

<div id="min" style="height:400px"></div>

<script type="text/javascript">
    require.config({
        paths: {
            echarts: './ECharts · Example_files'
        }
    });
    require(
            [
                'echarts',
                'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                'echarts/chart/bar'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('min'));

                var option = {
                    title : {
                        text: '未来一周气温变化',
                        subtext: '纯属虚构'
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['最高气温','最低气温']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : ['周一','周二','周三','周四','周五','周六','周日']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLabel : {
                                formatter: '{value} °C'
                            }
                        }
                    ],
                    series : [
                        {
                            name:'最高气温',
                            type:'line',
                            showAllSymbol:true,
                            symbol:'emptyCircle',
                            symbolSize:2,
                            smooth:true,   //这个就是关键点了，为true是不支持虚线的，实线就用true
                            itemStyle:{
                                normal:{
                                    lineStyle:{
                                        width:2,
                                        type:'solid'  //'dotted'虚线 'solid'实线
                                    }
                                }
                            },
                            data:[11, 11, 15, '-',  '-',  '-',  '-']
                        },
                        {
                            name:'最高气温',
                            type:'line',
                            showAllSymbol:true,
                            symbol:'emptyCircle',
                            symbolSize:2,
                            smooth:false,   //这个就是关键点了，为true是不支持虚线的，实线就用true
                            itemStyle:{
                                normal:{
                                    lineStyle:{
                                        width:2,
                                        type:'dotted'  //'dotted'虚线 'solid'实线
                                    }
                                }
                            },
                            data:[ '-',  '-', 15, 13, 12, 13, 10]
                        },
                        {
                            name:'最低气温',
                            type:'line',
                            showAllSymbol:true,
                            symbol:'emptyCircle',
                            symbolSize:2,
                            smooth:true,   //这个就是关键点了，为true是不支持虚线的，实线就用true
                            itemStyle:{
                                normal:{
                                    lineStyle:{
                                        width:2,
                                        type:'solid'  //'dotted'虚线 'solid'实线
                                    }
                                }
                            },
                            data:[1, -2, 2, 5,  '-',  '-',  '-']
                        },
                        {
                            name:'最低气温',
                            type:'line',
                            showAllSymbol:true,
                            symbol:'emptyCircle',
                            symbolSize:2,
                            smooth:false,   //这个就是关键点了，为true是不支持虚线的，实线就用true
                            itemStyle:{
                                normal:{
                                    lineStyle:{
                                        width:2,
                                        type:'dotted'  //'dotted'虚线 'solid'实线
                                    }
                                }
                            },
                            data:[ '-',  '-',  '-', 5, 3, 2, 0]
                        }
                    ]
                };

                // 为echarts对象加载数据 
                myChart.setOption(option);
                var ecConfig = require('echarts/config');
                function eConsole(param) {
                    console.log(zoom);

                }
                myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
            }
    );
</script>

<!-- Le javascript
================================================== -->
<script src="./ECharts · Example_files/jquery.min.js"></script>
<script src="./ECharts · Example_files/bootstrap.min.js"></script>

</body>
<script src="./ECharts · Example_files/echarts.js"></script>
</html>

效果图：

												


											
echarts模拟highcharts实现折线图的虚实转换的更多相关文章
	

    
								
  1. 实现Echarts折线图的虚实转换
		
    需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
    
		
    2. 
						
  2. HighCharts基本折线图
		
    1.设计源码 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Projec ...
    
		
    3. 
						
  3. 使用Highcharts生成折线图_at last
		
    //数据库数据的读取,读取数据后数据格式的转换,还有highchart数据源的配置,伤透了脑筋. anyway,最终开张了.哈哈! 数据库连接:conn_orcale.php <?php $db ...
    
		
    4. 
						
  4. 解决echarts的叠堆折线图数据出现坐标和值对不上的问题
		
    原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...
    
		
    5. 
						
  5. 使用Highcharts生成折线图与曲线图
		
    折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 如果 ...
    
		
    6. 
						
  6. Highcharts之折线图
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    7. 
						
  7. ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
		
    1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有 ...
    
		
    8. 
						
  8. echarts双y轴折线图柱状图混合实时更新图
		
    先看下效果,自己用ps做了张gif图,发现很好玩啊..不喜勿喷 自己下载个echarts.min.js 直接上代码: <!DOCTYPE html><html><head ...
    
		
    9. 
						
  9. highcharts 柱状图 折线图 混合 双纵轴显示
		
    $(function () { $('#container').highcharts({ chart: { zoomType: 'xy' }, title: { text: '' }, colors: ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 30款jQuery常用网页焦点图banner图片切换
			
    1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...
    
			
    2. 
						
  2. 掌握Spark机器学习库-08.7-决策树算法实现分类
			
    数据集 iris.data 数据集概览 代码 package org.apache.spark.examples.examplesforml import org.apache.spark.Spark ...
    
			
    3. 
						
  3. linux下mysql开启可访问
			
    修改mysql配置连接信息 将bind-address注释 vim /etc/my.cnf 修改mysql用户授权 mysql>GRANT ALL PRIVILEGES ON *.* TO '  ...
    
			
    4. 
						
  4. [Windows Server 2008] IIS配置伪静态方法（Web.config模式的IIS rewrite）
			
    ★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:安装伪静态(w ...
    
			
    5. 
						
  5. leetcode_1011. Capacity To Ship Packages Within D Days_binary search二分
			
    https://leetcode.com/problems/capacity-to-ship-packages-within-d-days/ 传送带每天有最大传送量V,对于n个货物[w1,w2,w3. ...
    
			
    6. 
						
  6. Codeforces Round #460 (Div. 2)_D. Substring_[dp][拓扑排序]
			
    题意:一个有向图,每个结点 被赋予一个小写字母,一条路径的value等与这条路径上出现次数最多的字母的数目,求该图的最大value 比赛时,用dfs超时,看官方题解用的dp和拓扑排序,a--z用0-2 ...
    
			
    7. 
						
  7. 使用Caliburn.Micro系列1：新建项目并引入CM
			
    一.WPF的几个MVVM模式实现 MVVMLight:小众的平民框架,实现简单粗暴.  pass:最近更新在15年 官网: http://www.mvvmlight.net/ 最近一篇内容全面的好文: ...
    
			
    8. 
						
  8. CAD交互绘制圆（com接口）
			
    CAD绘制图像的过程中,画圆的情况是非常常见的,用户可以在控件视区点取任意一点做为圆心,再动态点取半径绘制圆. 主要用到函数说明: _DMxDrawX::DrawCircle 绘制一个圆.详细说明如下 ...
    
			
    9. 
						
  9. CAD参数绘制多行文字（com接口）
			
    在CAD设计时,需要绘制多行文字,用户可以设置设置绘制文字的高度等属性. 主要用到函数说明: _DMxDrawX::DrawMText 绘制一个多行文字.详细说明如下: 参数 说明 DOUBLE dP ...
    
			
    10. 
						
  10. 【Pytorch】关于torch.matmul和torch.bmm的输出tensor数值不一致问题
			
    发现 对于torch.matmul和torch.bmm,都能实现对于batch的矩阵乘法: a = torch.rand((2,3,10))b = torch.rand((2,2,10))### ma ...
    
			
    11.