echart使用

落日映苍穹つ 2022-08-07 08:49 203阅读 0赞

<!DOCTYPE html>  
<head>  
    <meta charset="utf-8">  
    <title>折线图</title>  
    <script type="text/javascript" src="./echarts/build/dist/echarts.js"></script>  
    <style type="text/css">  
      \*\{margin: 0;padding: 0\}  
      \#bar\_chart\{width: 600px;height: 500px;margin-left: 10%;margin-top: 50px;\}  
    </style>  
</head>  
<body>  
    <div id="line\_chart" style="height:400px"></div>  
    <script type="text/javascript">  
        // 路径配置  
        require.config(\{ paths: \{echarts: './echarts/build/dist'\}\});  
        // 使用  
        require(  
            \[ 'echarts','echarts/chart/line'\],// 使用柱状图就加载bar模块，按需加载  
            function (ec) \{  
                var myChart = ec.init(document.getElementById('line\_chart')); // 基于准备好的dom，初始化echarts图表  
            option = \{  
            title : \{text: '服务器访问流量统计'\},//subtext: '纯属虚构'  
                tooltip : \{trigger: 'axis'\},//表示是否mouseover时显示当前坐标值  
                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 : \['2015-03-31\_12:00','2015-03-31\_12:05','2015-03-31\_12:10',  
               '2015-03-31\_12:15','2015-03-31\_12:20','2015-03-31\_12:25','2015-03-31\_12:30'  
               ,'2015-03-31\_12:35','2015-03-31\_12:40','2015-03-31\_12:45','2015-03-31\_12:50'  
               ,'2015-03-31\_12:55'\],name:'时间'\}\],  
               yAxis : \[\{type : 'value',axisLabel : \{formatter: '\{value\}'\},name:'访问量'\}\],  
  series : \[  
       \{  
           name:'杭州',  
           type:'line',  
           data:\[11, 11, 15, 13, 12, 13, 10,22,18,15,17,16\]  
           // markPoint : \{  
           //     data : \[  
           //         \{type : 'max', name: '最大值'\},  
           //         \{type : 'min', name: '最小值'\}  
           //     \]  
           // \},  
           // markLine : \{  
           //     data : \[  
           //         \{type : 'average', name: '平均值'\}  
           //     \]  
           // \}  
       \},  
       \{  
           name:'北京',  
           type:'line',  
           data:\[15, 22, 24, 15, 13, 12, 10,21,26,24,23,20\]  
           // markPoint : \{  
           //     data : \[  
           //         \{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5\}  
           //     \]  
           // \},  
           // markLine : \{  
           //     data : \[  
           //         \{type : 'average', name : '平均值'\}  
           //     \]  
           // \}  
       \},  
   \]  
       \};  
                      
          
                // 为echarts对象加载数据   
                myChart.setOption(option);   
            \}  
        );  
    </script>

</body>

![Center][]

[Center]: /images/20220805/4ed84e4fa0474a3db7e93b5895b344ed.png