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

需求:总共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

                    },

                ]


            },

 

  • 6
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值