Vue中引用 echarts 图表 (直白粗暴)

本文详细介绍了如何使用ECharts库创建动态图表,包括安装ECharts、引入组件、设置HTML容器、定义图表数据、编写JS控制代码以及在Vue的mounted钩子中初始化图表。示例中展示了如何实现多条线图和饼图,并动态响应X轴选择。

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

第一步:安装:npm install echarts

第二步:在所需要图表的组件中引用     import * as echarts from 'echarts'

第三步:在template中写一个盒子放图表:             

           <div id="mycharts" style="width: 100%; height: 400px" ref="char">

            </div>

 第四步:在官网上找个喜欢的图表   将数据放到 data下

data() {
    return {
      option: {
        legend: {},
        tool
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值