Echarts自动轮播引导线的问题请教

[ajunajun]

从Echarts社区看到个实例（https://gallery.echartsjs.com/editor.html?c=xuqmbQ15J7&v=3）觉得很棒，想做到我的图表里。

    <div id="MidMap" style="z-index:9;width:44.7%;height:63.8%;top:5%;left:27.6%;position:absolute;border-style:solid;border-width:0px;border-color:#3A5FCD;background-size:100% 100%!important;"></div>
<script src="js/stationcentre.js"></script>
<script src="js/stationlist.js"></script>
<script src="js/stationvalue.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var MidMapChart = echarts.init(document.getElementById('MidMap'));
    // 指定图表的配置项和数据
    function loadScript(url, callback) {
        var script = document.createElement("script")
        script.type = "text/javascript";
        if (script.readyState) { //IE
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { //Others
            script.onload = function() {
                callback();
            };
        }
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }
  function getSeries(){
    var series = [];
    [[mapData.title, BJData]].forEach(function(item, i) {
      series.push({
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 3,
          //箭头指向速度，值越小速度越快
          trailLength: 0.2,
          //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow',
          //箭头图标
          symbolSize: 4,
          //图标大小
        },

        lineStyle: {
          normal: {
            width: 1,
            //尾迹线条宽度
            opacity: 0.03,
            //尾迹线条透明度
            curveness: .3 //尾迹线条曲直度
          }
        },

        data: convertData(item[1])
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: { //涟漪特效
          period: 4,
          //动画时间，值越小速度越快
          brushType: 'stroke',
          //波纹绘制方式 stroke, fill
          scale: 8 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            //显示位置
            offset: [ - 25, -20],
            //偏移设置--台站
            formatter: '{b}' //圆环显示文字
          },
          emphasis: {
            show: true
          }
        },
        symbol: 'circle',
        symbolSize: function(val) {
          return 4 + val[2] / 1000; //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: '#f00'
          }
        },
        data: item[1].map(function(dataItem) {
          return {
            name: dataItem[0].name,
            statusnow: dataItem[0].statusnow,
            value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
            //增加内容
          };
        }),
      },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            //offset:[5, 0],
            color: 'blue',
            //#00ffff
            formatter: '{b}',
            //offset:[0,-25],//文字的相对偏移（左、下）
            textStyle: {
              color: "#00ffff"
            }
          },

          emphasis: {
            show: true
          }
        },
        symbol: 'pin',
        symbolSize: 40,
        //标志点大小
        itemStyle: {
          normal: {
            show: true,
            color: 'green',
            //#9966cc  blue
            //borderColor: 'rgba(0,186,255,0.4)',
            //borderWidth: 2
          }
        },
        //根据数据显示pin的颜色
        data: [{
          name: item[0],
          value: geoCoordMap[item[0]].concat([0]),
          //concat([0]为绿色
          //增加内容
          statusnow: item[2]

        }],
      });
    });
    return series;
  }
    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem[0].name];
            var fromstaturs = geoCoordMap[dataItem[0].statusnow];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
                res.push([{
                    coord: fromCoord,
                    value: dataItem[0].value,
                },
                {
                    coord: toCoord,
                }]);
            }
        }
        return res;
    };
  //让圆环的提示框自动触发轮播显示
  function autoHoverTip() {
    for (var i = 0; i < counts; i++) { 
      (function(i) {
        ts = setTimeout(function() {
          MidMapChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 1,
            dataIndex: i
          });
        },  5000 * i);
      })(i);
    }
  }
    var color = ['#a6c84c', '#ffa022', '#46bee9'];
    var dataIndex = 0, counts = 0;
  loadScript(mapData.mapFile, function(){
    var option4 = {
      backgroundColor: '',
      title: {
        text: '',
        subtext: '',
        left: 'center',

        textStyle: {
          color: '#fff',
          //top:'0.05%',
          fontSize: 18
        },
        // 分别设置四个方向的内边距
        padding: [5, 10, 10, 10] //上、右、下、左
      },
      tooltip: {
        trigger: 'item',
        position: 'right',
        //position: 'top',
        backgroundColor: 'rgba(12, 204, 104, 0.8)',
        borderColor: '#FFFFCC',
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: 'z-index:100',
        formatter: function(params, ticket, callback) {
          //根据业务自己拓展要显示的内容
          var res = "";
          var name = params.name;
          var value = params.value[params.seriesIndex + 1];
          var statusnow = BJData[params.dataIndex][0].statusnow;
          res = "<span style='color:#fff'>" + name + "</span><br/>状态：" + statusnow;
          return res;
        },
      },
      visualMap: { //图例值控制
        show: false,  //不显示图例
        min: 0,
        max: 30,
        calculable: true,
        splitNumber: 3,
        color: ['red', 'yellow', '#00EE00'],
        //颜色从高到低依次渐变#76EE00
        textStyle: {
          color: '#fff'
        }
      },
      geo: {
        map: mapData.mapName,

        label: {
          emphasis: {
            show: true //显示城市名
          }
        },
        roam: true,
        //是否允许缩放
        layoutCenter: ['50%', '50%'],
        //地图位置
        layoutSize: "100%",
        itemStyle: {
          normal: {
            color: 'rgba(37, 43, 61, .5)',
            //地图背景色 rgba(90,108, 128, 1)
            borderColor: 'white' //省市边界线'rgba(100,149,237,1)'
          },
          emphasis: {
            color: 'rgba(90,108, 128, 1)' //悬浮背景rgba(37, 43, 61, .5)
          }
        }
      },
      series: getSeries()
    };
    counts = option4.series[0].data.length; //获取所有闪动圆环数量
    setTimeout(function() {
      autoHoverTip();
      tv = setInterval(autoHoverTip, counts * 3000);
    }, 500);
    // 间隔20秒刷新数据
    MidMapChart.setOption(option4);
    myEcharts.push(MidMapChart);
    setInterval(function() {
      loadScript('js/stationvalue.js', function() {
        //MidMapChart.clear();
        option4.series = getSeries();
        MidMapChart.setOption(option4); //,true
      });
    },
    30000);
  });
