IE11下 markArea 没效果ECharts Gallery

20:11:45图表已生成
代码
// 模拟从后端拿到的数据
let pars = {
    lineData: Array(100).fill(0).map((n, i) => {
        return {
            h: parseInt(Math.random() * 1000),
            time: moment('2018-01-01').add(i, 'h').format('YYYY-MM-DD HH')
        }
    })
}
// 前端调整后的数据
let lineData = pars.lineData.map((n, i) => {
    return {
        h: n.h,
        time: new Date(n.time + ':00:00').getTime(),
        timeFormat: moment(n.time + ':00:00').format('MM/DD HH时')
    }
})

option = {
    tooltip: {
        trigger: 'axis',
        formatter: (pars) => {
            let html = []
            pars.forEach((n, i) => {
                html.push(`
              <div class="wrap">
                <p>
                  <i style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #404B81;"></i>
                  ${n.name}
                </p>
                <p>
                  影响力数值: ${parseInt(n.value)}
                </p>
              </div>
            `)
            })
            return html.join('')
        },
        axisPointer: {
            type: 'cross',
            label: {
                show: false
            },
            crossStyle: {
                opacity: 0
            }
        }
    },
    grid: {
        top: 10,
        right: 0,
        bottom: 0,
        left: 0,
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                color: '#8F9396'
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#404B81',
            fontSize: 14
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#8F9396',
                type: 'dashed'
            }
        },
        data: lineData.map(n => n.timeFormat)
    },
    yAxis: {
        axisLine: {
            lineStyle: {
                color: '#8F9396'
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#404B81',
            fontSize: 14
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#8F9396',
                type: 'dashed'
            }
        }
    },
    dataZoom: {
        type: 'inside'
    },
    color: ['#404B81'],
    series: [{
        name: '影响力数值',
        type: 'line',
        symbol: 'circle',
        symbolSize: 1,
        data: lineData.map((n, i) => {
            return {
                name: n.timeFormat,
                value: n.h
            }
        }),
        smooth: true,
        markArea: {
            silent: true,
            itemStyle: {
                color: '#8591b3',
                opacity: 0.5
            },
            data: (() => {
                let resArr = []
                lineData.forEach((n, i) => {
                    let date = new Date(n.time)
                    let isArea = date.getHours() >= 0 && date.getHours() <= 6
                    if (i === 0 && isArea) {
                        resArr.push({
                            xAxis: n.timeFormat
                        })
                    } else if (i === lineData.length - 1 && isArea) {
                        resArr.push({
                            xAxis: n.timeFormat
                        })
                    } else if (date.getHours() === 0 || date.getHours() === 6) {
                        resArr.push({
                            xAxis: n.timeFormat
                        })
                    }
                })
                return _.chunk(resArr, 2)
            })()
        }
    }]
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
