echarts默认不显示部分折线，鼠标移动点击显示

最新推荐文章于 2024-08-20 14:33:54 发布

Bigillusion

最新推荐文章于 2024-08-20 14:33:54 发布

阅读量2.3k

点赞数 6

本文链接：https://blog.csdn.net/Rainbow_JCH/article/details/118936997

版权

Echarts 图表配置图例交互折线图数据可视化

关键词由CSDN通过智能技术生成

需求：总共5条线，默认只显示3条，2条点击才显示

效果图

只显示3条，点击这个legend 显示这2条

代码

Option = {
    tooltip: {
    trigger: 'axis',
    selectedMode: true       
    },
    color: ['#66FFE5', '#FFD166', '#FF6666'],
    legend: {
        data: [
            {
                name: '工厂火灾',
                icon: 'circle'
            },
            {
                name: '自然灾害',
                icon: 'circle'
            },
            {
                name: '交通事故',
                            icon: 'circle',

                        },
                        {
                            name: '放汛防台',
                            icon: 'circle',

                        },
                        {
                            name: '消防救援',
                            icon: 'circle',

                        },
                    ],
                    selected: {
                        '放汛防台': false,
                        '消防救援': false,
                    },
                    textStyle: { //图例文字的样式
                        color: '#fff',
                        fontSize: 14
                    },
                    itemHeight: 9,
                    top: '5%',
                    right: '5%',

                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

                },

                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#165074'],
                            width: 1,
                            type: 'solid'
                        }
                    }
                },
                series: [
                    {
                        name: '放汛防台',
                        type: 'line',
                        data: [250, 350, 220, 370, 300, 360, 260, 420, 310, 355, 375, 390],
                        smooth: true,
                    },
                    {
                        name: '消防救援',
                        type: 'line',
                        data: [200, 300, 170, 320, 250, 310, 210, 370, 260, 305, 225, 340],
                        smooth: true,

                    },
                    {
                        name: '交通事故',
                        type: 'line',
                        data: [150, 250, 120, 270, 200, 260, 160, 320, 210, 255, 175, 290],
                        smooth: true

                    },
                    {
                        name: '自然灾害',
                        type: 'line',
                        data: [100, 200, 70, 220, 150, 210, 110, 270, 160, 205, 125, 240],
                        smooth: true

                    },
                    {
                        name: '工厂火灾',
                        type: 'line',
                        data: [50, 150, 20, 170, 100, 160, 60, 220, 110, 155, 75, 190],
                        smooth: true

                    },

                ]


            },