关于使用echart常见问题的一些记录

目录

背景

1、echart自适应大小

2、自定义tooltips

3、自定义绘制柱状图顶部装饰（堆叠柱状图）

---

背景

感觉web前端echart的使用频率还是挺高的，echart配置很多，这里对于一些实现进行一个积累，方便后续类似需求的快速开发。（持续更新，欢迎指正~）

1、echart自适应大小

场景

在窗口大小发生变化 或者页面图表容器宽高发生变化时，echart图表容易变形，不美观，可以加入echart自适应。

相关知识点

• ResizeObserver-JavaScript api 可用于监听特定dom元素的尺寸变化。

• echarts的resize方法

代码实现

import { debounce } from 'lodash'; // 使用lodash的防抖


mounted(){
  this.init()
}

init(){
   this.myEcharts = echarts.init(this.$refs.chartRef);
   this.myEcharts = echarts.setOption(this.options); //设置echart选项
   this.onResize = debounce(() => {
        this.myEcharts?.resize();
    }, 500);
   this.resizeObserver = new ResizeObserver(this.onResize); // 新建对象，传入响应resize的回调函数
   this.resizeObserver.observe(this.$refs.targetWrap); // targetWrap你要监听的dom元素,即包含chartRef的容器

}

beforeDestroy() {
    this.resizeObserver.disconnect();
}

2、自定义tooltips

场景

这个很常见了，很多时候都需要自己重新处理一遍tooltips。这里主要说的是，使用回调函数的情况，返回一段html代码；回调参数里一个marker的值，是可以直接使用的，不用手写。

相关知识点

• echart配置项tooltip->formatter  具体详情请看Documentation - Apache ECharts

代码实现

 tooltip: {
   trigger: 'axis',
   formatter: function (params) {
   let res = `<span>标题</span><br>`;
   for (let item of params) {
      res += `<div style="display:flex;margin-top:3px;">
      <div>${item.marker}</div>
      <div style="width:140px;padding-left:5px">${item.seriesName} </div>
      <div style="font-weight:700"> 这里写自己需要展示的数据 %</div>
      </div>`;
    }
   return res;
   },
}

3、自定义绘制柱状图顶部装饰（堆叠柱状图）

场景

下图的柱状图，顶端做了特殊设计，这里需要采用自定义的绘制，普通的type=“bar”难以满足。

下面左图来自 https://zhuanlan.zhihu.com/p/152308319，主要代码实现参考来自此处，在此基础上实现右图stack堆叠的效果。

相关知识点

•  echart配置项 series->type=‘custom’具体详情请看Documentation - Apache ECharts
• 

代码实现

这里主要写一下，renderItem的实现函数

    renderBar(params: any, api: any) {
      const { dataIndex, seriesIndex } = params;
      // api.value(1) 这里可以理解为是y轴的数值
      let stackValue = api.value(1);
      // 计算堆叠的高度，将bar的高度进行叠加，得到堆叠的高度；思想是先画里层，从里层到外层
      let len = this.optionData.seriesData.length;
      if (stackValue > 0) {
        for (let i = seriesIndex + 1; i < len; i++) {
          stackValue += this.data[i].arr[dataIndex];
        }
      }

      const topCenter = api.coord([api.value(0), stackValue]);
      const height = api.size([0, stackValue])[1];
      // const width = api.size([0, 1])[0] * 0.5;  barwidth设置，按照比例
      const width = 48; //  barwidth设置，写死宽度
      const ceilHeight = stackValue > 0 ? 1 : 0; // 顶部边框的高度，如果计算出来stackValue为0，就不展示，否则会多一条横线出来。

      return {
        type: 'group',
        children: [
          {
            type: 'rect',
            shape: {
              x: topCenter[0] - width / 2,
              y: topCenter[1],
              width: width,
              height: height,
            },
            style: api.style({}),
          },
          { // 这里绘制顶部边框
            type: 'rect',
            shape: {
              x: topCenter[0] - width / 2,
              y: topCenter[1],
              width: width,
              height: ceilHeight,
            },
            style: api.style({
              fill: this.colors[params.seriesIndex],// 这里就是顶部的颜色设置
            }),
          },
        ],
      };
    }