前言

俗話說：“工欲善其事，必先利其器”。現如今已經有許多成熟易用的可視化解決方案，例如ECharts，AntV等等。我們可以把這些解決方案比作是一套套成熟的“工具”，那我們如何將這些“工具”應用于當前最熱門的兩個前端框架中呢？

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

Vue中運用ECharts

首先我們要把ECharts下載下來：

npm?install?echarts?--save

全局引用

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

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

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

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

??

看看效果：

按需引用

全局引用是把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引入：

然后再改一下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進行操作。我們把代碼作以下修改：

??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?(????????????

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?(????????<>????????????

看看效果

既然我們已經在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?(????<>????????

最后

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

文章若有不足或有更好建議，歡迎提出，大家一起討論~

需要以下資料的請私聊『1』免費獲取資料！

總結

以上是生活随笔為你收集整理的echarts setoption方法_在Vue和React中使用ECharts的多种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。