3.3 绘制曲线

周星星9527

发布于 2018-08-08 07:46:39

1.5K00

代码可运行

运行总次数：0

代码可运行

如何通过HTML5绘制曲线呢？可以百度搜索chart.js查看各类曲线绘制方法。此处我们介绍百度开源程序echarts绘制曲线。打开网页http://echarts.baidu.com/examples/#chart-type-line，找到折线图，我们开始一起学习：

点击进去，发现源码较少，只有十几行：

数据比较简单，我们绘制一个复杂的曲线例如sin(x)/x，看看曲线走势，首先定义两个数组存储坐标值。

var xData = [];
var yData = [];
然后循环赋值x和y的坐标值：
for (var i = 0; i <= 720; i++) {
    var x=(i-360)/2/Math.PI;
    var y=Math.sin(x)/x;
    xData.push(x);
    yData.push(y);
}

数据准备好后，修改如下配置里面的参数：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

修改后变为：

option = {
    xAxis: {
        type: 'category',
        data: xData,
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: yData,
        type: 'line'
    }]
};

结果如下，有没有被惊艳到：

最后，祭出所有代码：

1. <!DOCTYPE html>
2. <html style="height: 100%">
3.  <head>
4.  <meta charset="utf-8">
5.  </head>
6.  <body style="height: 100%;margin: 0">
7.  <div id="container"style="height:100%"></div>
8.  <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
9.  <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
10.  <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
11.  <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
12.  <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
13.  <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
14.  <script type="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
15.  <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
16.  <script type="text/javascript"src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
17.  <script type="text/javascript">
18. var dom= document.getElementById("container");
19. varmyChart = echarts.init(dom);
20. var app= {};
21. option= null;
22. varxData = [];
23. varyData = [];
24. for(var i = 0; i <= 720; i++) {
25.     varx=(i-360)/2/Math.PI;
26.     vary=Math.sin(x)/x;
27.     xData.push(x);
28.     yData.push(y);
29. }
30. option= {
31.     xAxis:{
32.         type:'category',
33.         data:xData,
34.     },
35.     yAxis:{
36.         type:'value'
37.     },
38.     series:[{
39.         data:yData,
40.         type:'line'
41.     }]
42. };
43. ;
44. if(option && typeof option === "object") {
45.     myChart.setOption(option,true);
46. }
47.  </script>
48.  </body>
49. </html>