Echarts饼图自定义提示框

echarts相信大家用得都不少，但是总是会有一些需求，在官方文档上找不到相应的用法。在这里有一个这样的需求，需要做一个饼图，把鼠标放在饼图上面，会显示里面的一些数据。在官网的例子里面，我们能看到的是下面这样的例子。

import * as echarts from 'echarts';
let chartDom = document.getElementById('main');
let myChart = echarts.init(chartDom);
let option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

这样定义是默认的设置，但是有时候我们想要的不只是这个名字和对应的值，我们还想要写一点自己的东西，那么文档上也没有提示。经过多番查找，让我找到了在tooltip下有一个formatter的属性，可以让我们自定义设置里面的值。

let option = {
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
              let htmlStr
              htmlStr =
              `
                <div>
                  <span>我想要的数据</span> :${params.data.value}
                  <br/>
                  <span>我想要的名称</span> :${params.data.name}
                </div>
              `
            return htmlStr;
            return htmlStr;
          }
  },
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

这样加上formatter这个属性之后，我们可以自定义我们想要的内容。formatter属性有一个参数叫params。当我们鼠标指上去的时候，这个参数会获取到我们所指着的data中的对象。我们把这个params打印出来就可以很清晰的看到，params这个对象里面有我们所指着的这个对象的索引值dataIndex，有data值，还有一些设置的颜色等等。

本次饼图自定义提示框就讲解到这里啦，关注我，每天多分享一个前端小知识~