散点图，盒须图，折线图混放在一个echarts

喔烨鸭

已于 2023-12-12 20:51:05 修改

阅读量976

点赞数 8

文章标签： echarts 前端 javascript

于 2023-12-12 19:10:01 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45432996/article/details/134562803

版权

本文详细描述了如何在Echarts库中创建一个包含箱线图、散点图和折线图的混合图表，展示了不同类型的图表如何在一个选项对象中配置和展示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

散点图，何须图，折线图混放在一个echarts
在这里插入图片描述

option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data:['盒须图1','盒须图2','折线图','散点图']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['周一','周二','周三','周四','周五','周六','周日'],
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisTick: {
                          alignWithLabel: true
                    }
                }
            ],
            yAxis: {
                    type: 'value',
                    min: 0,
                    max: 100,
                    position: 'left',
                    axisLabel: {
                        formatter: '{value} ml'
                    }
                },
            series: [
                {
                    name:'盒须图1',
                    type:'boxplot',
                    z:1,
                    data:[
                        [],//10, 30, 50, 80, 100
                        [15,35, 55, 85, 90],
                        [10, 30, 50, 80, 100],
                        [],
                        [],
                        [],[],
                    ]
                },
                
                {
                    name:'散点图4',
                    type:'scatter',
                    color:"#666",
                    data:[
                        [0,80],[0,86],[1,61.2],[3,10], [4,30], [4,50], [5,55]
                    ]
                },
                {
                    name:'折线图',
                    type:'line',
                    data:[13, 26, 30, 46, 50, 60, 56]
                },
                {
                    name:'散点图',
                    type:'scatter',
                    color:"#f00",
                    data: [
                        [0, 10],
                        [1, 20],
                        [2, 31],
                        [3, 12],
                        [4, 50],
                        [5, 60],
                        [6, 70]
                    ]
                }
            ]
        };