Echart 上自定义一些图标，或者文案，水印等等 getEchartsInstance和convertToPixel方法

在实际的项目中，用到Echart的时候，除了一些数据显示，经常还会有一些，别的显示，比如，百分比，水印，或者其他图标。
我这里介绍一个属性： graphic 。

1. 如果给echart添加水印，观望有案例，不在赘述。
2. 如下图，需要达到如图，给某个位置添加一些元素。
   
   我这里通过使用graphic, 爸想要添加的元素，定位到各自相应的位置， 既然说是定位， 那就需要知道坐标，就需要用到Echart一个方法 convertToPixel ： 转换坐标系上的点到像素坐标值。
3. 第一个柱状图花了一个虚线， 首先我们可以获取到图标的数据data是一个数组，里面的值是每一个柱状图的y轴的值，通过遍历这个数组结合convertToPixel方法，得到每一个柱状图值的坐标值。

` const [Grifics, setGrifics] = useState<{x: number, y : number}[]>([]);
  
  useEffect(() => {
    const arr: {x: number, y : number}[] = [];
    data?.map((item: number, index: number) => {
      const chartInit = chartRef.current?.getEchartsInstance();
      const x = chartInit.convertToPixel({xAxisIndex: 0}, index ?? 0)
      const y = chartInit.convertToPixel({yAxisIndex: 0}, item)
      arr.push({x: x, y: y})
    })
    setGrifics(arr)
  },[data]);`

上述代码得到的Grifics 值就是途中每一个值的坐标位置。
4. 图中的第一个柱状图画了一个虚线， 官网中有一些属性，位移，旋转， 样式等可以根据需求来用，它的代码是

 {
        type: "group",
        height: 200,
        position: [0, 0],
        children: [
          {
              type: 'line',
              z: 100,
              shape: {
                x1: Grifics?.[0]?.x, //起始点的x坐标
                y1: Grifics?.[0]?.y, //起始点的y坐标
                x2: Grifics?.[0]?.x + 100, //终点的x坐标
                y2: Grifics?.[0]?.y, //终点点的y坐标
              },
              style: {
                stroke: '#f21',
                lineDash: [3, 5],
                lineWidth: 2,
              },
            
          }
        ],
      },

5. 图标的代码

 {
   type: "image",
   id: 1,
   z: 120,
   left: Grifics?.[1]?.x,
   top: Grifics?.[1]?.y,
   style: {
      image: `${Warn}`,
      width: 20,
      height: 20
   },
   onclick: warnClick
},     

6. 最后一个组合的圆形和文字

{
 type: "group",
 children: [{
 type: "circle",
 z: 120,
 shape: {
    cx:  Grifics?.[3]?.x,
    cy: Grifics?.[3]?.y - 30,
    r: 20
 },
 style: {
    stroke: '#f21',
    fill: '#fff'
 }
 }, {
   type: "text",
   z: 120,
   style: {
   x:  Grifics?.[3]?.x - 10,
   y: Grifics?.[3]?.y - 30,
   text: 'info'
 }
}]}