日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
在Vue和React中使用ECharts的多種方法

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

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供錦州網(wǎng)站建設(shè)、錦州做網(wǎng)站、錦州網(wǎng)站設(shè)計、錦州網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、錦州企業(yè)網(wǎng)站模板建站服務(wù)，十載錦州做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

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

 
 
 
 
    
  
  
  
  
  1. npm install echarts --save
    2.

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

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

 
 
 
 
    
  
  
  
  
  1. import echarts from 'echarts'
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. Vue.prototype.$echarts = echarts
    4.

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. 
  
  
  
  
  4. 
  
  
  
  
    6. 
  
  
  
  
  6.   #myChart{
    7. 
  
  
  
  
  7.     width: 400px;
    8. 
  
  
  
  
  8.     height: 400px;
    9. 
  
  
  
  
  9.   }
    10. 
  
  
  
  
  10.

看看效果：

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

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

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

 
 
 
 
    
  
  
  
  
  1. let echarts = require('echarts/lib/echarts')
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. require('echarts/lib/chart/line')
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. require('echarts/lib/component/tooltip')
    6. 
  
  
  
  
  6. require('echarts/lib/component/title')
    7. 
  
  
  
  
  7. 
  
  
  
  
  8. Vue.prototype.$echarts = echarts
    9.

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

 
 
 
 
    
  
  
  
  
  1.

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

 
 
 
 
    
  
  
  
  
  1. this.options = {
    2. 
  
  
  
  
  2.     title: {
    3. 
  
  
  
  
  3.       text: "測試表格"
    4. 
  
  
  
  
  4.     },
    5. 
  
  
  
  
  5.     tooltip: {
    6. 
  
  
  
  
  6.       trigger: 'axis'
    7. 
  
  
  
  
  7.     },
    8. 
  
  
  
  
  8.     xAxis: {
    9. 
  
  
  
  
  9.       type: 'category',
    10. 
  
  
  
  
  10.       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    11. 
  
  
  
  
  11.     },
    12. 
  
  
  
  
  12.     yAxis: {
    13. 
  
  
  
  
  13.       type: 'value'
    14. 
  
  
  
  
  14.     },
    15. 
  
  
  
  
  15.     series: [{
    16. 
  
  
  
  
  16.       data: [820, 932, 901, 934, 1290, 1330, 1320],
    17. 
  
  
  
  
  17.       type: 'line'
    18. 
  
  
  
  
  18.     }]
    19.

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

 
 
 
 
    
  
  
  
  
    2. 
 
 
 
 

 
 
 
 
    
  
  
  
  
  1. initCharts () {
    2. 
  
  
  
  
  2.   // this.chart = this.$echarts.init(document.getElementById('myChart'))
    3. 
  
  
  
  
  3.   this.chart = this.$echarts.init(this.$refs.myChart)
    4. 
  
  
  
  
  4.   this.chart.setOption(this.options)
    5. 
  
  
  
  
  5. }
    6.

最終得到的效果是一樣的

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

全部引入
chart.jsx

 
 
 
 
    
  
  
  
  
  1. import React, { Component } from 'react';
    2. 
  
  
  
  
  2. import echarts from 'echarts'
    3. 
  
  
  
  
  3. import './chart.less';
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. export class App extends Component {
    6. 
  
  
  
  
  6.     constructor(props) {
    7. 
  
  
  
  
  7.         super(props);
    8. 
  
  
  
  
  8.         this.state = {
    9. 
  
  
  
  
  9.             data:[820, 932, 901, 934, 1290, 1330, 1320]
    10. 
  
  
  
  
  10.         }
    11. 
  
  
  
  
  11.     }
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.     componentDidMount(){
    14. 
  
  
  
  
  14.         this.initCharts();
    15. 
  
  
  
  
  15.     }
    16. 
  
  
  
  
  16.     //初始化
    17. 
  
  
  
  
  17.     initCharts = () => {
    18. 
  
  
  
  
  18.         let myChart = echarts.init(document.getElementById('myChart'));
    19. 
  
  
  
  
  19.         let option = {
    20. 
  
  
  
  
  20.             title: {
    21. 
  
  
  
  
  21.                 text: "測試表格-react"
    22. 
  
  
  
  
  22.               },
    23. 
  
  
  
  
  23.               tooltip: {
    24. 
  
  
  
  
  24.                 trigger: 'axis'
    25. 
  
  
  
  
  25.               },
    26. 
  
  
  
  
  26.               xAxis: {
    27. 
  
  
  
  
  27.                 type: 'category',
    28. 
  
  
  
  
  28.                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    29. 
  
  
  
  
  29.               },
    30. 
  
  
  
  
  30.               yAxis: {
    31. 
  
  
  
  
  31.                 type: 'value'
    32. 
  
  
  
  
  32.               },
    33. 
  
  
  
  
  33.               series: [{
    34. 
  
  
  
  
  34.                 data: this.state.data,
    35. 
  
  
  
  
  35.                 type: 'line'
    36. 
  
  
  
  
  36.               }]
    37. 
  
  
  
  
  37.         };
    38. 
  
  
  
  
  38.         myChart.setOption(option);
    39. 
  
  
  
  
  39.         window.addEventListener("resize", function () {
    40. 
  
  
  
  
  40.             myChart.resize();
    41. 
  
  
  
  
  41.         });
    42. 
  
  
  
  
  42.     }
    43. 
  
  
  
  
  43. 
  
  
  
  
  44.     render(){
    45. 
  
  
  
  
  45.         return (
    46. 
  
  
  
  
  46.             
    47. 
  
  
  
  
  47.                 
  •             
  •         )
  •     }
  • }

    • chart.less

     
 
 
 
      
  
  
  
  
    1. .chart{
      2. 
  
  
  
  
    2.     display: flex;
      3. 
  
  
  
  
    3.     flex: 1;
      4. 
  
  
  
  
    4.     #myChart{
      5. 
  
  
  
  
    5.         width: 400px;
      6. 
  
  
  
  
    6.         height: 400px;
      7. 
  
  
  
  
    7.     }
      8. 
  
  
  
  
    8. }
      9.

    效果

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

     
 
 
 
      
  
  
  
  
    1. import echarts = 'echarts/lib/echarts'
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. import 'echarts/lib/chart/line'
      4. 
  
  
  
  
    4. 
  
  
  
  
    5. import 'echarts/lib/component/tooltip'
      6. 
  
  
  
  
    6. import 'echarts/lib/component/title'
      7.

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

     
 
 
 
      
  
  
  
  
    1. import React, { useEffect, useRef } from 'react';
      2. 
  
  
  
  
    2. import echarts from 'echarts';
      3. 
  
  
  
  
    3. 
  
  
  
  
    4. function MyChart () {
      5. 
  
  
  
  
    5.     const chartRef = useRef()
      6. 
  
  
  
  
    6.     let myChart = null
      7. 
  
  
  
  
    7.     const options = {
      8. 
  
  
  
  
    8.         title: {
      9. 
  
  
  
  
    9.             text: "測試表格-react-hook"
      10. 
  
  
  
  
    10.         },
      11. 
  
  
  
  
    11.         tooltip: {
      12. 
  
  
  
  
    12.             trigger: 'axis'
      13. 
  
  
  
  
    13.         },
      14. 
  
  
  
  
    14.         xAxis: {
      15. 
  
  
  
  
    15.             type: 'category',
      16. 
  
  
  
  
    16.             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      17. 
  
  
  
  
    17.         },
      18. 
  
  
  
  
    18.         yAxis: {
      19. 
  
  
  
  
    19.             type: 'value'
      20. 
  
  
  
  
    20.         },
      21. 
  
  
  
  
    21.         series: [{
      22. 
  
  
  
  
    22.             data: [820, 932, 901, 934, 1290, 1330, 1320],
      23. 
  
  
  
  
    23.             type: 'line'
      24. 
  
  
  
  
    24.         }]
      25. 
  
  
  
  
    25.     }
      26. 
  
  
  
  
    26. 
  
  
  
  
    27.     function renderChart() {
      28. 
  
  
  
  
    28.         const chart = echarts.getInstanceByDom(chartRef.current)
      29. 
  
  
  
  
    29.         if (chart) {
      30. 
  
  
  
  
    30.             myChart = chart
      31. 
  
  
  
  
    31.         } else {
      32. 
  
  
  
  
    32.             myChart = echarts.init(chartRef.current)
      33. 
  
  
  
  
    33.         }
      34. 
  
  
  
  
    34.         myChart.setOption(options)
      35. 
  
  
  
  
    35.     }
      36. 
  
  
  
  
    36. 
  
  
  
  
    37.     useEffect(() => {
      38. 
  
  
  
  
    38.         renderChart()
      39. 
  
  
  
  
    39.         return () => {
      40. 
  
  
  
  
    40.             myChart && myChart.dispose()
      41. 
  
  
  
  
    41.         }
      42. 
  
  
  
  
    42.     })
      43. 
  
  
  
  
    43. 
  
  
  
  
    44.     return (
      45. 
  
  
  
  
    45.         <>
      46. 
  
  
  
  
    46.             
      47. 
  
  
  
  
    47.         
      48. 
  
  
  
  
    48.     )
      49. 
  
  
  
  
    49. }
      50. 
  
  
  
  
    50. 
  
  
  
  
    51. export default MyChart
      52.

    看看效果

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

    useChart.js

     
 
 
 
      
  
  
  
  
    1. import React, { useEffect } from 'react';
      2. 
  
  
  
  
    2. import echarts from 'echarts';
      3. 
  
  
  
  
    3. 
  
  
  
  
    4. function useChart (chartRef, options) {
      5. 
  
  
  
  
    5. 
  
  
  
  
    6.     let myChart = null;
      7. 
  
  
  
  
    7. 
  
  
  
  
    8.     function renderChart() {
      9. 
  
  
  
  
    9.         const chart = echarts.getInstanceByDom(chartRef.current)
      10. 
  
  
  
  
    10.         if (chart) {
      11. 
  
  
  
  
    11.             myChart = chart
      12. 
  
  
  
  
    12.         } else {
      13. 
  
  
  
  
    13.             myChart = echarts.init(chartRef.current)
      14. 
  
  
  
  
    14.         }
      15. 
  
  
  
  
    15.         myChart.setOption(options)
      16. 
  
  
  
  
    16.     };
      17. 
  
  
  
  
    17. 
  
  
  
  
    18.     useEffect(() => {
      19. 
  
  
  
  
    19.         renderChart()
      20. 
  
  
  
  
    20.     }, [options])
      21. 
  
  
  
  
    21. 
  
  
  
  
    22.     useEffect(() => {
      23. 
  
  
  
  
    23.         return () => {
      24. 
  
  
  
  
    24.             myChart && myChart.dispose()
      25. 
  
  
  
  
    25.         }
      26. 
  
  
  
  
    26.     }, [])
      27. 
  
  
  
  
    27. 
  
  
  
  
    28.     return
      29. 
  
  
  
  
    29. }
      30. 
  
  
  
  
    30. 
  
  
  
  
    31. export default useChart
      32.

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

     
 
 
 
      
  
  
  
  
    1. import React, { useRef } from 'react'
      2. 
  
  
  
  
    2. import useChart from './useChart'
      3. 
  
  
  
  
    3. 
  
  
  
  
    4. function Chart () {
      5. 
  
  
  
  
    5.   const chartRef = useRef(null)
      6. 
  
  
  
  
    6.   const options = {
      7. 
  
  
  
  
    7.     title: {
      8. 
  
  
  
  
    8.         text: "測試表格 react-hook 抽離"
      9. 
  
  
  
  
    9.     },
      10. 
  
  
  
  
    10.     tooltip: {
      11. 
  
  
  
  
    11.         trigger: 'axis'
      12. 
  
  
  
  
    12.     },
      13. 
  
  
  
  
    13.     xAxis: {
      14. 
  
  
  
  
    14.         type: 'category',
      15. 
  
  
  
  
    15.         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      16. 
  
  
  
  
    16.     },
      17. 
  
  
  
  
    17.     yAxis: {
      18. 
  
  
  
  
    18.         type: 'value'
      19. 
  
  
  
  
    19.     },
      20. 
  
  
  
  
    20.     series: [{
      21. 
  
  
  
  
    21.         data: [820, 932, 901, 934, 1290, 1330, 1320],
      22. 
  
  
  
  
    22.         type: 'line'
      23. 
  
  
  
  
    23.     }]
      24. 
  
  
  
  
    24.   }
      25. 
  
  
  
  
    25.   useChart (chartRef, options)
      26. 
  
  
  
  
    26. 
  
  
  
  
    27.   return (
      28. 
  
  
  
  
    28.     <>
      29. 
  
  
  
  
    29.         
      30. 
  
  
  
  
    30.     
      31. 
  
  
  
  
    31.   )
      32. 
  
  
  
  
    32. }
      33. 
  
  
  
  
    33. 
  
  
  
  
    34. export default Chart
      35.

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


    分享文章：在Vue和React中使用ECharts的多種方法
    當(dāng)前地址：http://m.5511xx.com/article/coehjpo.html