素材牛VIP会员
Echarts自动显示tooptip的问题
 多***哈  分类:JavaScript  人气:1241  回帖:1  发布于6年前 收藏

在vue-cli构建的项目中 使用echarts,使用dispatchAction这个api后tooptip并不会自动显示,代码如下


var myData = [

    {name: '海门', value: [121.15, 31.89, 90]},
    {name: '鄂尔多斯', value: [109.781327, 39.608266, 120]},
    {name: '招远', value: [120.38, 37.35, 142]},
    {name: '舟山', value: [122.207216, 29.985295, 123]}
  ]

var option = {
  geo: {
    map: 'china',

    itemStyle: {          // 定义样式
      normal: {         // 普通状态下的样式
          areaColor: '#323c48',
          borderColor: '#111'
      },
      emphasis: {         // 高亮状态下的样式
          areaColor: '#2a333d'
      }
    }
  },
  backgroundColor: '#404a59',     // 图表背景色
  tooltip: {
      trigger: 'item',
      formatter: (params) => {
        return `<p style="color:#fff;">${params.name}</p>
                <p style="color:#fff;">${params.seriesId}人</p>
                `
        console.log(params, 'params')
      },
      backgroundColor:'rgba(12, 204, 104, 0.92)',
      borderColor:'#FFFFCC',
      showDelay : 0,
      hideDelay : 0,
      enterable:true,
      transitionDuration : 0,
      extraCssText:'z-index:100',
    },
  series: [
    {
      name: '销量',
      type: 'scatter',
      coordinateSystem: 'geo',

      data: myData // series数据内容
    }
  ],
  visualMap: {
    type: 'continuous', // 连续型
    min: 0,           // 值域最小值,必须参数
    max: 200,     // 值域最大值,必须参数
    calculable: true, // 是否启用值域漫游
    inRange: {
              color: ['#50a3ba','#eac736','#d94e5d']
                             // 指定数值从低到高时的颜色变化
          },
    textStyle: {
      color: '#fff' // 值域控件的文本颜色
    }
      }
}
  var counts = option.series[0].data.length;
  console.log(option.series[0], 'option.series[0]')

  let myChart = echarts.init(document.getElementById('map'))
  myChart.setOption(option);
  function autoHoverTip(){
    for(var i = 0;i<counts;i++){
      (function (i) {
    let ts = setTimeout(function () {
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 1,
        dataIndex: i
        });
      }, 5000*i);
    })(i);
  }
}
setTimeout(function() {
  autoHoverTip();
  let tv = setInterval(autoHoverTip, counts*5600);
  });
}
函数已经在mounted钩子中调用
 标签:javascript

讨论这个帖子(1)垃圾回帖将一律封号处理……

Lv3 码奴
贝***0 页面重构设计 6年前#1
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取