ECharts for React

一、介紹

ECharts 是一款由百度開發的基於 JavaScript 的數據可視化庫，它的特點在於具有良好的可定製性和數據可視化效果，同時支持多種數據格式，能夠快速搭建一個漂亮的數據可視化界面。而 ECharts for React 就是將 ECharts 庫與 React 框架進行整合的組件庫，使得在 React 應用中使用 ECharts 更加便捷。

二、安裝和使用

安裝 ECharts for React 可以使用 npm 安裝命令：

{`npm install echarts-for-react`}

使用 ECharts for React，需要先導入 echarts 和 echarts-for-react：

{`import ReactECharts from 'echarts-for-react';
import echarts from 'echarts';`}

然後即可在 React 組件中使用 ReactEcharts 組件來渲染圖表了：

{`function Chart() {
  const option = {
    // ECharts 配置項
  };
  
  return (
    
  );
}
`}

三、組件 API

1. ReactECharts 組件屬性

ReactECharts 組件支持的屬性包括：

option (required): ECharts 的配置項，必填項。
notMerge: 是否不與之前設置的 option 進行合併，默認為 false。
lazyUpdate: 是否在 setOption 後不立即更新圖表，而是等待調用更新方法時再更新，默認為 false。
showLoading: 是否顯示載入動畫，默認為 false。
loadingOption: 載入動畫的配置項。
loadingProgress: 載入動畫的進度。
onChartReady: 圖表渲染完成時的回調函數。
renderer: 圖表的渲染器，支持 canvas 和 svg 兩種方式，默認為 canvas。
dispose: 是否在組件 unmount 時銷毀圖表實例，默認為 true。
style: 組件的樣式。
className: 組件的類名。
opts: ECharts 實例的配置項。
echarts: echarts 的引用，通常使用 import echarts from ‘echarts’ 導入。

2. 組件實例的方法

通過使用 refs 來獲取組件實例，從而可調用組件實例的方法來對圖表進行操作。ReactECharts 組件實例支持的方法包括：

getEchartsInstance(): 獲取 ECharts 實例，用於調用 ECharts 原生方法。
getDom(): 獲取 ECharts 實例所在的 DOM 元素。
getOption(): 獲取圖表配置項。
setOption(option: object, notMerge?: boolean, lazyUpdate?: boolean): 設置圖表配置項。
clear(): 清空圖表內容。
showLoading(type?: string, opts?: object): 顯示載入動畫，type 為載入動畫類型，默認為 default。
hideLoading(): 隱藏載入動畫。
resize(): 重置圖表大小。
dispatchAction(option: object): 觸發某個行為，例如切換折線圖的顯示與隱藏操作。

四、使用示例

1. 柱狀圖

{`import ReactECharts from 'echarts-for-react';
import echarts from 'echarts';

function BarChart() {
  const option = {
    title: {
      text: '柱狀圖',
    },
    tooltip: {},
    xAxis: {
      data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'],
    },
    yAxis: {},
    series: [{
      name: '銷量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20],
    }],
  };

  return (
    
  );
}`}

2. 折線圖

{`import ReactECharts from 'echarts-for-react';
import echarts from 'echarts';

function LineChart() {
  const option = {
    title: {
      text: '折線圖',
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    },
    yAxis: {
      type: 'value',
    },
    series: [{
      name: '郵件營銷',
      type: 'line',
      stack: '總量',
      data: [120, 132, 101, 134, 90, 230, 210],
    }, {
      name: '聯盟廣告',
      type: 'line',
      stack: '總量',
      data: [220, 182, 191, 234, 290, 330, 310],
    }, {
      name: '視頻廣告',
      type: 'line',
      stack: '總量',
      data: [150, 232, 201, 154, 190, 330, 410],
    }, {
      name: '直接訪問',
      type: 'line',
      stack: '總量',
      data: [320, 332, 301, 334, 390, 330, 320],
    }, {
      name: '搜索引擎',
      type: 'line',
      stack: '總量',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
    }],
  };

  return (
    
  );
}`}

3. 餅圖

{`import ReactECharts from 'echarts-for-react';
import echarts from 'echarts';

function PieChart() {
  const option = {
    title: {
      text: '餅圖',
    },
    tooltip: {},
    series: [{
      name: '訪問來源',
      type: 'pie',
      radius: '50%',
      data: [
        {value: 335, name: '直接訪問'},
        {value: 310, name: '郵件營銷'},
        {value: 234, name: '聯盟廣告'},
        {value: 135, name: '視頻廣告'},
        {value: 1548, name: '搜索引擎'},
      ],
    }],
  };

  return (
    
  );
}`}

4. 地圖

{`import ReactECharts from 'echarts-for-react';
import echarts from 'echarts/dist/echarts'; // 引入中國地圖的配置文件
import 'echarts/map/js/china';

function MapChart() {
  const option = {
    visualMap: {
      min: 0,
      max: 1000,
      left: 'left',
      top: 'bottom',
      calculable: true,
      inRange: {
        color: ['#e0ffff', '#006edd'],
      },
    },
    series: [
      {
        type: 'map',
        mapType: 'china',
        roam: false, // 禁止拖拽和縮放地圖
        label: {
          normal: {
            show: true,
          },
          emphasis: {
            show: true,
          },
        },
        data: [
          { name: '北京', value: 110 },
          { name: '天津', value: 100 },
          { name: '上海', value: 130 },
          { name: '重慶', value: 120 },
          { name: '河北', value: 50 },
          { name: '河南', value: 20 },
          { name: '雲南', value: 170 },
          { name: '遼寧', value: 70 },
          { name: '黑龍江', value: 80 },
          { name: '湖南', value: 180 },
          { name: '安徽', value: 90 },
          { name: '山東', value: 140 },
          { name: '新疆', value: 10 },
          { name: '江蘇', value: 110 },
          { name: '浙江', value: 200 },
          { name: '江西', value: 70 },
          { name: '湖北', value: 230 },
          { name: '廣西', value: 80 },
          { name: '甘肅', value: 20 },
          { name: '山西', value: 40 },
          { name: '內蒙古', value: 70 },
          { name: '陝西', value: 80 },
          { name: '吉林', value: 50 },
          { name: '福建', value: 100 },
          { name: '貴州', value: 60 },
          { name: '廣東', value: 300 },
          { name: '青海', value: 10 },
          { name: '西藏', value: 1 },
          { name: '四川', value: 200 },
          { name: '寧夏', value: 20 },
          { name: '海南', value: 10 },
          { name: '台灣', value: 3 },
          { name: '香港', value: 7 },
          { name: '澳門', value: 7 },
        ],
      },
    ],
  };

  return (
    
  );
}`}

原創文章，作者：ZDQB，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/142766.html