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

效果图:


1.png
 {
                //用formatter回调函数显示多项数据内容
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params, ticket, callback) {
                        var htmlStr = '';
                        var valMap = {};
                        for(var i=0;i<params.length;i++){
                            var param = params[i];
                            var xName = param.name;//x轴的名称
                            var seriesName = param.seriesName;//图例名称
                            var value = param.value;//y轴值
                            var color = param.color;//图例颜色

                            //过滤无效值
                            if(value == '-'){
                                continue;
                            }

                            //过滤重叠值
                            if(valMap[seriesName] == value){
                                continue;
                            }

                            if(i===0){
                                htmlStr += xName + '<br/>';//x轴的名称
                            }
                            htmlStr +='<div>';
                            //为了保证和原来的效果一样,这里自己实现了一个点的效果
                            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';

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

                            htmlStr += '</div>';
                            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",
                                }
                            },
                        },
                    },
                ]
            };
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容