关于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是不支持虚线的，实线就用trueitemStyle:{
    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();
}