在Vue和React中使用ECharts的多種方法

作者：晨曦 2020-09-14 14:18:05

俗話(huà)說(shuō)：“工欲善其事，必先利其器”。現(xiàn)如今已經(jīng)有許多成熟易用的可視化解決方案，例如ECharts，AntV等等。我們可以把這些解決方案比作是一套套成熟的“工具”，那我們?nèi)绾螌⑦@些“工具”應(yīng)用于當(dāng)前最熱門(mén)的兩個(gè)前端框架中呢？

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

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

npm install echarts --save

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

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

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

接下來(lái)我們就可以在自己想用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ì)額外的引入很多其他沒(méi)有用的配置文件，可能會(huì)導(dǎo)致項(xiàng)目體積過(guò)大。如果因此資源加載的時(shí)間過(guò)長(zhǎng)的話(huà)，也會(huì)影響人們的體驗(yàn)，畢竟人們都喜歡快和更快。

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

Echarts的話(huà)，那我們就在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è)頁(yè)面引用，也可以單獨(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: "測(cè)試表格" 
    }, 
    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() 來(lái)獲取渲染圖表的div，同樣我們也可以用 ref 來(lái)對(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有很多相似之處，只是在寫(xiě)法上有些許不同

全部引入
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: "測(cè)試表格-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)目包體積過(guò)大所造成的負(fù)面影響。當(dāng)然也可以在React中按需引入ECharts，方法和Vue類(lèi)似

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

在React-Hooks中使用
在以前沒(méi)有Hook的時(shí)候，我們都是在class里面寫(xiě)代碼，就如上述的方法一樣。但是現(xiàn)在既然Hook這個(gè)好東西出來(lái)了，哪有不用的道理？

import React, { useEffect, useRef } from 'react'; 
import echarts from 'echarts'; 
 
function MyChart () { 
    const chartRef = useRef() 
    let myChart = null 
    const options = { 
        title: { 
            text: "測(cè)試表格-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，那么為何不把代碼抽離出來(lái)，使之能讓我們進(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

接下來(lái)引用我們剛抽離好的Hook:

import React, { useRef } from 'react' 
import useChart from './useChart' 
 
function Chart () { 
  const chartRef = useRef(null) 
  const options = { 
    title: { 
        text: "測(cè)試表格 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