echarts模拟highcharts实现折线图的虚实转换

来源：互联网发布：剑灵极品龙女数据编辑：程序博客网时间：2024/04/30 14:38
多的不说直接上代码：
<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>效果图：
阅读全文
0 0