Echarts混合折线图

echarts yekong

Echarts混合折线图

function getecharts9() {
        var chartDom = document.getElementById('echarts9');
        var myChart = echarts.init(chartDom);
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#57617B'
                    }
                }
            },
            legend: {
                icon: 'rect',
                itemWidth: 14,
                itemHeight: 5,
                itemGap: 13,
                data: ['产品预警', '产品报警'],
                right: '4%',
                textStyle: {
                    fontSize: 12,
                    color: '#F1F1F3'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                show: false,
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(255, 255, 255, 0.06)',
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#57617B'
                    }
                },
                data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
            }],
            yAxis: [{
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.06)'
                    }
                },
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 12,
                        color: 'rgba(255, 255, 255, 0.5)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.06)'
                    }
                }
            }],
            series: [
                {
                    name: '产品预警',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(2, 126, 240, 0.8)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(2, 126, 240, 0)'
                            }], false),
                            shadowColor: 'rgba(2, 126, 240, 0.1)',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(2, 126, 240, 1)',
                            borderColor: 'rgba(2, 126, 240, 1)',
                            borderWidth: 6
                        }
                    },
                    data: [0, 0.5, 1, 0.5, 2, 2.5, 1, 0, 0.5, 1, 0.5, 2, 2.5, 1, 0.5, 1, 0.5, 2, 2.5, 1]
                },
                {
                    name: '产品报警',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(205, 56, 69, 0.8)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(205, 56, 69, 0)'
                            }], false),
                            shadowColor: 'rgba(205, 56, 69, 0.1)',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(205, 56, 69, 1)',
                            borderColor: 'rgba(205, 56, 69, 1)',
                            borderWidth: 6
                        }
                    },
                    data: [0.5, 1, 0.5, 2, 2.5, 1, 0, 0.5, 1, 0.5, 2, 2.5, 1, 0.5, 1, 0.5, 2, 2.5, 1]
                },
            ]
        };
        myChart.clear()
        myChart.resize()
        option && myChart.setOption(option);
    }

喜欢