echarts setoption方法_在Vue和React中使用ECharts的多种方法
前言
俗话说:“工欲善其事,必先利其器”。现如今已经有许多成熟易用的可视化解决方案,例如ECharts,AntV等等。我们可以把这些解决方案比作是一套套成熟的“工具”,那我们如何将这些“工具”应用于当前最热门的两个前端框架中呢?
不慌,现在我们就以ECharts为例,来尝试“工具”的各种用法。
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 = 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 ( <>
看看效果
既然我们已经在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 ( <>
最后
本文主要总结了ECharts作为数据可视化的高效工具在当今热门的几种前端框架中的基本用法。相信对于这方面接触较少的小伙伴来说应该还是会有一定的帮助滴~
文章若有不足或有更好建议,欢迎提出,大家一起讨论~
需要以下资料的请私聊『1』免费获取资料!
echarts setoption方法_在Vue和React中使用ECharts的多种方法相关推荐
- css如何调整红心样式_在JavaScript应用程序中包含CSS的多种方法「渡一」
原文链接:https://css-tricks.com/the-many-ways-to-include-css-in-javascript-applications/,作者:Dominic Magn ...
- 检测到目标服务器启用了trace方法_综述:目标检测中的多尺度检测方法
↑ 点击蓝字 关注极市平台作者丨SFXiang来源丨AI算法修炼营编辑丨极市平台 极市导读 本文从降低下采样率与空洞卷积.多尺度训练.优化Anchor尺寸设计.深层和浅层特征融合等多个方面入手,对目标 ...
- java方法重载和重载方法_我们可以在Java中重载main()方法吗?
java方法重载和重载方法 The question is that "can we overload main() method in Java?" 问题是"我们可以在 ...
- react中使用ECharts绘制各省市地图
首先,安装对应依赖 npm install echarts --save 2.引入 import React from "react"; // 模块化样式表 import s fr ...
- php arcode svg,在react中使用svg的各种方法总结(附代码)
这篇文章给大家介绍的内容是关于在react中使用svg的各种方法总结(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 优势 SVG可被非常多的工具读取和修改(比如vscode ...
- React中使用echarts绘制图表
我们都知道,Echarts图表功能非常强大,使用起来也很方便,我们的项目中就用到了Echarts,现在笔者就带大家看看怎么在react中使用Echarts. 我们要想在react项目中高效使用echa ...
- react全局方法_前端面试题 ---react
高阶组件相关 什么是高阶组件,它有哪些运用? 高阶组件就是一个函数,接收一个组件,经过处理后返回后的新的组件: 高阶组件,不是真正意义上的组件,其实是一种模式: 可以对逻辑代码进行抽离,或者添加某个共 ...
- 前端MVVM模式及其在Vue和React中的体现
MVVM相关概念 1) MVVM典型特点是有四个概念:Model.View.ViewModel.绑定器.MVVM可以是单向绑定也可以是双向绑定甚至是不绑定 2) 绑定器:声明性的数据和命令,存在于Vi ...
- php实现echarts任务关系图,react中使用echarts(人物关系图)
项目中有时会用到echarts,可能不同的框架中语法稍有变通,前几天在react项目中遇到,写此篇以作记录. 不同的charts语法跟支持不同,本篇"echarts": " ...
最新文章
- python2 与 python3的区别总结
- JavaScript中数组的增删改查以及应用方式
- 语言 OJ 高低位逆转_C语言调动硬件的原理是什么?
- maven集成spring_Maven集成测试和Spring Restful Services
- Linux内核参数传递Tag
- cad在线转低版本_【设计专业干货】史上最齐全的CAD大全
- 蓝桥杯2020答案c语言b组,2020十月份蓝桥杯B组省赛题解大全(害!附题面文件和部分代码~)...
- java基础学习总结——流
- Docker:设置容器自动启动
- Zookeeper 概述与安装、配置参数、数据结构、选举机制、客户端命令
- Unity3D占用内存太大的解决方法
- python编写一个简单的程序验证码_遇到验证码怎么办?Python编写一个验证码图片数据标注GUI程序!...
- html5小猫钓鱼游戏思路,C++小猫钓鱼游戏
- PDH性能测试之五--待续
- 网络的高可用性(一)
- XGBOOST从原理到实战:二分类 、多分类
- 一文讲透计算机网络的数据链路层
- axure产品原型设计工具
- Linux设置登录密码错误次数限制
- 面试时如何考察应聘者的素质?