Uncaught TypeError: echarts.dataTool.prepareBoxplotData is not a function at 【解决】

电玩女神 2024-03-26 15:07 49阅读 0赞

#### Uncaught TypeError: echarts.dataTool.prepareBoxplotData is not a function at 【解决】 ####

今天使用Echarts 绘制箱线图时，按照一个书上的代码，笔者将其【绝对无错】 的敲了下来，是下面这样的

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>箱线图</title>
        <script src="../js/echarts.js"></script>
    </head>
    <body>
    
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var data = echarts.dataTool.prepareBoxplotData([
            [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
            [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
            [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
            [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
            [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
        ]);
    
        option = {
          
            title: [
                {
          
                    text: '箱线图',
                    left: 'center',
                },
                {
          
                    text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',
                    borderColor: '#999',//文字框边界颜色
                    borderWidth: 1,//文字框边界宽度
                    textStyle: {
          
                        fontSize: 12//该部分文字大小
                    },
                    left: '10%',//该部分文字到左部的百分比位置
                    top: '90%'//该部分文字到顶部的百分比位置
                }
            ],
            tooltip: {
          
                trigger: 'item',
                axisPointer: {
          
                    type: 'shadow'//鼠标悬停在箱上会显示阴影
                }
            },
            grid: {
          
                left: '10%',//可视化网格距离左部百分比位置
                right: '10%',//可视化网格距离右部百分比位置
                bottom: '15%'//可视化网格距离底部百分比位置
            },
            xAxis: {
          
                type: 'category',
                data: data.axisData,//使用data处理后的axisData数据
                axisLabel: {
          
                    formatter: '实验 {value}'//x轴名称模板
                }
            },
            yAxis: {
          
                type: 'value',
                name: '',
                splitArea: {
          
                    show: true//y轴网格间阴影区分显示
                }
            },
            series: [
                {
          
                    type: 'boxplot',
                    data: data.boxData,//使用data的处理后的boxData数据
                    tooltip: {
          //以下是设置tooltip的显示数据和显示格式
                        formatter: function (param) {
          
                            return [
                                '实验 ' + param.name + ': ',
                                '上限: ' + param.data[5],
                                '上四分位数: ' + param.data[4],
                                '中位数: ' + param.data[3],
                                '下四分位数: ' + param.data[2],
                                '下限: ' + param.data[1]
                            ].join('<br/>');
                        }
                    }
                },
                {
          
                    name: 'outlier',
                    type: 'scatter',//使用散点图显示异常值
                    data: data.outliers//异常值数据
                }
            ]
        };
    
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    </body>
    </html>

![在这里插入图片描述][5ec27a38ffbd4059b2ddcf7c898ff4b9.png]

笔者非常自信的直接打开浏览器进行渲染，

![在这里插入图片描述][8525972d3d4d4e6cb3355d9afbdec3f4.png]

结果就是啥也，没有，笔者又疑惑的打开了控制台

![在这里插入图片描述][162cca3d9d2d4457ba71e034b74ebab5.png]

对数据进行处理的这个函数有点问题，

OK， 直接给解决办法吧

其实我们可以看到Echarts 官方仓库中给的源码

[https://github.com/apache/echarts/tree/5.4.1/dist][https_github.com_apache_echarts_tree_5.4.1_dist]

![在这里插入图片描述][64bc78456f994a44909db39585884276.png]

需要导入的东西就是它了，笔者直接下载了下来

![在这里插入图片描述][ea41d05a0e454f13b649cbbba81b25f9.png]

放到了这里，OK，引入js

![在这里插入图片描述][ad6ede54c9e24ad5b2356c5ebd9a6ab5.png]

再来一次

![在这里插入图片描述][8e115a86e8064caf8f22518d9ce9e7b8.png]

问题解决。

[5ec27a38ffbd4059b2ddcf7c898ff4b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c13217e486e7461b83590dfc8dbfb2ad.png
[8525972d3d4d4e6cb3355d9afbdec3f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1e02540c915249c589ac53a7ff0cfcf2.png
[162cca3d9d2d4457ba71e034b74ebab5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c94115592735490a82c7af306843f063.png
[https_github.com_apache_echarts_tree_5.4.1_dist]: https://github.com/apache/echarts/tree/5.4.1/dist
[64bc78456f994a44909db39585884276.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6f0de57c0b9c41a6b0f10e775b013a80.png
[ea41d05a0e454f13b649cbbba81b25f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f89924583aa44a559f5a9808c60fb1f6.png
[ad6ede54c9e24ad5b2356c5ebd9a6ab5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e8ef8bb518cf473dbde2ac7b2d36302c.png
[8e115a86e8064caf8f22518d9ce9e7b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/51d17660492f40c09a1ccd0f7fdc0eba.png