多的不说直接上代码：

  1. <html>
    <html lang="en"><head>
        <meta charset="utf-8">
        <title>ECharts · Example</title>
        <script src="./ECharts · Example_files/els.js"></script>
    </head>
    <body>
  2.  
  3. <div id="min" style="height:400px"></div>
  4.  
  5. <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'));
  6.  
  7.                 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]
                            }
                        ]
                    };
  8.  
  9.                 // 为echarts对象加载数据 
                    myChart.setOption(option);
                    var ecConfig = require('echarts/config');
                    function eConsole(param) {
                        console.log(zoom);
  10.  
  11.                 }
                    myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
                }
        );
    </script>
  12.  
  13. <!-- Le javascript
    ================================================== -->
    <script src="./ECharts · Example_files/jquery.min.js"></script>
    <script src="./ECharts · Example_files/bootstrap.min.js"></script>
  14.  
  15. </body>
    <script src="./ECharts · Example_files/echarts.js"></script>
    </html>
  16.  
  17. 效果图：

  1.  

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

  1. 实现Echarts折线图的虚实转换

    需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...

  2. HighCharts基本折线图

    1.设计源码 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Projec ...

  3. 使用Highcharts生成折线图_at last

    //数据库数据的读取,读取数据后数据格式的转换,还有highchart数据源的配置,伤透了脑筋. anyway,最终开张了.哈哈! 数据库连接:conn_orcale.php <?php $db ...

  4. 解决echarts的叠堆折线图数据出现坐标和值对不上的问题

    原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...

  5. 使用Highcharts生成折线图与曲线图

    折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 如果 ...

  6. Highcharts之折线图

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决

    1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有 ...

  8. echarts双y轴折线图柱状图混合实时更新图

    先看下效果,自己用ps做了张gif图,发现很好玩啊..不喜勿喷 自己下载个echarts.min.js 直接上代码: <!DOCTYPE html><html><head ...

  9. highcharts 柱状图 折线图 混合 双纵轴显示

    $(function () { $('#container').highcharts({ chart: { zoomType: 'xy' }, title: { text: '' }, colors: ...

随机推荐

  1. JS filters-table简单过滤-Version 1

    初级版本: 输入框可检索,空格检索忽略 radio点击后会过滤 最后的两个输入框可根据age范围检索过滤 三个单独的功能,不能协同工作 <!DOCTYPE html> <html&g ...

  2. Android基础夯实--重温动画（四）之属性动画 ValueAnimator详解

    宝剑锋从磨砺出,梅花香自苦寒来:千淘万漉虽辛苦,吹尽狂沙始到金: 长风破浪会有时,直挂云帆济沧海 一.摘要 Animator类作为属性动画的基类,它是一个抽象类,它提供了实现动画的基本架构,但是我们不 ...

  3. oracle 时间格式转化以及计算

    --A表中的日期字段 create_date   例如:2017-08-05  转化为2017年8月5日   oracle 在这里的双引号会忽略 select to_char(to_date(tt.c ...

  4. log级别

    trace<debug<info<warn<error<fatal trace: 是追踪,就是程序推进以下,你就可以写个trace输出,所以trace应该会特别多,不过没 ...

  5. java实现的单点登录

    摘要:单点登录(SSO)的技术被越来越广泛地运用到各个领域的软件系统当中.本文从业务的角度分析了单点登录的需求和应用领域:从技术本身的角度分析了单点登录技术的内部机制和实现手段,并且给出Web-SSO ...

  6. COGS.1200 ganggang的烦恼

    背景 Zhang Gangrui 年纪大了,记性不好,保险箱的密码记不住了,他只记得密码是一个数的阶乘各个位的数相加的和,最后还有个T或F,代表这个数是否为素数,正好,你到他家去了,他请你帮他这个忙, ...

  7. opencv-flag

    http://blog.csdn.net/yiyuehuan/article/details/43701797 在Mat类中定义了这样一个成员变量: /*! includes several bit- ...

  8. 强大的云存储与应用管理工具DzzOffice1.0 Beta（大桌子办公）发布下载

    之前在9月份我们发布了一份内测版,得到了1000多位朋友参与下载测试.经过2个月,结合测试后朋友们反馈的问题,和开发建议.终于完成了这次Beta版的开发.感谢这两个月中参与测试,和帮助我们完善程序的朋 ...

  9. leetcode_894. All Possible Full Binary Trees

    https://leetcode.com/problems/all-possible-full-binary-trees/ 给定节点个数,求所有可能二叉树,该二叉树所有节点要么有0个子节点要么有两个子 ...

  10. template or render function not defined.

    template or render function not defined. H_婷 关注 2018.08.16 17:22 字数 106 阅读 3859评论 0喜欢 2 下午写 Vue $par ...