Echarts之折线图(面积图)制作

最新推荐文章于 2025-05-15 17:38:34 发布

顺从

最新推荐文章于 2025-05-15 17:38:34 发布

阅读量8.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/weixin_40545389/article/details/78855979

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用 Echarts 制作折线图和面积图。首先，提供了官方学习资源链接，接着讲解了 ECharts 的引入方式，强调了不再需要AMD加载器。然后，详细阐述了如何初始化ECharts实例并设置选项来创建一个简单的图表。最后，提到了Echarts在实际应用中的一个例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方学习地址:

http://echarts.baidu.com/examples.html#chart-type-line

W3C参看学习地址:
https://www.w3cschool.cn/echarts_tutorial/

引入 ECharts

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

应用之一:

<div class="pad-lr-10">
  <div class="explain-col">    
		<?php echo  "基站名"?>：
		 <select id="drop_station">
        <option value="">请选择</option>
		    <?php echo $station;?>
		</select>
		<input type="button" id="startcalib"  style="margin-left:10px;" class="button" value="<?php echo L('startcalib')?>">
  </div>
  <div id="lineplot"  style="margin-top:6px;float:left;width:100%;height:300px;border:1px solid #ebebeb "></div>
</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <!-- ECharts单文件引入 -->
     <!--<script src="<?php echo JS_PATH?>aristone/dist/echarts.js"></script>-->
    <script src="<?php echo JS_PATH?>aristone/dist/echarts-line.js"></script>
    <script type="text/javascript"> 
    	var myChart =echarts.init(document.getElementById('lineplot'));   
    	option = {
    	    tooltip: {
    	        trigger: 'axis',
    	        position: function (pt) {
    	            return [pt[0], '10%'];
    	        }
    	    },
    	    title: {
    	    	text: '全线时序图',
  		        subtext: 'KM'
    	    },
    	    toolbox: {
    	        feature: {
    	            dataZoom: {
    	                yAxisIndex: 'none'
    	            },
    	            restore: {},
    	            saveAsImage: {}
    	        }
    	    },
    	    xAxis:[{
    	        type: 'category',
    	        boundaryGap: false,
    	        data : function (){
	                var list = [];
	                var n = 0;
	                while (n++ < 4000) {
	                    list.push(n*5);
	                }
	                return list;
	            }()
    	    }] ,
    	    grid: {
    	        left: '5%',
    	        right:'5%'
    	    },
    	    yAxis:[{
    	        type: 'value',
    	        boundaryGap: [0, '100%']
    	    }] ,
    	    dataZoom: [{
    	        type: 'inside',
    	    }, {
    	        start: 0,
    	        end: 10,
    	        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
    	        handleSize: '100%',
    	        handleStyle: {
    	            color: '#fff',
    	            shadowBlur: 3,
    	            shadowColor: 'rgba(0, 0, 0, 0.6)',
    	            shadowOffsetX: 2,
    	            shadowOffsetY: 2
    	        }
    	    }],
    	    legend: {
                data:['OTDR']
            },
    	    series: [
    	        {
    	            name:'OTDR',
    	            type:'line',
    	            smooth:true,
    	            symbol: 'none',
    	            sampling: 'average',
    	            itemStyle: {
    	                normal: {
    	                    color: 'rgb(255, 70, 131)'
    	                }
    	            },
    	            areaStyle: {
    	                normal: {
    	                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    	                        offset: 0,
    	                        color: 'rgb(255, 158, 68)'
    	                    }, {
    	                        offset: 1,
    	                        color: 'rgb(255, 70, 131)'
    	                    }])
    	                }
    	            },
    	            data:function (){
    	                var list = [];
    	                for (var i = 1; i <= 10; i++) {
    	                    list.push(Math.round(Math.random()* 30));
    	                }
    	                return list;
    	            }()
    	        }
    	    ]
    	};
    	myChart.setOption(option);
    	$('#drop_station').change(function(){
            var staid = $('#drop_station').val();
            var pc_hash='<?php echo $pc;?>';
            var url="?m=isystem&c=picked_station&a=json_station&caid="+staid+"&pc_hash="+pc_hash;
            $.get(url,function(data){
                var data = eval("("+data+")");
                var xdata1=[];
                len=data.length/data.precision;
                for(var i=0;i<len;i++){                       
                   xdata1.push(i*data.precision); 
                }
                option.xAxis[0].data =(xdata1);
                myChart.clear();
                myChart.setOption(option);
            });
        });
        document.getElementById("startcalib").οnclick=function(){
            //var wsUri ="ws://www.diii.com:1235/";
            var output; 
            var staid = $('#drop_station').val(); 
            var val = $('#startcalib').val();
            if(val == '开始'){
                $('#startcalib').val('停止');
                var station = staid+'-'+3 ;
            }else{
                $('#startcalib').val('开始');
                var station = staid +'-'+ 2;
            }

                var listdata=[];
                for(var i=0;i<2000;i++){                       
                  listdata.push(Math.random() * 200); 
                }
                option.series[0].data=listdata;
                myChart.setOption(option);
            
//             websocket = new WebSocket(wsUri);
//             websocket.onopen = function(){
//                 websocket.send(station);
//             };
//             websocket.onmessage=function(evt){
                
//                 var data = eval("("+evt.data+")"); 
//                 	  console.log(data);
//                 var listdata=[];
               
//                 var ydata1=[];
//                 var len = data.otdr_array.length;
//                 for(var i=0;i<len;i++){                       
//                      listdata.push(data.otdr_array[i]); 
//                 }
//                 option.series[0].data=listdata;
//                 myChart.setOption(option);
//             };
        } 
    </script>