現在我們就以ECharts為例，來嘗試“工具”的各種用法。

Vue中運用ECharts
首先我們要把ECharts下載下來：

npm install echarts --save 

全局引用
全局引用的好處就是我們一次性把ECharts引入項目后，就可以在任何一個組件中使用ECharts了。

首先在項目的main.js中引入ECharts，然后將其綁定在vue的原型上面：

import echarts from 'echarts' 
 
Vue.prototype.$echarts = echarts 

接下來我們就可以在自己想用ECharts的組件中引用了：

<template> 
  <div> 
    <div id="myChart"></div> 
  </div> 
</template> 
 
<script> 
export default{ 
  name: 'chart', 
  data () { 
    return { 
      chart: null, 
      options: {} 
    } 
  }, 
  mounted () { 
    this.initOptions() 
    this.initCharts() 
  }, 
  methods: { 
    initOptions () { 
      this.options = { 
        xAxis: { 
          type: 'category', 
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 
        }, 
        yAxis: { 
          type: 'value' 
        }, 
        series: [{ 
          data: [820, 932, 901, 934, 1290, 1330, 1320], 
          type: 'line' 
        }] 
      } 
    }, 
    initCharts () { 
      this.chart = this.$echarts.init(document.getElementById('myChart')) 
      this.chart.setOption(this.options) 
    } 
  } 
} 
</script> 
 
<style scoped> 
  #myChart{ 
    width: 400px; 
    height: 400px; 
  } 
</style> 

看看效果：

按需引用
全局引用是把Echarts完整的引入，這樣做的缺點就是會額外的引入很多其他沒有用的配置文件，可能會導致項目體積過大。如果因此資源加載的時間過長的話，也會影響人們的體驗，畢竟人們都喜歡快和更快。

針對上述問題，我們可以采用按需引入的方式。如果有很多頁面都需要用到

Echarts的話，那我們就在main.js中引入：

let echarts = require('echarts/lib/echarts') 
 
require('echarts/lib/chart/line') 
 
require('echarts/lib/component/tooltip') 
require('echarts/lib/component/title') 
 
Vue.prototype.$echarts = echarts 

如果只是在偶爾幾個頁面引用，也可以單獨在.vue引入：

<script> 
let echarts = require('echarts/lib/echarts') 
 
require('echarts/lib/chart/line') 
 
require('echarts/lib/component/tooltip') 
require('echarts/lib/component/title') 
 
</script> 

然后再改一下Echarts的配置項：

this.options = { 
    title: { 
      text: "測試表格" 
    }, 
    tooltip: { 
      trigger: 'axis' 
    }, 
    xAxis: { 
      type: 'category', 
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 
    }, 
    yAxis: { 
      type: 'value' 
    }, 
    series: [{ 
      data: [820, 932, 901, 934, 1290, 1330, 1320], 
      type: 'line' 
    }] 

ref獲取DOM
我們可以發現，上面的例子都是用 getElementById() 來獲取渲染圖表的div，同樣我們也可以用 ref 來對真實的DOM進行操作。我們把代碼作以下修改：

<template> 
  <div> 
    <div id="myChart" ref="myChart"></div> 
  </div> 
</template> 

initCharts () { 
  // this.chart = this.$echarts.init(document.getElementById('myChart')) 
  this.chart = this.$echarts.init(this.$refs.myChart) 
  this.chart.setOption(this.options) 
} 

最終得到的效果是一樣的

React中運用ECharts
在React中運用ECharts的方式和Vue有很多相似之處，只是在寫法上有些許不同

全部引入
chart.jsx

import React, { Component } from 'react'; 
import echarts from 'echarts' 
import './chart.less'; 
 
export class App extends Component { 
    constructor(props) { 
        super(props); 
        this.state = { 
            data:[820, 932, 901, 934, 1290, 1330, 1320] 
        } 
    } 
 
    componentDidMount(){ 
        this.initCharts(); 
    } 
    //初始化 
    initCharts = () => { 
        let myChart = echarts.init(document.getElementById('myChart')); 
        let option = { 
            title: { 
                text: "測試表格-react" 
              }, 
              tooltip: { 
                trigger: 'axis' 
              }, 
              xAxis: { 
                type: 'category', 
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 
              }, 
              yAxis: { 
                type: 'value' 
              }, 
              series: [{ 
                data: this.state.data, 
                type: 'line' 
              }] 
        }; 
        myChart.setOption(option); 
        window.addEventListener("resize", function () { 
            myChart.resize(); 
        }); 
    } 
 
    render(){ 
        return ( 
            <div className="chart"> 
                <div id="myChart"></div> 
            </div> 
        ) 
    } 
} 

chart.less

.chart{ 
    display: flex; 
    flex: 1; 
    #myChart{ 
        width: 400px; 
        height: 400px; 
    } 
} 

