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

时间：2023-03-31 17:48:36 vue.js

#myChart{width:400px;身高：400像素；}前言俗话说：工欲善其事，必先利其器。现在有很多成熟好用的可视化方案，比如ECharts、AntV等。我们可以将这些方案比作一套成熟的“工具”，那么我们如何将这些“工具”应用到目前最流行的两种前端框架中呢？别着急，下面我们就以ECharts为例，尝试一下“工具”的各种用法。要在Vue中使用ECharts，首先要下载ECharts：npminstallecharts--saveglobalreference全局引用的好处是我们在项目中一次性引入ECharts后，可以在任何组件中使用ECharts。先在项目的main.js中引入ECharts，然后绑定到vue的prototype上：importechartsfrom'echarts'Vue.prototype.$echarts=echarts然后在我们要使用ECharts的组件中引用它添加:#myChart{width:400px;身高：400像素；}看效果：按需引用全局引用是为了全面引入Echarts，这样做的缺点是会额外引入很多其他无用的配置文件，可能会导致项目体积过大。如果加载时间过长，也会影响人们的体验。毕竟，人们喜欢越来越快。针对以上问题，我们可以采用按需导入的方式。如果有很多页面需要使用Echarts，那么我们在main.js中引入：letecharts=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:"TestForm"},tooltip:{trigger:'axis'},xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{type:'value'},series:[{数据:[820,932,901,934,1290,1330,1320],type:'line'}]}ref获取DOM我们可以发现上面的例子使用了getElementById()来获取渲染图表的div，我们也可以使用引用真实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.jsximportReact,{Component}from'react';从'echarts'导入'导入echarts。/chart.less';exportclassAppextendsComponent{constructor(props){super(props);this.state={data:[820,932,901,934,1290,1330,1320]}}componentDidMount(){this.initCharts();}//初始化initCharts=()=>{letmyChart=echarts.init(document.getElementById('myChart'));让option={title:{text:"TestForm-react"},tooltip:{trigger:'axis'},xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{类型:'价值'}，系列：[{数据：this.state.data，类型：'线'}]};myChart.setOption(选项);window.addEventListener("resize",function(){myChart.resize();});}render(){return(

)}}chart.less.chart{显示：flex;弹性：1；#myChart{宽度：400px；高度：400px；}}效果按需导入在React中，如果将ECharts整体导入，同样会面临项目包体积大带来的负面影响当然你也可以在React中按需导入ECharts，方法类似Vueimportecharts='echarts/lib/echarts'import'echarts/lib/chart/line'import'echarts/lib/component/tooltip'import'echarts/lib/component/title'用于React-Hooks。之前没有Hook的时候，我们都是把代码写在类里面，就像上面的方法一样。但是既然Hook是个好东西，为什么不用呢？importReact,{useEffect,useRef}from'react';importechartsfrom'echarts';functionMyChart(){constchartRef=useRef()letmyChart=nullconstoptions={title:{text:"测试表单-react-hook"},tooltip:{trigger:'axis'},xAxis:{type:'category',数据:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{type:'value'},系列:[{data:[820,932,901,934,1290,1330,1320],type:'line'}]}functionrenderChart(){constchart=echarts.getInstanceByDom(chartRef.current)if(chart){myChart=chart}else{myChart=echarts.init(chartRef.current)}myChart.setOption(options)}useEffect(()=>{renderChart()return()=>{我的图表&&我的Chart.dispose()}})return(<>)}exportdefaultMyChart看效果我们已经在Hook中成功引用了Echarts，那为什么不把代码抽出来复用呢？我们可以根据实际情况传入一些数据作为参数：useChart.jsimportReact,{useEffect}from'react';从'echarts'导入echarts；functionuseChart(chartRef,options){让myChart=null;functionrenderChart(){constchart=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}exportdefaultuseChart接下来参考下我们刚刚提取的钩子：importReact,{useRef}from'react'importuseChartfrom'./useChart'functionChart(){constchartRef=useRef(null)constoptions={title:{text:"测试表单react-hook提取"},tooltip:{trigger:'axis'},xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{type:'value'},series:[{数据:[820,932,901,934,1290,1330,1320],输入:'line'}]}useChart(chartRef,options)return(<>)}exportdefaultChart最后，本文主要总结了ECharts作为数据可视化高效工具在几种流行的前端框架中的基本用法。对于小伙伴们，应该还是有一些帮助的~如果文章中有什么不足或者更好的建议，欢迎提出建议，一起讨论~