欢迎使用CSDN-markdown编辑器

最新推荐文章于 2021-01-07 23:01:28 发布

Ealiser

最新推荐文章于 2021-01-07 23:01:28 发布

阅读量182

点赞数

分类专栏：前端-Echarts 文章标签：前端-Echarts

本文链接：https://blog.csdn.net/Ealiser/article/details/78728014

版权

前端-Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码写的很简单，存下来，作为以后的参考。最后附上一个简单Echarts例子。

txt文件里面的内容是这样的：
201401,362
201402,478
201403,866
201404,170
201405,488
201406,1850
201407,258
201408,856
201409,458
201410,520
201411,1950
201412,4116

代码如下:

<!DOCTYPE html>
<html> 
<head> 
    <title>数据直方图</title>
    <meta charset="utf-8">  
        <script type="text/javascript" src="http://echarts.baidu.com/dist/echarts.simple.min.js" charset="UTF-8"> </script>
        <script type="text/javascript" charset="UTF-8">  
            var a=new Array();  

          function draw(num,travel){//画图函数：利用echarts
                var myChart = echarts.init(document.getElementById('chart'));
                var x_data = [];
                var y_data = [];
                for(var i=0;i<=travel.length;i=i+2){

                    x_data.push(num[i]);
                    y_data.push(parseInt(num[i+1]));
                    }
                console.log(x_data);
                console.log(y_data);


                var options={
                        //定义一个标题
                        title:{
                            text:'数据直方图'//直方图名字
                        },
                        legend:{
                            data:['销量']//数据名字，需要与name相同
                        },
                        //X轴设置
                        xAxis:{
                            data:x_data
                        },
                        yAxis:{
                        },
                        //name=legend.data的时候才能显示图例
                        series:[{
                            name:'销量',//与data相同
                            type:'bar',
                            data: y_data
                        }]

                }
                myChart.setOption(options);

        }
            function handleFileSelect(evt) {  //读取数据
                var files = evt.target.files; // FileList object 
                if(files[0])  
                {  
                    var reader = new FileReader();  
                    reader.readAsText(files[0]);  
                    reader.onload = loaded;      
                }  
            }  

            function loaded(evt) {  //对数据进行处理
                //奇数为x轴，偶数为y轴
                var fileString = evt.target.result;   
                var strs = new Array();
                travel = fileString.split("\n");
                var number = travel.join(",") ;
                num = number.split(",") ;
                draw(num,travel) ;

            } 
        </script>  

 </head>  
<body>  
    <!-- 设定按钮 -->
    <input type="file" id="file" name="files[]" multiple />  
    <script type="text/javascript">  
        var btn=document.getElementById('file');  
        btn.addEventListener('change', handleFileSelect, false);      
    </script>  
    <!-- 设定画布 -->
    <div id="chart" style="width:500px;height:500px;text-align: center"></div>
</body>  
</html>

简答Echarts例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据直方图</title>
    <script type="text/javascript" src="ECharts/echarts.js">

    </script>
</head>
<body>
    <div id="chart" style="width:400px;height:400px;"></div>
</body>
<script type="text/javascript">
    // 初始化图表标签
    var myChart = echarts.init(document.getElementById('chart'));
    var options={
        //定义一个标题
        title:{
            text:'测试成绩'
        },
        legend:{
            data:['销量']
        },
        //X轴设置
        xAxis:{
            data:['60分','70分','80分','90分','100分']
        },
        yAxis:{
        },
        //name=legend.data的时候才能显示图例
        series:[{
            name:'销量',
            type:'bar',
            data:['12','32','45','21','1']
        }]

    };
    myChart.setOption(options);
</script>
</html>