多的不说直接上代码:
<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> 效果图: