vue与react使用echarts,详细使用步骤

博客介绍了Vue和React引入ECharts的方法。在Vue中,需先下载,再全局引入,使用时要准备DOM容器、赋值图标代码并初始化实例生成图表;在React中,下载后使用时要注意将官网复制代码中option后的“=”换成“:”。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue引入echarts

1、下载

npm install echarts --save

2、在main.js全局引入
import Echarts from 'echarts'
Vue.prototype.echarts = Echarts
Vue.use(Echarts)

在这里插入图片描述

3、使用

3.1、在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<template>
  <div>
      <div id="echarts" :style="{width: '300px', height: '300px'}"></div>
  </div>
</template>

3.2、在echarts赋值你需要的图标代码
注:在赋值的代码中的option前面加上let,也就是讲此段代码赋值给一个叫option的变量,方便我们使用。
在这里插入图片描述
3.3、在页面中使用,通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。
在这里插入图片描述

react使用echarts

1、下载

npm install --save echarts-for-react
npm install --save echarts

2、使用
注意:官网复制的代码option后面的“=”换成“:”
在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值