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

时间 2020-08-28

标签 vue react 使用 echarts 多种方法栏目 React 繁體版

原文原文链接

前言

俗话说：“工欲善其事，必先利其器”。现现在已经有许多成熟易用的可视化解决方案，例如ECharts，AntV等等。咱们能够把这些解决方案比做是一套套成熟的“工具”，那咱们如何将这些“工具”应用于当前最热门的两个前端框架中呢？前端

不慌，如今咱们就以ECharts为例，来尝试“工具”的各类用法。vue

Vue中运用ECharts

首先咱们要把ECharts下载下来：react

npm install echarts --save

全局引用

全局引用的好处就是咱们一次性把ECharts引入项目后，就能够在任何一个组件中使用ECharts了。npm

首先在项目的main.js中引入ECharts，而后将其绑定在vue的原型上面：前端框架

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

接下来咱们就能够在本身想用ECharts的组件中引用了：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完整的引入，这样作的缺点就是会额外的引入不少其余没有用的配置文件，可能会致使项目体积过大。若是所以资源加载的时间过长的话，也会影响人们的体验，毕竟人们都喜欢快和更快。less

针对上述问题，咱们能够采用按需引入的方式。若是有不少页面都须要用到
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引入：测试

<script>
let echarts = require('echarts/lib/echarts')

require('echarts/lib/chart/line')

require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

</script>

而后再改一下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进行操做。咱们把代码做如下修改：

<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中运用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 (
            <div className="chart">
                <div id="myChart"></div>
            </div>
        )
    }
}

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 (
        <>
            <div style={{width: "400px", height: "400px"}} ref={chartRef} />
        </>
    )
}

export default MyChart

看看效果

既然咱们已经在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 (
    <>
        <div style={{width: "400px", height: "400px"}} ref={chartRef} />
    </>
  )
}

export default Chart

最后

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

文章如有不足或有更好建议，欢迎提出，你们一块儿讨论~