ECharts

ECharts的官網描述：

ECharts掺喻，一個使用 JavaScript 實現的開源可視化庫税手，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11灵迫，Chrome浑劳，Firefox，Safari等）琐馆，底層依賴矢量圖形庫 ZRender规阀，提供直觀，交互豐富啡捶，可高度個性化定制的數據可視化圖表姥敛。

對比了多款數據可視化產品后，對ECharts鐘愛有加瞎暑，不僅是其豐富的配置項彤敛，恰當的表現形式，更優(yōu)秀的是相對龐大的社區(qū)群體了赌。
但在由于采用的前端框架為React/UMI/Ant Design墨榄，所以在使用過程中遇到了不少問題，經歷了一段的填坑期勿她，現在已經可以正常使用了袄秩。

依賴包

"echarts": "^4.2.1",
"echarts-for-react": "^2.0.15-beta.0",
"echarts-gl": "^1.1.1",
"echarts-liquidfill": "^2.0.5",

其中echarts 和 echarts-for-react 是必須要有的，另外兩個是在使用特定組件的時候需要用到的，echarts-gl 是使用GL組件必須的包之剧，echarts-liquidfill是在做水波圖時必須的包郭卫。

使用方式

echarts-for-react針對ECharts提供了專用組件ReactEcharts，只需配置option參數背稼，即可實現ECharts組件的正常顯示贰军，簡單寫個例子(我用的都是函數式組件)：

import React from 'react';
import ReactEcharts from 'echarts-for-react';

export const EchartExample = (props) => {
  const option = {
    ...
  }
  return (
    <div>
      <ReactEcharts option={option}/>
    </div>
  );
};

其中option就是ECharts的配置項了，具體內容可以參照：
ECharts配置項手冊
也可看一些教程：
w3cschool的ECharts教程

舉個簡單的例子：

  const option = {
    backgroundColor: '#001529',
    color: '#0093EE',
    title: {
      top: '2%',
      left: '5%',
      text: title,
      textStyle: {
        color: '#ffffff',
        fontSize: 12,
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
      backgroundColor: ['rgba(255,255,255,0.85)'],
      textStyle: {
        fontSize: 10,
        color: '#353535',
      },
      formatter: function(params) {
        const date = params[0].name;
        const value = params[0].value;
        return `<div align="left">${date}</div><div align="left">${params[0].seriesName}: ${typeof (value) == 'number' ? value.toFixed(2) : "無數據"}</div>`;
      },
    },
    grid: {
      left: '7%',
      right: '5%',
      top: '12%',
      bottom: '12%',
    },
    xAxis: [{
      type: 'category',
      data: timeMode?xdata.map((data)=>{return data.split("T")[0].slice(5, 10)}):xdata,
      axisPointer: {
        type: 'shadow',
      },
      axisLine: {
        lineStyle: {
          color: Chart.Config.x_line_color,
        },
      },
      axisLabel: {
        // margin: 26,
        interval: (typeof(xdata)==="undefined"||xdata==null)?2:parseInt((xdata.length/20).toString()),
        rotate: 40,
        textStyle: {
          color: Chart.Config.x_font_color,
          fontSize: 10,
        },
      },
    }],
    yAxis: [{
      axisPointer: {
        show: false,
      },
      splitNumber: 6,
      type: 'value',
      min: 0, //max: 6000,
      axisLabel: {
        textStyle: {
          color: Chart.Config.y_font_color,
          fontSize: '12px',
        },
      },
      axisLine: {
        lineStyle: {
          color: Chart.Config.y_line_color,
        },
      },
      splitLine: {
        lineStyle: {
          color: Chart.Config.split_line_color,
          width: 0,
          type: 'solid',
        },
      },
    },
      {
        axisPointer: {
          show: false,
        },
        splitNumber: 6,
        type: 'value',
        min: 0, //max: 0.6,
        axisLabel: {
          textStyle: {
            color: Chart.Config.y_font_color,
            fontSize: '12px',
          },
        },
        axisLine: {
          lineStyle: {
            color: Chart.Config.y_line_color,
          },
        },
        splitLine: {
          lineStyle: {
            color: Chart.Config.split_line_color,
            width: 1,
            type: 'solid',
          },
        },
      },
    ],
    series: {
      name: title,
      type: 'bar',
      data: ydata,
    },
  };

如何使用echarts的api

echarts-for-react支持echarts api的調用蟹肘，其中用到了useRef這個hook來實現词疼，具體的，需要在組件中定義一個ref帘腹，然后作為參數傳遞給ReactEcharts贰盗。舉例說明(用的TS，需要變量類型)：

export const TestEcharts = () => {
  let trendRef = useRef();
  const option = {
    ...
  }
  return (
    <div>
        <ReactEcharts 
          option={option}
          ref={ref}
        />
    </div>
  )
}

這樣定義之后阳欲，在需要調用api的時候舵盈，就像調用ref方法一樣：

//獲取ref
let eChartsRef = trendRef.current;
//獲取echarts對象
let chart = eChartsRef.getEchartsInstance();

然后，在chart這個對象中球化，就有echarts提供的api了书释，報告設置樣式，圖標導出等等赊窥。

填坑記錄

前面的內容基本在網上一搜都能直接找到答案爆惧，但實際工程應用中還是遇到了不少問題，幾個比較耗時間查找的問題記錄如下：

1 修改曲線組件的legend的formatter

具體說就是锨能，比如文字太長扯再，超過多少顯示省略號什么的。

legend: {
    formatter: function (name) {
        return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
    },
    tooltip: {
        show: true
    }
}

這是需要引入echarts址遇，才能正確執(zhí)行配置熄阻。

  //引入echarts 才能使用format
  const echarts = require('echarts/lib/echarts');

2 GL組件的使用

前邊依賴包的列舉已經寫上了，需要增加echarts-gl這個依賴倔约。

3 水波圖

目前發(fā)現好像就這里用到過秃殉，必須增加echarts-liquidfill這個依賴。

4 漸變色

使用方法是配置color的時候new一個
echarts.graphic.LinearGradient浸剩，具體就是這樣：

    itemStyle: {
        normal: {
          barBorderRadius: 30,
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, [{
              offset: 0,
              color: '#00feff',
            },
              {
                offset: 0.5,
                color: '#027eff',
              },
              {
                offset: 1,
                color: '#0286ff',
              },
            ],
          ),
        },
      },

注意的是這里必須導入echarts钾军，否則無法執(zhí)行配置：

import echarts from 'echarts'; 
import 'echarts-gl';

可能不需要導入echarts-gl，因為coding時導入了绢要，沒去掉吏恭，忘記是不是有用了……

5 圖表與tab并存時，圖表的導出尺寸異常

這個問題可能使用場景比較少重罪，很少有人用到樱哼，所以網上資料不多哀九，但我確實遇到了，而且還查了很久搅幅。
記錄一下：

產生原因：在隱藏tab中的圖表阅束，其默認尺寸會為初始狀態(tài)，當切換顯示時茄唐，會恢復到定義的尺寸围俘。那么如果在其隱藏時，導出圖表的尺寸就依然時初始狀態(tài)琢融。
解決方式：最好可以在保證圖表隱藏前，提前將要獲取的信息通過echarts api取出來簿寂，存到對象中漾抬，這樣再進行其他操作時，無需再調用echarts api常遂。

持續(xù)更新纳令。

react中使用ECharts注意的問題