关于echarts 自定义 tooltip 和设置虚线与实线

效果图

涉及代码

<div class="echarts_bottom" style="width:500px;height:600px;"></div>

setEchartsData:function(echartsId){
   var _this = this;
    this.getTapData(echartsId).then(function(result){
        var code = Object.keys(result.value)
        var legendData = []
        
        var series = []
        for(var i=0;i<code.length;i++){
            if(_this.public_picker.language == 'en'){
                var getName = _this.mapview.position.getCodeName(code[i]).areaNameEn+' '
            }else{
                var getName = _this.mapview.position.getCodeName(code[i]).areaName
            }
            if(echartsId == 'top'){
                legendData.push(getName)
                series.push({
                    name: legendData[i],
                    type: 'line',
                    data: result.value[code[i]].actual
                })
            }else{
               
                legendData.push(getName)
                series.push({
                    name: legendData[i],
                    type: 'line',
                    data: result.value[code[i]].actual
                })
                
                series.push({
                    name: legendData[i],
                    type: 'line',
                    data: result.value[code[i]].correction,
                    smooth:false,   //关键点，为true是不支持虚线的，实线就用true
                    itemStyle:{
                        normal:{
                            lineStyle:{
                                width:2,
                                type:'dotted'  //'dotted'虚线 'solid'实线
                            }
                        }
                    },
                })
            }
        }
        var legend = {
            data:legendData, 
            top:"20px",
        }    
        var option = {
            xAxis:result.dates,
            legend:legend,
            series:series
        }
 
        _this.echarts_bottom(option)
        
    }).catch(function(){
        console.log('error');
    });
},
echarts_bottom : function(option){
    var el_chart = $('.echarts_bottom')[0];
    var option = {
        // color: ['#ccc','#ccc','#C296F9', '#75C88C','red','yellow'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            backgroundColor: 'rgba(51, 51, 51, 0.6)',
            borderRadius: '6',
            formatter: function(data){
                var html = '';
                for (var i = 0; i < data.length; i++) {
                    if(data[i].seriesId.charAt(data[i].seriesId.length-1)  == 0){
                        var nameDesc = $.i18n.prop('concentrationAct')
                    }else if(data[i].seriesId.charAt(data[i].seriesId.length-1) == 1){
                        var nameDesc = $.i18n.prop('concentrationMet')
                    }
                    var markBg = data[i].marker,
                        value = data[i].value ? data[i].value.toFixed(1) :'-';
                    html +=  '<div style="font-size: 12px;line-height: 14px;margin-bottom:10px">'+
                            markBg + 
                            '<span style="margin-left:5px">'+data[i].seriesName + nameDesc +'</span><span style="margin:0 10px;color:rgba(255,255,255,0.3)">|</span>  '+value+ '  ('+$.i18n.prop('unit1')+')</div>'
                }
                data.marker = '<div>'+
                                    '<div style="margin:20px;font-weight: bold;font-size: 14px;line-height: 20px;">'+data[0].axisValue+'</div>' +
                                    '<div style="margin:20px;">'+html+'</div>'+
                            '</div>'
                return data.marker;
            },
        },
        legend: option.legend,
        grid: {
            top:'15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: option.xAxis,
        },
        yAxis: {
            type: 'value'
        },
        series: option.series
    };
    if(!this.echarts_obj.bottom){
        var chart = echarts.init(el_chart);
        this.echarts_obj.bottom = chart;
        (function (chart) {
            $(window).on('resize', function () {
                chart.resize();
            });
        })(chart);
    }
    this.echarts_obj.bottom.setOption(option,true);
    this.echarts_obj.bottom.resize();
}