效果

按需引入
在React中，如果把ECharts整個引入，也會面臨項目包體積過大所造成的負面影響。當然也可以在React中按需引入ECharts，方法和Vue類似

import echarts = 'echarts/lib/echarts' 
 
import 'echarts/lib/chart/line' 
 
import 'echarts/lib/component/tooltip' 
import 'echarts/lib/component/title' 

在React-Hooks中使用
在以前沒有Hook的時候，我們都是在class里面寫代碼，就如上述的方法一樣。但是現在既然Hook這個好東西出來了，哪有不用的道理？

import React, { useEffect, useRef } from 'react'; 
import echarts from 'echarts'; 
 
function MyChart () { 
    const chartRef = useRef() 
    let myChart = null 
    const options = { 
        title: { 
            text: "測試表格-react-hook" 
        }, 
        tooltip: { 
            trigger: 'axis' 
        }, 
        xAxis: { 
            type: 'category', 
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 
        }, 
        yAxis: { 
            type: 'value' 
        }, 
        series: [{ 
            data: [820, 932, 901, 934, 1290, 1330, 1320], 
            type: 'line' 
        }] 
    } 
 
    function renderChart() { 
        const chart = echarts.getInstanceByDom(chartRef.current) 
        if (chart) { 
            myChart = chart 
        } else { 
            myChart = echarts.init(chartRef.current) 
        } 
        myChart.setOption(options) 
    } 
 
    useEffect(() => { 
        renderChart() 
        return () => { 
            myChart && myChart.dispose() 
        } 
    }) 
 
    return ( 
        <> 
            <div style={{width: "400px", height: "400px"}} ref={chartRef} /> 
        </> 
    ) 
} 
 
export default MyChart 

看看效果

既然我們已經在Hook中成功引用了Echarts，那么為何不把代碼抽離出來，使之能讓我們進行復用呢？我們可以根據實際情況把一些數據作為參數進行傳遞：

useChart.js

import React, { useEffect } from 'react'; 
import echarts from 'echarts'; 
 
function useChart (chartRef, options) { 
 
    let myChart = null; 
 
    function renderChart() { 
        const chart = echarts.getInstanceByDom(chartRef.current) 
        if (chart) { 
            myChart = chart 
        } else { 
            myChart = echarts.init(chartRef.current) 
        } 
        myChart.setOption(options) 
    }; 
 
    useEffect(() => { 
        renderChart() 
    }, [options]) 
 
    useEffect(() => { 
        return () => { 
            myChart && myChart.dispose() 
        } 
    }, []) 
 
    return 
} 
 
export default useChart 

接下來引用我們剛抽離好的Hook:

import React, { useRef } from 'react' 
import useChart from './useChart' 
 
function Chart () { 
  const chartRef = useRef(null) 
  const options = { 
    title: { 
        text: "測試表格 react-hook 抽離" 
    }, 
    tooltip: { 
        trigger: 'axis' 
    }, 
    xAxis: { 
        type: 'category', 
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 
    }, 
    yAxis: { 
        type: 'value' 
    }, 
    series: [{ 
        data: [820, 932, 901, 934, 1290, 1330, 1320], 
        type: 'line' 
    }] 
  } 
  useChart (chartRef, options) 
 
  return ( 
    <> 
        <div style={{width: "400px", height: "400px"}} ref={chartRef} /> 
    </> 
  ) 
} 
 
export default Chart 

最后
本文主要總結了ECharts作為數據可視化的高效工具在當今熱門的幾種前端框架中的基本用法。相信對于這方面接觸較少的小伙伴來說應該還是會有一定的幫助滴~