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

 现在我们就以ECharts为例，来尝试“工具”的各种用法。

创新互联建站专业为企业提供锦州网站建设、锦州做网站、锦州网站设计、锦州网站制作等企业网站建设、网页设计与制作、锦州企业网站模板建站服务，十载锦州做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

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. 
  
  
  
  
    4. 
  
  
  
  
  4. 
  
  
  
  
    6. 
  
  
  
  
  6.   #myChart{
    7. 
  
  
  
  
  7.     width: 400px;
    8. 
  
  
  
  
  8.     height: 400px;
    9. 
  
  
  
  
  9.   }
    10. 
  
  
  
  
  10.

看看效果：

按需引用
全局引用是把Echarts完整的引入，这样做的缺点就是会额外的引入很多其他没有用的配置文件，可能会导致项目体积过大。如果因此资源加载的时间过长的话，也会影响人们的体验，毕竟人们都喜欢快和更快。

针对上述问题，我们可以采用按需引入的方式。如果有很多页面都需要用到

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引入：

 
 
 
 
    
  
  
  
  
    2.

然后再改一下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
我们可以发现，上面的例子都是用 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整个引入，也会面临项目包体积过大所造成的负面影响。当然也可以在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里面写代码，就如上述的方法一样。但是现在既然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.

    看看效果

    既然我们已经在Hook中成功引用了Echarts，那么为何不把代码抽离出来，使之能让我们进行复用呢？我们可以根据实际情况把一些数据作为参数进行传递：

    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.

    最后
    本文主要总结了ECharts作为数据可视化的高效工具在当今热门的几种前端框架中的基本用法。相信对于这方面接触较少的小伙伴来说应该还是会有一定的帮助滴~

    网站标题：在Vue和React中使用ECharts的多种方法
    当前路径：http://www.hantingmc.com/qtweb/news24/524524.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    python知识

    各行业网站

    做手机网站　　 　成都网站设计　　 　成都APP定制开发　　 　成都办公窗帘　　 　仿古建筑设计　　 　做网站公司　　 　seo关键词优化　　 　等级保护测评　　 　资阳网站建设　　 　成都画册制作　　 　成都服务器租用　　 　犀浦防纹窗　　 　成都网站建设　　 　云服务器　　 　四川平武网站建设　　 　高端定制网站设计　　 　成都网站设计公司　　 　成都木托盘　　 　葆金莱自动门　　 　成都定制网站建设