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

Vue中運(yùn)用ECharts
首先我們要把ECharts下載下來：

npm install echarts --save 

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

首先在項(xiàng)目的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完整的引入，這樣做的缺點(diǎn)就是會(huì)額外的引入很多其他沒有用的配置文件，可能會(huì)導(dǎo)致項(xiàng)目體積過大。如果因此資源加載的時(shí)間過長的話，也會(huì)影響人們的體驗(yàn)，畢竟人們都喜歡快和更快。

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

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 

如果只是在偶爾幾個(gè)頁面引用，也可以單獨(dú)在.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的配置項(xiàng)：

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
我們可以發(fā)現(xiàn)，上面的例子都是用 getElementById() 來獲取渲染圖表的div，同樣我們也可以用 ref 來對(duì)真實(shí)的DOM進(jìn)行操作。我們把代碼作以下修改：

<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中運(yùn)用ECharts
在React中運(yùn)用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整個(gè)引入，也會(huì)面臨項(xiàng)目包體積過大所造成的負(fù)面影響。當(dāng)然也可以在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的時(shí)候，我們都是在class里面寫代碼，就如上述的方法一樣。但是現(xiàn)在既然Hook這個(gè)好東西出來了，哪有不用的道理？

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 

看看效果

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

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 

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