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 = nullconst 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 (<>{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 (<>{width: "400px", height: "400px"}} ref={chartRef} />)
}export default Chart
按需引用
全局引用是把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 = nullconst 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 (<>{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:
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！