echarts点击图形显示弹窗(自定义弹窗样式)

最新推荐文章于 2025-02-22 13:38:34 发布

原创最新推荐文章于 2025-02-22 13:38:34 发布 · 1.2w 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #echarts

前端专栏收录该内容

22 篇文章

订阅专栏

echarts点击图形板块区域，弹出自定义弹窗，echarts提供了api可以配置，在tooltip属性进行配置，案例如下：

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    // 鼠标是否可以进入悬浮框
    enterable: true,
    // 触发方式 mousemove, click, none, mousemove|click
    triggerOn: 'click', 
    // item 图形触发， axis 坐标轴触发， none 不触发
    trigger: 'item', 
    // 浮层隐藏的延迟
    hideDelay: 800,
    // 背景色
    backgroundColor: 'rgba(0,0,0,0)',
    formatter: function (params) {
    	return '<div class="chartLabel">'+
    	'<div class=title>'+params.name+'</div>'+
    	'</div>'
    }
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  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)'
        }
      }
    }
  ]
};

通过formatter生成自定义dom，然后就可以用css控制样式了。