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

前言：我们在平时上班使用的一些办公网站，经常会出现，图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(int value, String name) {this.value = value;this.name = name;}public int getValue() {return value;}public void setValue(int value) {this.value = value;}public String getName() {return name;}public void setName(String name) {this.name = name;}@Overridepublic String toString() {return "Tongji{" +"value=" + value +", name='" + name + '\'' +'}';}
}

通过后台拿出查询的数据，转换成json的形式：
拿到类似[{“name”:“测试1”,“value”:3},{“name”:“测试2”,“value”:4}]的值

     @Testpublic void TestMapTongji(){List<Tongji>lists=empMapper.getUserTongji();for(Tongji tongji:lists){System.out.println("tongji = " + tongji);}String jsonString=JSONObject.toJSONString(lists);//转换成json的形式System.out.println("jsonString = " + jsonString);}

将图2.1中的数据替换成我们的真实数据

拉到最底，将我们转换成json的形式的数据，进行替换
图2.2

搞定，界面展示：

`原创文章`

百度的Echarts饼状图的使用教程相关推荐

echarts饼状图的使用
echarts饼状图的使用地址:https://echarts.apache.org/zh/index.html 第一步: 通过 npm 获取 echarts, npm install echart ...
ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比简单的实现可以参考: export default {data() {return {}},mounte ...
去掉Echarts饼状图的引导线
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>五分钟 ...
echars ajax 饼状图,echarts饼状图实现方法
当前位置:我的异常网» Web前端 » echarts饼状图实现方法 echarts饼状图实现方法 www.myexceptions.net 网友分享于:2015-09-27 浏览:0次 echa ...
echarts饼状图引导线加圆点
实现echarts饼状图引导线加圆点实现思路: 1.首先我们在series里设置三个饼状图,设置共有的数据来防止页面交互显示错位问题设置minAngle 最小区域扇面角度防止多个数据为0时候引导线会 ...
echarts饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
vue+elementui+echarts饼状图内部显示百分比
<div id="main" style="width: 400px;height: 350px;"></di ...
Angular2组件与Echarts饼状图交互之饼图制作
一.前言 1.基于ng4项目 2.组件包括:根组件app和饼状图组件echart 二.饼状图开发过程 1.添加插件 echart cnpm install echarts --save 2.创建组件 ...
vue+echarts饼状图中间计算总数
饼状图中间显示总数值,效果图如下: dom结构: <div class="chart1" ref="chart1" style="width: ...

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

进入代码编写

`原创文章`

百度的Echarts饼状图的使用教程相关推荐

最新文章

热门文章