JavaScript / 前端

错误

修改源代码ecStat.js

这是修改后的js文件：链接：https://pan.baidu.com/s/14AHuGprIobGzCipus55Rug 提取码：7wbl 

// 将return +((stop >= start ? step1 : -step1).toFixed(-precision));
// 改为
return +((stop >= start ? step1 : -step1).toFixed(precision));
// 将var mid = -Math.floor((start + end) / 2);
// 改为
var mid = Math.floor((start + end) / 2);

绘制直方图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>直方图</title>
    // 引入 js 文件
    <script src="/static/js/echarts.js"></script>
    <script src="../static/js/ecStat.js"></script>
</head>
<body>
<div id="main1" style="width: 1000px;height: 500px"></div>
// JavaScript代码
<script type="text/javascript">
        var myChart1 = echarts.init(document.getElementById('main1'));
        // 传入的数据
        var data = [ 29.26, 45.68, 60.25, 46.79, 6.17, 31.36, 22.72, 12.84, 26.05, 27.78, 39.75, 53.21,];
        // 调用ecStat.histogram方法
        var bins = ecStat.histogram(data);
        var myChart1 = echarts.init(document.getElementById('main1'));

        var option1 = {
            title: {
                text: 'Girths of Black Cherry Trees',
                left: 'center',
                top: 20
            },
            color: ['rgb(25, 183, 207)'],
            grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'value',
                scale: true, //这个一定要设，不然barWidth和bins对应不上
            }],
            yAxis: [{
                type: 'value',
            }],
            series: [{
                name: 'height',
                type: 'bar',
                barWidth: '99.3%',
                label: {
                    normal: {
                        show: true,
                        position: 'insideTop',
                        formatter: function(params) {
                            return params.value[1];
                        }
                    }
                },
                data: bins.data
            }]
        };
        myChart1.setOption(option4);
</script>
</body>
</html>

结果

发表回复