在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.mswzjz.cn/qtweb/news24/524524.html

    攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

    广告

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

    贝锐智能技术为您推荐以下文章

    动态网站知识

    分类信息网

    公司网站建设　　 　成都网站制作　　 　金羊影视传媒　　 　网站推广　　 　免备案虚拟主机　　 　西云服务器托管　　 　四川国泰民安消防　　 　成都工商服务　　 　大橙子建站　　 　成都能净科技　　 　成都网站建设公司　　 　绵阳服务器托管　　 　绵阳网站制作　　 　品牌网站定制　　 　德阳东方电机技改　　 　攀枝花SEO　　 　成都网络推广公司　　 　域名注册　　 　成都网站推广　　 　青羊总部基地