</script>

stationlist.js文件内容如下：

var geoCoordMap = {
"北京中心":[116.38,39.9],
"昌平":[116.22,40.24],
"沙河":[116.28,40.1],
"通州":[116.8,39.816],
"武清":[116.91,39.4],
"丰台":[116.14,39.9],
"十三陵":[116.2167,40.2498],
"顺义":[116.5,40.3],
"大兴":[116.3,39.6],
"房山":[116.1,39.8],
};

stationvalue.js文件内容如下：

var BJData = [
[{name: '昌平',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '沙河',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '通州',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '武清',value: 30,statusnow: '故障'}, {name: '北京中心'}],
[{name: '丰台',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '十三陵',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '顺义',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '大兴',value: 0,statusnow: '正常'}, {name: '北京中心'}],
[{name: '房山',value: 30,statusnow: '故障'}, {name: '北京中心'}],
];

stationcentre.js文件内容如下：

var mapData = {
    title: '北京中心',
    mapFile: 'js/beijing.js',
    mapName: '北京'
};

请教问题：
1、怎么把实例：https://gallery.echartsjs.com/editor.html?c=xuqmbQ15J7&v=3加到我的代码里实现这种效果？
2、上面实例中有点问题：如果tooltip需要显示的文字过长，tooltip的宽度不会随文字长度大小改变所以显示得不全（最好是比如每行可以显示10个字，再多就换行）？
3、如果能实现下图这种边框的效果就太完美啦！


期待囧哥帮助！！！

[ajunajun]

我是真的白，完全看不懂哎






myTooltipC覆盖了，改根据文字长度变宽怎么改？

[囧]

是BJData中的name在geoCoordMap里没找到应对的 我测试是正常的

[ajunajun]

引用 9 楼 囧 的回复:

是BJData中的name在geoCoordMap里没找到应对的
我测试是正常的

数据不刷新的原因是geoCoordMap和其它图表的重名，解决了
可tooltip随文字宽度改变的问题搞了两个晚上也没搞定
1、把其它的图表全删了，就不涉及函数、变量重名的问题了吧，不行。
2、使用360、Chrome、搜狗浏览器都是同样的结果。
3、到另一台电脑上同时出现了两种情况（三种浏览器的结果一样）：
（1）tooltip不随文字长度而变长，仅显示部分文字

（2）tooltip不随文字长度而变长，其它字体露出框


有可能是哪些原因导致和您的不一样呢？

[囧]

把你的代码打个包放上来看看

[ajunajun]

引用 11 楼 囧 的回复:

把你的代码打个包放上来看看

囧哥，现在在吗？

[囧]

引用 13 楼 ajunajun 的回复:

囧哥，现在在吗？

现在弄好了么？

[ajunajun]

没有，您稍等，我传到网盘，麻烦您下载后说声

[ajunajun]

引用 14 楼 囧 的回复:

[quote=引用 13 楼 ajunajun 的回复:]
囧哥，现在在吗？

现在弄好了么？[/quote]

https://pan.baidu.com/s/1i0kT-5dtfDZmwWGVu2EceA
提取码：luaq

[ajunajun]

引用 14 楼 囧 的回复:

[quote=引用 13 楼 ajunajun 的回复:]
囧哥，现在在吗？

现在弄好了么？[/quote]
囧哥，下载下来了吗？看一下txt文件

[囧]

下载了，上班时间用不了QQ

[ajunajun]

好的，麻烦您有时间加一下，以后可以付费请您帮忙

[囧]

你没有覆盖myTooltipC的代码，覆盖一下就好了

[ajunajun]

引用 20 楼 囧 的回复:

你没有覆盖myTooltipC的代码，覆盖一下就好了

替换过呀，刚又替换了一遍，还是不行，等回头联系上把您的myTooltip.js文件发我一下？

[囧]

https://coding.net/s/a8c4a09a-55ca-4fa8-988a-586f63e82888 下载这个

[ajunajun]

注册了，搞不下来，我再试试

[ajunajun]

哈哈哈，好了，但是“状态”后面多的空白能不能去掉？

[囧]

再重新下载一下

[qq_36779481]

引用 25 楼 囧 的回复:

再重新下载一下

我想要改变弹出框的样式，该怎么写，我想要加个背景图片

[qq_36779481]

我想要这种效果，可以实现吗

[xfq_z]

引导线怎么画的 能说一下吗