echarts柱状图及折线图显示 部分虚线效果

效果图：

1.png

 {
                //用formatter回调函数显示多项数据内容
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params, ticket, callback) {
                        var htmlStr = '';
                        var valMap = {};
                        for(var i=0;i';//x轴的名称
                            }
                            htmlStr +='
';
                            //为了保证和原来的效果一样，这里自己实现了一个点的效果
                            htmlStr += '';

                            //圆点后面显示的文本
                            if(xName == self.weekArr[6]){
                                htmlStr += '预估'+seriesName + '：' + value;
                            }else{
                                htmlStr += seriesName + '：' + value;
                            }

                            htmlStr += '
';
                            valMap[seriesName] = value;
                        }
                        return htmlStr;
                    }
                },
                legend: {
                    itemHeight:5,
                    itemWidth:12,
                    textStyle:{
                        color:'#33c5f5',
                        fontSize:'16',
                        lineHeight:"12",
                        padding:[1,1]
                    },

                },
                grid: {
                    left: '3%',
                    right: '0%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: self.weekArr,
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: ['rgba(51,197,245,.5)']
                            }
                        },
                        textStyle: {

                            lineHeight:12,
                        },
                        axisLabel: {
                            interval: 0,
                            show: true,
                            splitNumber: 15,
                            fontSize: 16,
                            textStyle: {
                                fontSize: 16,
                                lineHeight:12,
                                color: '#33c5f5'
                            },
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: ['rgba(51,197,245,.5)']
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle:{
                                color: ['rgba(51,197,245,.5)'],
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 16,
                                lineHeight:12,
                                color: '#33c5f5'
                            },

                        },

                    }
                ],
                series: [
                    {
                        name: '每日人数',
                        type: 'bar',
                        data: [330,350,300,430,321,360,{value:400,itemStyle: {normal: {color: 'rgba(255,255,255,0)',barBorderColor: '#ffd200',barBorderWidth:3,barBorderRadius:0,borderType:"dotted"}}}],
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        itemStyle: {
                            color: '#ffd200'
                        },
                    },
                    {
                        name: '预测产量',
                        type: 'bar',
                        data: [300,400,330,360,354,420,{value:430,itemStyle: {normal: {color: 'rgba(255,255,255,0)',barBorderColor: '#17e20d',barBorderWidth:3,barBorderRadius:0,borderType:"dotted"}}}],
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        itemStyle: {
                            color: '#17e20d'
                        },
                    },
                    {
                        name: '实际产量',
                        data: [90,130,140,120,100,80,"-"],
                        type: 'line',
                        symbol: "none",
                        label: {
                            normal: {
                                show: false,
                                color: "#ffffff",
                            },
                        },
                        itemStyle: {

                            normal: {
                                color: '#2de8ed',
                                lineStyle: {
                                    width: 2,
                                    type: 'solid',
                                    color: "#2de8ed",
                                }
                            },
                        },
                    },
                    {
                        name:'实际产量',
                        data: ["-", "-", "-", "-", "-", 80,60],
                        type: 'line',
                        label: {
                            normal: {
                                show: false,
                                color: "#ffffff"
                            },
                        },
                        symbol: "none",
                        itemStyle:{

                            normal: {
                                color: '#2de8ed',
                                lineStyle: {
                                    width: 2,
                                    type: 'dotted',
                                    color: "#2de8ed",
                                }
                            },
                        },
                    },
                ]
            };