echarts饼状显示数据性别百分比

记一次前端页面对echarts的使用（数据分析之性别分布饼状图）

一、echarts是什么？
建议网页查找含义，你知道你想要干什么就行了

二、使用步骤
1.引入

2.上代码，很简单。

function piedata1() {$.ajax({url: "http://110.120.30.3636/bigData/sexData",data: {”**“： ** }, //接口传参dataType: 'json',//服务器返回json格式数据type: 'GET',//HTTP请求类型success: function (res) {if (res.code == 200 && res.data.length > 0) {var manDate = 0;  //男var womanDate = 0; //女var unKnown = 0;//未知res.data.forEach(function (e, i) {if (e.sex == '男') {manDate = manDate + e.num;} else if (e.sex == '女') {womanDate = womanDate + e.num;} else if (e.sex == '') {unKnown = unKnown + e.num;}})var chart = echarts.init(document.getElementById('pie-chart1'))  //初始化echartsvar option = {                                                        //设置格式title: {text: '性别分布', //主题textStyle: {color: '#fff',  //主题颜色fontSize: '14'},left: 'center',top: 'bottom'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},//数据响应模型 填充数据series: [{name: '性别分布',type: 'pie', //模型类型radius: ['10%', '50%'],center: ['50%', '40%'],roseType: 'area',data: [{value: manDate, name: '男'},{value: womanDate, name: '女'},{value: unKnown, name: '未记录'},],labelLine: {length: 5,length2: 0,},}],color: ['#55ff00', '#ff0000', '#ecff1a'],//响应颜色label: {fontSize: 10,textBorderWidth: 0,textBorderColor: 'transparent',color: '#fff'},};chart.setOption(option);  //填充}console.log(res);}});}

    大家可借鉴参考，希望可以解决你遇到的一些类似需求或者问题，本身不是做前端的，样式效果不是很满意的话[借鉴](http://echarts.zhangmuchen.top/#/index)

echarts饼状显示数据性别百分比相关推荐

echarts饼状图数据过多时，数据叠加(问题篇)
1.问题如下图所示 2.解决办法先给data中声明两个变量 seriesData: [], //决定图表中显示的个数selected: {}, // 决定图表中显示的个数处理后台取到的数据 // ...
Echarts饼状图数据动态获取
首先肯定是引入echarts的相关jar包,地址:https://www.echartsjs.com/zh/download.html 你可以引入在线定制生成的jar包,如下图所示: 然后接下来就自己 ...
【eCharts】echarts饼状图数据重叠导致指示线及显示文字重叠解决
1. 解决前 2.解决后 3.代码 function makePie(id, title, name, data, show) {if (!show) {show = false;}var myCha ...
ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比简单的实现可以参考: export default {data() {return {}},mounte ...
echarts饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
echarts饼状图引导线加圆点
实现echarts饼状图引导线加圆点实现思路: 1.首先我们在series里设置三个饼状图,设置共有的数据来防止页面交互显示错位问题设置minAngle 最小区域扇面角度防止多个数据为0时候引导线会 ...
去掉Echarts饼状图的引导线
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>五分钟 ...
echars ajax 饼状图,echarts饼状图实现方法
当前位置:我的异常网» Web前端 » echarts饼状图实现方法 echarts饼状图实现方法 www.myexceptions.net 网友分享于:2015-09-27 浏览:0次 echa ...
html5饼图添加百分比,饼图如何显示数据和百分比
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 饼图显示数据和百分比的存在方法如下: 1.选中表格区域的数据,点击插入,点击所有图表,选择饼图. 2.右击选择添加数据标签,点击更 ...

echarts饼状显示数据性别百分比

echarts饼状显示数据性别百分比相关推荐

最新文章

热门文章