echarts关于悬浮提示窗的设置

如果官网有现成的例子，就直接从官网拿了，链接会放在描述上，如果没有的话，我会贴出例子的具体代码与截图。

本篇文章作为记录，记录我开发的时候遇到的需求，可能有些很简单，但是如果有同样需求的童鞋会感觉很实用的。

感觉对你有用的话点个赞再走吧。哈哈😄

1、多个x轴的时候，这个时候就是普通展示，什么都不用额外做处理，tip就是横坐标加冒号加纵坐标的值。当然，也没有单位的显示(比如%、￥、G、M、人、天...)

关键代码：

option = {
    ......
    tooltip: {
        trigger: 'axis'
    },
    ......
    series: [
        {
            name: '邮件营销',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        ......
    ]
};

2、展示内容添加单位

关键代码：

option = {
    ... ...
    tooltip: {
        trigger: 'axis'
    },
    ... ...
    series: [
        {
            name: '邮件营销',
            type: 'line',
            tooltip: { // 下面两个参数必须同时有，否则不生效
                trigger: 'item', 
                formatter: '{b0}: 实到 {c0} 人'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        }
    ]
};
trigger: 'item',
// 触发条件，必须点到节点上，也就是那个小圆圈，这个时候就不像默认的那么智能了。
// 如果想要和以前一样智能，就需要配置触发条件或者换一种写法。
// 后面会有补充。

3、如果想要在图中直接显示数值（且同时添加单位），而不是悬浮才展示，就像这样：

关键代码：

option = {
    ... ...
    series: [
        {
            name: '邮件营销',
            type: 'line',
            label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{c}%',
              textStyle: {
                color: '#2d2d2d',
                fontSize: '16'
              }
            }
          },
            data: [120, 132, 101, 134, 90, 230, 210]
        }
    ]
};

4、和2同样的需求，我换了一种写法，这个写法弥补了2的不智能。

关键代码：

option = {
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        var name = params[0].name
        var value = params[0].value
        var tips = ''
        return name + ':' + value + '%'
      },
       ... ...
    },
    ... ...
    series: [
        {
            name: '邮件营销',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210]
        }
    ]
};

5、需要展示的不知横纵坐标的值，还有其他额外的值

关键代码：找到x轴或者y轴唯一的变量，做对比，然后遍历数据数组，拼接显示。

这只是一种思路。后面还会有补充。

var arr_x = ['画板1', '画板2']
var arr_y = [300, 400]
var arr_all = [{
    id: 1,
    name: '画板1',
    value: 300,
    date: '2020-05-29',
    color: '红色'
},{
    id: 2,
    name: '画板2',
    value: 400,
    date: '2020-05-29',
    color: '黄色'
}]

option = {
    title: {
        text: '画板浏览情况'
    },
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        var name = params[0].name
        var tips = ''
        arr_all.map(item => {
          if (item.name === name) {
            tips = 'name：' + name + '<br />浏览量：' + item.value + '人<br />日期：' + item.date + '<br />颜色柱图：' + item.color
          }
        })
        return tips
      },
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: arr_x
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '邮件营销',
            type: 'line',
            data: arr_y
        }
    ]
};

6、下面是展示多组数据

关键代码：

option = {
  tooltip: {
    trigger: 'axis',
    formatter: '{b0} <br/> {a0} :绩效完成 {c0}% <br/> {a1} :绩效完成 {c1}%<br/> {a2} :绩效完成 {c2}%<br/> {a3} :绩效完成 {c3}%<br/> {a4} :绩效完成 {c4}%<br/> {a5} :绩效完成 {c5}%<br/> {a6} :绩效完成 {c6}%<br/> {a7} :绩效完成 {c7}%'
  },
  legend: {
    data: ['张三', '黎明', '杨六', '武米', '齐奇', '蒋加', '诗词', '米是']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '张三',
      type: 'line',
      smooth: true,
      data: [20, 82, 91, 34, 90, 30, 10, 20, 20, 30, 25, 10]
    },
    {
      name: '黎明',
      type: 'line',
      smooth: true,
      data: [10, 22, 41, 50, 22, 15, 46, 66, 20, 38, 10, 33]
    },
    {
      name: '杨六',
      type: 'line',
      smooth: true,
      data: [33, 24, 12, 56, 22, 30, 15, 26, 26, 77, 10, 13]
    },
    {
      name: '武米',
      type: 'line',
      smooth: true,
      data: [55, 25, 16, 37, 15, 57, 56, 30, 24, 16, 19, 80]
    },
    {
      name: '齐奇',
      type: 'line',
      smooth: true,
      data: [57, 34, 22, 68, 78, 79, 10, 15, 57, 29, 37, 68]
    },
    {
      name: '蒋加',
      type: 'line',
      smooth: true,
      data: [48, 36, 35, 68, 68, 15, 67, 63, 27, 17, 67, 80]
    },
    {
      name: '诗词',
      type: 'line',
      smooth: true,
      data: [24, 46, 78, 26, 10, 15, 26, 23, 15, 78, 16, 90]
    },
    {
      name: '米是',
      type: 'line',
      smooth: true,
      data: [25, 15, 26, 35, 78, 27, 38, 35, 78, 15, 57, 26]
    }
  ]
};

有几个值，就顺到a几c几

当然，这样写，感觉图有点乱，可以做个堆叠，层次就清晰了。

关键代码：

 series: [
    {
      name: '张三',
      type: 'line',
      smooth: true,
      stack: '绩效完成度',
      data: [20, 82, 91, 34, 90, 30, 10, 20, 20, 30, 25, 10]
    },
    ... ...
]

stack: '绩效完成度',
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加

待补充......