echarts绘制特殊样式折线图

说明

echarts绘制一个简单的折线图

效果图

let xAxisArr = [];
        for(var i = 0; i > -7; i--) {//获取最近7天的日期
            xAxisArr.push(Deal.getBeforeDate(i));
        }
        const bargraph = {
            title: {
                show: true,//标题显示
                text: '走势图',
                padding: 10,
                textStyle: {
                    fontSize:14
                }
            },
            tooltip: {
                trigger:'axis',
                backgroundColor: '#ffffff',
                formatter: "{b}数量:{c}",
                textStyle:{
                    color: "#ffffff",
                },
                axisPointer: {
                    type: 'line',
                    lineStyle: {
                        width:0
                    }
                },
                borderColor: "#fff",
                borderWidth: 1,
                padding: 10,
                extraCssText: "background: linear-gradient(to right, #60CEFA, #6D8CF5);",
            },
            xAxis: {
                type: 'category',
                data: xAxisArr.reverse(),
                axisLine:{
                    lineStyle:{
                        color:'#E9EFF7',
                    }
                },
                axisLabel: {
                    textStyle: { //改变刻度字体样式
                        color: '#B1B1B1'
                    }
                }
            },
            grid: {
                left: '3%',
                right: '3%',
                bottom: '6%',
                top: '20%',
                containLabel: true
            },
            yAxis: {
                type: 'value',
                scale: true,
                min: 0,
                axisLine:{
                    lineStyle:{
                        color:'#E9EFF7',
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#E7EEF6']
                    }
                },
                axisLabel: {
                    textStyle: { //改变刻度字体样式
                        color: '#B1B1B1'
                    }
                }
            },
            series: [{
                type: 'line',
                data: [10,5,1,15,10,20,10],
                smooth: true,
                symbol:'emptyCircle',
                symbolSize:8,
                showSymbol:true,
                lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#BCECFD'
                    }, {
                        offset: 1,
                        color: '#B2CBFA'
                    }]),
                },
                itemStyle: {
                    normal: {
                        color: '#357DF6',
                    },
                    emphasis: {
                        borderWidth: 5,
                        borderColor: "transparent"
                    }
                }
            },{
                type: 'line',
                data: [10,5,1,15,10,20,10],
                smooth: true,
                symbol:'image://'+circle,
                symbolSize:16,
                showSymbol:false,
                itemStyle: {
                    normal: {
                        color: "transparent",//折线点的颜色
                        lineStyle: {
                            color: 'transparent'
                        }
                    }
                }
            },{
                type: 'bar',
                data: [20,20,20,20,20,20,20],
                yAxisIndex:0,
                barWidth : 30,
                barGap: '-100%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#EBFAFE'
                        }, {
                            offset: 1,
                            color: '#F0F3FE'
                        }]),
                    }
                }
            },{
                type: 'bar',
                data: [10,5,1,15,10,20,10],
                barWidth : 30,
                itemStyle: {
                    normal: {
                        color:'transparent'
                    },
                    emphasis: {
                        color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
                            offset: 0,
                            color: 'transparent'
                        },{
                            offset: 0.45,
                            color: 'transparent'
                        },{
                            offset: 0.47,
                            color: '#5EC4FA'
                        },{
                            offset: 0.55,
                            color: '#6C8DF5'
                        },{
                            offset: 0.56,
                            color: 'transparent'
                        },{
                            offset: 1,
                            color: 'transparent'
                        }]),
                    }
                }
            }]
        }
        this.setState({
            bargraph:bargraph
        })