echarts 盒须图配置

yanggg_only

已于 2022-06-27 11:35:30 修改

阅读量1k

点赞数

分类专栏： echarts盒须图文章标签： echarts 前端 javascript

于 2022-06-23 17:42:08 首次发布

本文链接：https://blog.csdn.net/weixin_45261457/article/details/125431700

版权

echarts盒须图专栏收录该内容

1 篇文章 1 订阅

订阅专栏

效果图
下载依赖包地址
cv工程师：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./js/echarts.min.js"></script>
    <script src="./js/extension/dataTool.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'));
        // echarts.dataTool.prepareBoxplotData--处理盒须图需要的数据格式
        let ydata = echarts.dataTool.prepareBoxplotData([
            [132.43, 106.84, 123.98, 117.85, 121.02],
            [133.67, 106.24, 123.98, 117.85, 121.02],
            [135.43, 106.94, 123.98, 117.85, 121.02],
            [132.43, 106.84, 128.98, 117.85, 121.02],
            [137.43, 106.84, 123.98, 117.85, 121.02],
            [132.43, 109.84, 123.98, 115.85, 121.02],
            [132.43, 116.84, 123.98, 117.85, 131.02],
        ], {
            boundIQR: 'none',//是否需要计算
        })
        let option = {
            tooltip: {
                trigger: 'axis',
                backgroundColor: '#7d7d7d',
                color: "#fff",
                textStyle: {
                    color: "#fff"
                },
                axisPointer: {
                    type: 'line',
                    lineStyle: {
                        width: 1,
                        color: "#84afaa",
                        type: "dashed"
                    }
                }
            },
            grid: {
                left: '10%',
                right: '15%',
                bottom: '8%'
            },
            xAxis: {
                type: 'category',
                name: '生料量（吨）',
                boundaryGap: true,
                nameGap: 30,
                nameLocation: "middle",
                splitArea: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: [445, 450, 455, 460, 465, 470, 475]
            },
            yAxis: [{
                type: 'value',
                name: '单\n位\n产\n量\n煤\n耗\n︵\n吨\n︶',
                nameGap: 40,
                nameRotate: 360,
                nameLocation: "center",
                splitArea: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
            }, {
                type: 'value',
                name: `{legend|} {value|平均值}`,
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                nameTextStyle: {
                    rich: {
                        legend: {
                            width: 50,
                            height: 2,
                            backgroundColor: "#fbd173"
                        }
                    }
                }
            }, ],
            series: [{
                    name: '',
                    type: 'boxplot',
                    itemStyle: {
                        borderColor: "#bfdbf2",
                        color: "#80beee"
                    },
                    data: ydata.boxData,
                },
                {
                    name: '平均值',
                    type: 'line',
                    color: "#fbd173",
                    yAxisIndex: 1,
                    showSymbol: false,
                    data: [120.77, 120.26, 120.22, 120.38, 119.9, 121.79, 120.65]
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>

</html>