【ECharts】tooltip

目录

进入页面默认展示tooltip

坐标轴指示器

自定义样式

---

进入页面默认展示tooltip

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
        }
    ],
    tooltip:{
        show: true
    }
};

myChart.setOption(option);

// 初始化后设置初始值
setTimeout(function(){
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex:0,  // 显示第几个series
        dataIndex: 1 // 显示第几个数据
    });
})

 官网地址

坐标轴指示器

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross' // 默认是line, 可选line、shadow、cross
    },
    padding: [5, 10]
  },
  yAxis: {
    type: 'value',
    axisTick: {
      alignWithLabel: true // 刻度线与标签对齐
    }
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

自定义样式

option = {
  tooltip: {
    textStyle:{
      fontSize:14,
      color:'#fff'
    },
    backgroundColor: 'rgba(51, 51, 51, 0.7)',
    borderColor: 'rgba(51, 51, 51, 0.7)',
    borderWidth:0,
    trigger: 'item',
    formatter: function (val) {
      let res=`
      <div>
        <span>分类 : ${val.name}</span>
        <div style="margin-top: 10px">${val.marker} 占比 : ${val.percent}%</div>
        <div style="margin-left: 18px">人数 : ${val.value}</div>
      </div>`
      return res
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};