写ECharts的时候我应该考虑什么？

0. 挂载节点的宽高

1. 判断是否首次渲染，初始化挂载节点

        if (!this.myChart) {
          this.myChart = echarts.init(this.wrapper);
        }
    ​
        const { myChart } = this;
   

2. 数据更新时，重新渲染图表（false时，增量渲染）

        option && myChart.setOption(option, true);
   

3. 深度监听动态数据，渲染图表

      @Watch("resData", { deep: true })
   

4. 配置细项

   • 尺寸转换

     eg. tooltip dom中绑定的尺寸需要手动转换-->推荐绑定css样式，可编写组件监听、自动转换

   • 偏个性化配置项

     title (text/subtext) -- 图表标题信息/main信息 graphic -- 可接收数组，作为图表中的标注信息 markLine/MarkArea -- 一个或多个高亮线/区域 legend.inactiveBorderColor -- 取消显示某series时的样式 ...

   • rich text

     formatter -- 设置显示内容

     textStyle.rich / rich -- 设置细项样式

      // 场景1: legend
      formatter: (name: any) => {
                return ("{title|" + name + "}" 
               );
              },
              textStyle: {
                rich: {
                  title: {
                    align: "right",
                    padding: [0, 0, 4, 0], // 控制间距
                  },
                },
              },
     

      // 场景2: series.label
      type: "bar",
      label: {
                  show: true,
                  position: "insideTopLeft",
                  offset: [-13, -10], // label定位
                  align: "right",
                  formatter: (params: any) => {
                    // 富文本构建
                    if (!params) return;
                    return "{a|" + params.value + "}{one|\n▼}";
                  },
                  rich: {
                    a: {
                      position: "insideTopLeft",
                    },
                    one: {
                      position: "insideTopLeft",
                    },
                  },
                },
     

      // 场景3: xAxis/yAxis.axisLabel
      axisLabel: {
                margin: 50,
                formatter: (value: number, index: number) => {
                  let avgPerDay = this.dataSet[index].avgPerDay;
                  return `{text|总量}{val|${value}}{text|个}{text|\n日均}{val|${this.sepNumber(
                    avgPerDay
                  )}}{text|个}`;
                },
                rich: {
                  text: {
                    padding: [15, 0, 15, 0],
                  },
                  val: {
                    padding: [15, 12, 15, 20],
                  },
                },
              },
      // title 也可...
     

   • 一些对应项

     • 关于 data.props

       // 常用的三处 data： legend.data, xAxis/yAxis.data, series.data

       前两者默认从第三者中获取

       若指定为对象数组，前两者只能获取对象中的 name 属性， 第三者是 value 属性

     • 对应项

       坐标轴 -- x/yAxisInedx

       堆叠柱状图 -- 同一 stack 配置

       Legend.data 中指定对象数组时，name属性与series.name对应（tooltip中的params才有相应配置项）

内容来源于实践总结，如有谬误，属于我个人。