java項目：統計圖表怎么做？百度echarts使用

java項目：統計圖表怎么做？百度echarts使用總結

需求又來了！在項目驗收階段，遇到用戶提新需求，然后不給你結賬，對于出差已經了兩個禮拜的程序猿---我來說，也是很無奈了！你要是不給做，人家不給錢，你要是做，時間又太緊張。

什么需求呢？做統計圖，統計這東西，對于有點經驗的開發者來說，如果自己純純的寫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圖表。

16.1 3D地圖

大多數可視化圖表都是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文件)

16.2 3D柱狀圖

柱狀圖是用豎直的柱子來展現數據，一般用于展現橫向的數據變化及對比。通常用于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行代碼的統計圖

HTML

Canvas繪制扇形統計圖，50行代碼的統計圖

JavaScript

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

這里的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;
}

公告

需要源碼和演示地址的同學，點擊下方“了解更多”！

更多資源敬請關注！

在線咨詢

上一篇：JavaScript for 循環
下一篇：手把手教你用Golang封裝一款適合自己使用的Web

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

java項目：統計圖表怎么做？百度echarts使用

16.1 3D地圖

16.2 3D柱狀圖

言

HTML

JavaScript

調用方法

CSS

公告

您的項目需求