百度的Echarts饼状图的使用教程

本文介绍了如何使用百度的Echarts库创建饼状图。首先展示了饼状图的示例,接着讲解了从数据库获取数据,使用Tongji.java工具类封装数据,并将数据转化为JSON格式,最后将这些数据应用到Echarts图表中,实现饼状图的界面展示。
摘要由CSDN通过智能技术生成

前言:我们在平时上班使用的一些办公网站,经常会出现,图1.1的界面,那么这种界面是怎么做的呢,百度为我们开发者提供了Echarts,方便了我们的开发工作

图1.1
在这里插入图片描述

在官网先找一下我们要做的原型Echarts饼图
图1.2
在这里插入图片描述
图1.3
在这里插入图片描述

进入代码编写

我们准备数据库语句,查询所有的数据

  • public List getTongji();

工具类Tongji.java用于封装获取到的Map集合数据


public class Tongji {
   
    private int value;
    private String name;

    public Tongji() {
   
    }

    public Tongji
在Vue3中使用echarts饼状图可以通过以下步骤实现: 1. 首先,确保你已经安装了echarts和vue-echarts插件。可以通过npm或yarn进行安装。 2. 在你的Vue组件中,引入echarts和vue-echarts插件。 ```javascript import * as echarts from 'echarts'; import ECharts from 'vue-echarts'; ``` 3. 在template中,使用ECharts组件,并设置图表的类型为饼状图。 ```html <template> <div> <e-charts :options="chartOptions" :auto-resize="true"></e-charts> </div> </template> ``` 4. 在data中定义chartOptions对象,并设置饼状图的配置选项,如数据和样式。 ```javascript data() { return { chartOptions: { series: [ { type: 'pie', data: [ { value: 335, name: 'Category 1' }, { value: 310, name: 'Category 2' }, { value: 234, name: 'Category 3' }, { value: 135, name: 'Category 4' }, { value: 1548, name: 'Category 5' }, ], }, ], }, }; }, ``` 5. 在mounted生命周期钩子中,初始化echarts实例,并将其绑定到ECharts组件上。 ```javascript mounted() { this.$nextTick(() => { const chart = echarts.init(this.$refs.chart); this.$refs.chart.echarts = chart; }); }, ``` 6. 最后,在需要的地方使用ECharts组件。 ```html <template> <div> <e-charts :options="chartOptions" :auto-resize="true" ref="chart"></e-charts> </div> </template> ``` 通过以上步骤,你就可以在Vue3中使用echarts饼状图了。记得在引用组件的时候添加v-if判断来解决刷新不及时的问题。<span class="em">1</span> #### 引用[.reference_title] - *1* [vue3+echarts实现炫酷的百分比饼图echarts组件封装](https://blog.csdn.net/xu20166424/article/details/128558713)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值