整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
需求又来了！在项目验收阶段，遇到用户提新需求，然后不给你结账，对于出差已经了两个礼拜的程序猿---我来说，也是很无奈了！你要是不给做，人家不给钱，你要是做，时间又太紧张。
什么需求呢？做统计图，统计这东西，对于有点经验的开发者来说，如果自己纯纯的写sql,各种关联表查询，组装数据结构，都是很费时间的，工作一天，有时候发现统计数据竟然对不上！！！更奔溃的事，差个1,2百这都好说，应该统计的精度不太对。。。但是就怕你统计出来查1个两个的，你说这什么问题，真的不好说了！很有可能就是那一两条不规范数据倒置的。。。多了不说了，一把辛酸泪。
项目验收阶段，时间本来就紧张，领导的意思是，突出功能。什么意思呢？就是突出，咱们的系统有这个功能，能统计。说实话，出图不是很难，关键是写后台，大家一定要分清主要任务，关注点应该是我们的数据，而不是页面展示。后台代码，各家有各家不一样的地方。但是前台页面，又往往成为客户吐槽的重灾区。公司沿袭了使用echarts的习惯，恰好，公司统计中好多统计图的制作者就是本人，所以给大家介绍一下echarts的简单使用。希望大家快速入门。
第一步：在项目中拷贝echarts的js资源文件。。。（废话）
项目中拷贝资源文件
第二步：在你的页面中引入js。。。（废话）
js引入
第三步：拷贝百度eacharts的官方demo。。。
官方实例有很多，自己可以点进去看看。。。
当然效果是真的很朴素，，，要是自己想调一些样式啥的，请看下一步，调样式
第四步，调样式（真的很不在行，但是真得依靠度娘，遇到问题解决问题，代码说明）
$(function() { //页面加载的时候，执行查询，生成统计图
queryDataByNdAndLx();
})
后台返回的数据是这样的
//取得总数
var sum=0;
//取得json中的value，也就是柱状图y轴的值
function getDataValue(json){
var arr=[]
for(var i=0 ; i <json.length;i++){
arr.push(json[i].num);
k=parseInt(json[i].num);
sum+=k;
}
return arr;
}
//取得json中的name，也就是柱状图横左边的值
function getDataName(json){
var arr=[]
for(var i=0 ; i <json.length;i++){
arr.push(json[i].xzlb);
}
return arr;
}
//ajax发送请求，使用后台数据，生成图
function queryDataByNdAndLx(){
$("页面要放置图表的div").html("");
var url=“返回数据的后台路径‘’
var jsondata;
var myChart=echarts.init(document.getElementById('放置图表的div'));
myChart.dispose();
$.ajax({
type: "POST",
url: url,
async: true, //同步
dataType: "json",
beforeSend:function(XMLHttpRequest){//查询过程中，遮罩效果
$('body').mask("处理中")
},
//后台执行完成后，返回页面处理函数
success: function(result){
$('body').unmask();//返回数据，取消遮罩
if (result!=null&&result !="") {
var values=getDataValue(result);
var names=getDataName(result);
$("#sum").html(sum);
var myChart=echarts.init(document.getElementById('main1'));
option={
title : {
text :'江苏省',
subtext : '江苏省学校分布情况',
x : 'center'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
toolbox: {//自带的工具
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line']},
restore : {show: true},
saveAsImage : {show: true}
}
},
grid: {//横左边文字太长显式不全，看这里
left: '3%',
right: '4%',
bottom: '35%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : names,
axisTick: {
alignWithLabel: true
},
axisLabel: {//文字倾斜
interval:0,
rotate:40
},
}
],
yAxis : [
{
type : 'value',
name : '学校数(单位：所)'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
label: {//将value显式到柱子顶上
normal: {
show: true,
position: 'top'
}
},
data:values,
itemStyle: {//柱子颜色单一，这么办
normal: {
color: function(params) {
var colorList=['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#616A6B','#4A235A','#3498DB' ];
return colorList[params.dataIndex]
}
},
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
} else {
$("页面div").html("<p style='color:red;font-size:25px'>未查询到数据</p>");
}
}
});
}
效果出图
最终效果
欢迎收藏转发，总有用到的时候。
天被Pyecharts实现的世界转动的效果震撼到了，今天再来讲解它的故事。Pyecharts是基于Echarts的Python实现版本，其图表含义和作用是一样的。
代码实现是用Python封装了js，让程序员面向Python开发即可。在最新版本出现链式的编程方式，更让人觉得编程好简单，特别是复制粘贴的时候，哈哈哈~~~
数据分析的最后一天了，下一个阶段就要进入前端了。今天来学点不一样的，2D的图表分析说太多了，这次挑3D的来玩一下。当然，Pyecharts的强大之处还是在于实现2D图表。
大多数可视化图表都是2D的。然而世界是立体的，必然有一些多维度的数据不方便用平面去表达。什么样的数据呢？当数据含有多维度信息，含有地理位置信息，或者数据分析一个3D模型的时候，3D的优势必然大于2D图形。官网例子太详细了，除了py，竟然还提供html，供你看效果。
from pyecharts import options as opts
from pyecharts.charts import Map3D
from pyecharts.globals import ChartType
c=(
Map3D()
.add_schema(
itemstyle_opts=opts.ItemStyleOpts(
color="rgb(5,101,123)",
opacity=1,
border_width=0.8,
border_color="rgb(62,215,213)",
),
map3d_label=opts.Map3DLabelOpts(
is_show=True,
text_style=opts.TextStyleOpts(
color="#fff", font_size=16, background_color="rgba(0,0,0,0)"
),
),
emphasis_label_opts=opts.LabelOpts(is_show=True),
light_opts=opts.Map3DLightOpts(
main_color="#fff",
main_intensity=1.2,
is_main_shadow=False,
main_alpha=55,
main_beta=10,
ambient_intensity=0.3,
),
)
.add(series_name="", data_pair="", maptype=ChartType.MAP3D)
.set_global_opts(
title_opts=opts.TitleOpts(title="全国行政区划地图"),
visualmap_opts=opts.VisualMapOpts(is_show=False),
tooltip_opts=opts.TooltipOpts(is_show=True),
)
.render("map3d.html")
)输出结果(map3d.html文件)
柱状图是用竖直的柱子来展现数据，一般用于展现横向的数据变化及对比。 通常用于A和B在同一时间的数据对比。我重申一遍，我用3D图表只是为了好玩，大多数情况下还是用2D的多一些。官官网例子太详细了，除了py，竟然还提供html，供你看效果。
import random
from pyecharts import options as opts
from pyecharts.charts import Bar3D
from pyecharts.faker import Faker
data=[(i, j, random.randint(0, 12)) for i in range(6) for j in range(24)]
c=(
Bar3D()
.add(
"",
[[d[1], d[0], d[2]] for d in data],
xaxis3d_opts=opts.Axis3DOpts(Faker.clock, type_="category"),
yaxis3d_opts=opts.Axis3DOpts(Faker.week_en, type_="category"),
zaxis3d_opts=opts.Axis3DOpts(type_="value"),
)
.set_global_opts(
visualmap_opts=opts.VisualMapOpts(max_=20),
title_opts=opts.TitleOpts(title="3D柱状图"),
)
.render("bar3d.html")
)输出结果(bar3d.html文件)
有关Pyecharts的应用，在https://github.com/pyecharts/pyecharts-gallery上，有大把例子，而且都配了html和py文件，详细到我都没什么好说的了。如果你决定用Pyecharts作为你制作统计图技术的话，建议你把那些例子全部下载下来并逐个看看。
好了，有关数据分析的内容，老陈全讲完了，如果你想学前端、后端、App等，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。
#Python##数据分析##大数据##图表##地图#
网上统计图插件非常多，比如Echarts、Chart.js等，但是如果你要的是功能简单，单一的统计图，应用这些就会很浪费，也增加自身体积，如果你想要简单的扇形统计图，请看过来！
Canvas绘制扇形统计图，50行代码的统计图
Canvas绘制扇形统计图，50行代码的统计图
Canvas绘制扇形统计图，50行代码的统计图
Canvas绘制扇形统计图，50行代码的统计图
// 示例一
drawCircle({
id: 'one',//dom元素
color: '#10af7e',//颜色
bgLine: '#e4e4e4',//背景颜色
angle: 0.5,//所占比例
lineWidth: 15,//宽度(像素)
lineCap: 'round'//描边的样式
});
// 示例二
drawCircle({
id: 'two',
angle: 0.75,
color: '#49b1f5',
bgLine: '#f3766f',
lineWidth: 20
});
// 示例三
drawCircle({
id: 'three',
angle: 1,
lineWidth: 25,
color: 'grd'
});
这里的css主要是用来[示例页面](http://demo.javanx.cn/canvas-charts/)布局的，可以直接忽略
.box ul, .box li {
list-style: none;
margin: 0;
padding: 0;
}
.box ul li {
float: left;
width: 33%;
text-align: center;
}
需要源码和演示地址的同学，点击下方“了解更多”！
更多资源敬请关注！
*请认真填写需求信息，我们会在24小时内与您取得联系。
