vue-echarts使用中遇到的问题难点总结记录

一，数据使用dataset失效

背景：由于后端返回的数据为对象数组（[{name:‘222’,data:'展示数据}]），如果要将数据筛选为x,y轴，显得过于麻烦。于是想用dataset中的surce+dimensions（dimensions可用于指定要展示的参数），但是图不显示

解决：vue-echarts动态引入，需要dataset对应组件

二、当标志线与节点触发展示不同tooltip，需优先展示节点

echart组件分了很多层级，如需优先触发节点，将节点的zlevel设置更高即可

三、使用visualMap实现分层效果

visualmap可以让线图不同范围内展示不同颜色，其中inrange：{}属性设置在范围内的相关样式，如下图

对应设置参考如下

visualMap: {
    top: 50,
    right: 10,
    show: false,
    type: 'piecewise',
    dimension: 1,
    pieces: [
      {
        lte: -3,
      },

      {
        gte: 3,
      },
    ],
    inRange: {
      symbol: 'diamond',
      symbolSize: 12,
      color: 'red',
    },
    outOfRange: {
      symbolSize: 12,
      symbol: 'diamond',
    },
  },

四、点击标志线，与节点tooltip展示不同内容

tooltip属性内有个formatter方法，里面可以获取数据，自定义展示内容和样式

tooltip: {
    trigger: 'axis',
    formatter(params: any) {
      let html = ''
      params?.forEach?.((item: any) => {
        if (lineSeries === item.seriesName) {
          html = `<span>展示内容1:  <br />换行展示：<br />换行展示：<br />日期：<span>`
        } else if (seriesType === 'markLine' ) {
         
          html = `<span>点击标志线展示内容1:  <br />换行展示：<br />换行展示：<br />日期<span>`
        }
      })
      return `${html ? `<div>${html}</div>` : ''}`
    },
  },

六、点击饼图tooltip触发弹窗

饼图有一个触发事件，但是是点击item触发，需求中需要点击tooltip查看明细，如图

解决方案，
在vue-echart组件外层再包一层，用以获取触发。
tooltip配置中将所需参数通过标签属性的形式，传入，设置触发盒子的样式**style=‘pointer-event:auto;’**并给改节点设置独有的标志如 id='viewbtn ，此属性将使该节点的事件冒泡以便vue-echart外面盒子能获取到，

const tooltipFormatter = (params: any) => {
  let html = ''
  html = `<div class='vue3-text-14px vue3-fw-500'> ${params.data.categoryName ?? ''} </div>
          <div class='vue3-flex vue3-justify-between vue3-flex-nowrap vue3-mt-8px  vue3-text-#303133'>
            <div class=' vue3-text-14px vue3-lh-20px'>
            <span class='vue3-display-inline-block vue3-w-8px vue3-h-8px vue3-rounded-50% vue3-mr-8px ' style="background-color:${
              params.color
            }"></span>
            <span class="vue3-text-#909399">预计收入</span>
            </div>
            <div class='vue3-ml-8px'>${params.data.data ?? ''}</div>
          </div>
          <div class='vue3-flex vue3-justify-between vue3-flex-nowrap vue3-mt-8px  vue3-text-#303133''><div class='vue3-text-#909399 vue3-ml-16px'>占比</div><div>${
            params.data.share ?? ''
          }</div></div>
         ${
           isDetail
             ? ''
             : ` <div id='viewBtn' class='vue3-text-right vue3-text-#0E42B9 vue3-mt-8px vue3-text-14px ' data-id='${params.data.categoryIds}' data-name='${params.data.categoryName}'  style='pointer-event:auto;cursor:pointer' >查看明细</div>`
         }`

  return `${html ? `<div  >${html}</div>` : ''}`
}
// tooltip配置
 tooltip: {
    trigger: 'item',
    triggerOn: isDetail ? 'mousemove|click' : 'click',
    padding: 12,
    extraCssText: 'border:none;',
    enterable: true,
    formatter: tooltipFormatter,
  },

// template代码块
<template>
  <div @click="viewDetail">
    <VChart ref="chartsInstance" class="chart" :option="option" autoresize />
  </div>
</template>

// 对应js
const viewDetail = (e: Event) => {
  const target: ({ id?: string; dataset?: { id?: string; name?: string } } & EventTarget) | null = e?.target
  const nodeId = target?.id ?? ''
  if (nodeId === 'viewBtn') {
    emit('openDia', target?.dataset?.id, target?.dataset?.name)
  }
}