php程式碼生成折現統計圖

阿新 • • 發佈：2019-02-08

現在主流的web圖表控制元件主要有hightchart、fusionchart、echart；
echart作為百度前端部門近期推出的一個基於html5的免費圖表控制元件，以其豐富圖表型別和良好的相容性速度得到廣大產品和開發人員的使用。作為一個開發人員，這裡總結下echart的開發配置。

1、ECharts簡介
ECharts，縮寫來自Enterprise Charts，商業級資料圖表，一個純Javascript的圖表庫，可以流暢的執行在PC和移動裝置上，相容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可互動，可高度個性化定製的資料視覺化圖表。創新的拖拽重計算、資料檢視、值域漫遊等特性大大增強了使用者體驗，賦予了使用者對資料進行挖掘、整合的能力。

支援折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和絃圖、力導向佈局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、資料區域、時間軸、工具箱等7個可互動元件，支援多圖表、元件的聯動和混搭展現。

2、資原始檔下載

3、資原始檔結構詳解

3.1主目錄結構介紹

重點：

doc 資料夾是demo示例，可以看看

build 是需要引入的開發資源包

index.html 是本地demo、文件說明的主入口

3.2 build資料夾結構介紹

dist（資料夾） : 經過合併、壓縮的單檔案
　　echarts.js : 這是包含AMD載入器的echarts主檔案，需要通過script最先引入
　　chart（資料夾） : echarts-optimizer通過依賴關係分析同時去除與echarts.js的重複模組後為每一個圖表型別單獨打包成獨立檔案，按需載入
　　　　echarts-line.js : 折線圖（如需折柱動態型別切換，require時還需要echarts/chart/bar）
　　　　echarts-bar.js : 柱形圖（如需折柱動態型別切換，require時還需要echarts/chart/line）
　　　　echarts-scatter.js : 散點圖
　　　　echarts-k.js : K線圖
　　　　echarts-pie.js : 餅圖（如需餅漏斗圖動態型別切換，require時還需要echarts/chart/funnel）
　　　　echarts-radar.js : 雷達圖
　　　　echarts-map.js : 地圖
　　　　echarts-force.js : 力導向佈局圖（如需力導和絃動態型別切換，require時還需要echarts/chart/chord）
　　　　echarts-chord.js : 和絃圖（如需力導和絃動態型別切換，require時還需要echarts/chart/force）
　　　　echarts-funnel.js : 漏斗圖（如需餅漏斗圖動態型別切換，require時還需要echarts/chart/pie）
　　　　echarts-gauge.js : 儀表盤
　　　　echarts-eventRiver.js : 事件河流圖
source（資料夾） : 經過合併，但並沒有壓縮的單檔案，內容同dist，可用於除錯

4、開發模式一：所有圖表型別一次載入方式

如果你的專案本身並不是基於模組化開發的，或者是基於CMD規範（如使用的是seajs），那麼引入基於AMD模組化的echarts可能並不方便，我們建議你採用srcipt標籤式引入
如果你把引用echarts的script標籤放置head內在IE8-的瀏覽器中會出現報錯，解決的辦法就是把標籤移動到body內（後）。
//1、引用所有資源的主檔案,全部載入了
<script src="build/source/echarts-all.js" type="text/javascript"></script>
//2、指圖表物件
var myChart = echarts.init(document.getElementById('div1'));
var option = {};
myChart.setOption(option);

示例：

按 Ctrl+C 複製程式碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>echart示例資源按需載入</title>
<script src="build/source/echarts.js" type="text/javascript"></script>
</head>
<body>
<div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div>
<script type="text/javascript">
require.config({
paths: {
echarts: './build/dist' //引用資原始檔夾路徑，注意路徑
}
});
require(
[
'echarts',
'echarts/chart/line' // 按需載入所需圖表，用到什麼型別就載入什麼型別，這裡不需要考慮路徑
],
function (ec) {
var myChart = ec.init(document.getElementById('div1'));
var ecConfig = require('echarts/config');
var option = {
title: {
text: '標題',
x: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['郵件營銷', '聯盟廣告', '視訊廣告', '直接訪問', '搜尋引擎'],
y: "bottom"
},
toolbox: {
show: true, //是否顯示工具箱
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
//calculable: true, 容易搞錯的屬性，折線圖、柱狀圖是否疊加
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
}],
yAxis: [{
type: 'value'
}
],
series: [
{
name: '郵件營銷',
type: 'line',
stack: '總量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '聯盟廣告',
type: 'line',
stack: '總量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '視訊廣告',
type: 'line',
stack: '總量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接訪問',
type: 'line',
stack: '總量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜尋引擎',
type: 'line',
stack: '總量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
myChart.setOption(option);
}
);
</script>
</body>
</html>

5、開發模式二：模組化單檔案引入（推薦）

就是通過引入加主載入器，然後按需載入所需的圖表型別，優點較上一種方式載入速度更快
通過引用build/dist/echart.js檔案，這是包含AMD載入器的echarts主檔案，只需要引入檔案，然後按需載入指定型別圖表檔案

//1、引用主檔案
<script src="build/source/echarts.js" type="text/javascript"></script>
//2、配置資原始檔夾路徑
require.config({
　　paths: {
　　echarts: './build/dist' //引用資原始檔夾路徑，注意路徑
　　}
});
//3、載入所需的圖表型別檔案
require(
　　[
　　　　'echarts',
　　　　'echarts/chart/line' // 按需載入所需圖表，用到什麼型別就載入什麼型別，這裡不需要考慮路徑
　　],
　　function (ec) {}
}

示例：

6、常用的圖表型別

6.1柱狀圖

柱狀圖程式碼：

按 Ctrl+C 複製程式碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>echart示例柱狀圖</title>
<script src="build/source/echarts.js" type="text/javascript"></script>
</head>
<body>
<a href="demo_line.html" target="_blank">折線圖</a> |
<a href="demo_bar.html" target="_blank">柱狀圖</a> |
<a href="demo_pie.html" target="_blank">餅圖</a> |
<a href="demo_map.html" target="_blank">中國地圖</a>
<div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div>

<script type="text/javascript">
require.config({
paths: {
echarts: './build/dist' //引用資原始檔夾路徑，注意路徑
}
});
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line' // 按需載入所需圖表，用到什麼型別就載入什麼型別，這裡不需要考慮路徑
//'echarts/chart/bar' //柱形圖
//'echarts/chart/line' //折線圖
//'echarts/chart/pie' //餅圖（如需餅漏斗圖動態型別切換，require時還需要echarts/chart/funnel）
//'echarts/chart/chord' //和絃圖
//'echarts/chart/map' //地圖
//'echarts/chart/radar' //雷達
//★★★★★★ 一定要注意這裡，用什麼型別的圖表，就要引入對應的檔案，只能多引不能少引

],
function (ec) {
var myChart = ec.init(document.getElementById('div1'));
var ecConfig = require('echarts/config');
var option = {
title: {
text: '某地區蒸發量和降水量',
subtext: '純屬虛構'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['蒸發量', '降水量']
},
toolbox: {//是否顯示工具箱
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
//calculable: true, 容易搞錯的屬性，折線圖、柱狀圖是否疊加
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [{
type: 'value'
}],
series: [
{
name: '蒸發量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
};
myChart.setOption(option);
}
);


</script>

</body>
</html>

6.2折線圖

折線圖程式碼：

View Code

6.3餅狀圖

餅狀圖程式碼：

按 Ctrl+C 複製程式碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>echart示例折線圖</title>
<script src="build/source/echarts.js" type="text/javascript"></script>
</head>
<body>

<a href="demo_line.html" target="_blank">折線圖</a> |
<a href="demo_bar.html" target="_blank">柱狀圖</a> |
<a href="demo_pie.html" target="_blank">餅圖</a> |
<a href="demo_map.html" target="_blank">中國地圖</a>
<div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div>
<script type="text/javascript">
require.config({
paths: {
echarts: './build/dist' //引用資原始檔夾路徑，注意路徑
}
});
require(
[
'echarts',
'echarts/chart/line' // 按需載入所需圖表，用到什麼型別就載入什麼型別，這裡不需要考慮路徑
//'echarts/chart/bar' //柱形圖
//'echarts/chart/line' //折線圖
//'echarts/chart/pie' //餅圖（如需餅漏斗圖動態型別切換，require時還需要echarts/chart/funnel）
//'echarts/chart/chord' //和絃圖
//'echarts/chart/map' //地圖
//'echarts/chart/radar' //雷達
//★★★★★★ 一定要注意這裡，用什麼型別的圖表，就要引入對應的檔案，只能多引不能少引
],
function (ec) {
var myChart = ec.init(document.getElementById('div1'));
var ecConfig = require('echarts/config');
var option = {
title: {
text: '標題',
x: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['郵件營銷'],
y: "bottom"
},
toolbox: {
show: true, //是否顯示工具箱
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
//calculable: true, 容易搞錯的屬性，折線圖、柱狀圖是否疊加
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
}],
yAxis: [{
type: 'value'
}
],
series: [
{
name: '郵件營銷',
type: 'line',
stack: '總量',
data: [120, 132, 101, 134, 90, 230, 210]
}
]
};
myChart.setOption(option);
}
);


</script>

</body>
</html>

6.4中國地圖

地圖程式碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>echart示例中國地圖</title>
<script src="build/source/echarts.js" type="text/javascript"></script>
</head>
<body>

<a href="demo_line.html" target="_blank">折線圖</a> |
<a href="demo_bar.html" target="_blank">柱狀圖</a> |
<a href="demo_pie.html" target="_blank">餅圖</a> |
<a href="demo_map.html" target="_blank">中國地圖</a>
<div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div>
<script type="text/javascript">

require.config({
paths: {
echarts: './build/dist' //引用資原始檔夾路徑，注意路徑
}
});
require(
[
'echarts',
'echarts/chart/map' // 按需載入所需圖表，用到什麼型別就載入什麼型別，這裡不需要考慮路徑
//'echarts/chart/bar' //柱形圖
//'echarts/chart/line' //折線圖
//'echarts/chart/pie' //餅圖（如需餅漏斗圖動態型別切換，require時還需要echarts/chart/funnel）
//'echarts/chart/chord' //和絃圖
//'echarts/chart/map' //地圖
//'echarts/chart/radar' //雷達
//★★★★★★ 一定要注意這裡，用什麼型別的圖表，就要引入對應的檔案，只能多引不能少引
],
function (ec) {
var myChart = ec.init(document.getElementById('div1'));
var ecConfig = require('echarts/config');
var option = {
title: {
text: 'iphone銷量',
subtext: '純屬虛構',
x: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
x: 'left',
data: ['iphone3', 'iphone4', 'iphone5']
},
dataRange: {
min: 0,
max: 2500,
x: 'left',
y: 'bottom',
text: ['高', '低'], // 文字，預設為數值文字
calculable: true
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
series: [
{
name: 'iphone3',
type: 'map',
mapType: 'china',
roam: false,
itemStyle: {
normal: { label: { show: true} },
emphasis: { label: { show: true} }
},
data: [
{ name: '北京', value: Math.round(Math.random() * 1000) },
{ name: '天津', value: Math.round(Math.random() * 1000) },
{ name: '上海', value: Math.round(Math.random() * 1000) },
{ name: '重慶', value: Math.round(Math.random() * 1000) },
{ name: '河北', value: Math.round(Math.random() * 1000) },
{ name: '河南', value: Math.round(Math.random() * 1000) },
{ name: '雲南', value: Math.round(Math.random() * 1000) },
{ name: '遼寧', value: Math.round(Math.random() * 1000) },
{ name: '黑龍江', value: Math.round(Math.random() * 1000) },
{ name: '湖南', value: Math.round(Math.random() * 1000) },
{ name: '安徽', value: Math.round(Math.random() * 1000) },
{ name: '山東', value: Math.round(Math.random() * 1000) },
{ name: '新疆', value: Math.round(Math.random() * 1000) },
{ name: '江蘇', value: Math.round(Math.random() * 1000) },
{ name: '浙江', value: Math.round(Math.random() * 1000) },
{ name: '江西', value: Math.round(Math.random() * 1000) },
{ name: '湖北', value: Math.round(Math.random() * 1000) },
{ name: '廣西', value: Math.round(Math.random() * 1000) },
{ name: '甘肅', value: Math.round(Math.random() * 1000) },
{ name: '山西', value: Math.round(Math.random() * 1000) },
{ name: '內蒙古', value: Math.round(Math.random() * 1000) },
{ name: '陝西', value: Math.round(Math.random() * 1000) },
{ name: '吉林', value: Math.round(Math.random() * 1000) },
{ name: '福建', value: Math.round(Math.random() * 1000) },
{ name: '貴州', value: Math.round(Math.random() * 1000) },
{ name: '廣東', value: Math.round(Math.random() * 1000) },
{ name: '青海', value: Math.round(Math.random() * 1000) },
{ name: '西藏', value: Math.round(Math.random() * 1000) },
{ name: '四川', value: Math.round(Math.random() * 1000) },
{ name: '寧夏', value: Math.round(Math.random() * 1000) },
{ name: '海南', value: Math.round(Math.random() * 1000) },
{ name: '臺灣', value: Math.round(Math.random() * 1000) },
{ name: '香港', value: Math.round(Math.random() * 1000) },
{ name: '澳門', value: Math.round(Math.random() * 1000) }
]
},
{
name: 'iphone4',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true} },
emphasis: { label: { show: true} }
},
data: [
{ name: '北京', value: Math.round(Math.random() * 1000) },
{ name: '天津', value: Math.round(Math.random() * 1000) },
{ name: '上海', value: Math.round(Math.random() * 1000) },
{ name: '重慶', value: Math.round(Math.random() * 1000) },
{ name: '河北', value: Math.round(Math.random() * 1000) },
{ name: '安徽', value: Math.round(Math.random() * 1000) },
{ name: '新疆', value: Math.round(Math.random() * 1000) },
{ name: '浙江', value: Math.round(Math.random() * 1000) },
{ name: '江西', value: Math.round(Math.random() * 1000) },
{ name: '山西', value: Math.round(Math.random() * 1000) },
{ name: '內蒙古', value: Math.round(Math.random() * 1000) },
{ name: '吉林', value: Math.round(Math.random() * 1000) },
{ name: '福建', value: Math.round(Math.random() * 1000) },
{ name: '廣東', value: Math.round(Math.random() * 1000) },
{ name: '西藏', value: Math.round(Math.random() * 1000) },
{ name: '四川', value: Math.round(Math.random() * 1000) },
{ name: '寧夏', value: Math.round(Math.random() * 1000) },
{ name: '香港', value: Math.round(Math.random() * 1000) },
{ name: '澳門', value: Math.round(Math.random() * 1000) }
]
},
{
name: 'iphone5',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true} },
emphasis: { label: { show: true} }
},
data: [
{ name: '北京', value: Math.round(Math.random() * 1000) },
{ name: '天津', value: Math.round(Math.random() * 1000) },
{ name: '上海', value: Math.round(Math.random() * 1000) },
{ name: '廣東', value: Math.round(Math.random() * 1000) },
{ name: '臺灣', value: Math.round(Math.random() * 1000) },
{ name: '香港', value: Math.round(Math.random() * 1000) },
{ name: '澳門', value: Math.round(Math.random() * 1000) }
]
}
]
};
myChart.setOption(option);
}
);


</script>

</body>
</html>

php程式碼生成折現統計圖

php程式碼生成折現統計圖

PHP中使用Jpgraph生成統計圖

php生成多尺寸縮圖記錄

簡單封裝用最簡單的方式使用php只需要‘一行程式碼’生成excel

百度大腦和圖靈機器人制作一個簡單的自動聊天機器人【PHP程式碼】

echarts畫一個折現/柱狀混合圖

WordPress免外掛生成完整站點地圖(sitemap.xml)的php程式碼

PHP隨機生成100個英文字母，然後統計26個英文字母出現的次數

PowerDesingner--java程式碼生成類圖

VS工具使用——程式碼生成函式關係圖

android在程式碼裡直接畫出環形統計圖

在網頁中生成具有互動功能的統計圖（用到Serlvet/JSP）

Mac程式碼生成呼叫關係圖工具（Understand）

word2007中生成統計圖的兩種方式

C#——用程式碼生成UML圖

wex5 生成動態輪播圖程式碼

使用PHP實現生成固定大小圖片縮圖功能（智慧裁剪，圖片不失真）

php+mysql 生成統計報表

一個統計PHP程式碼行數的小程式碼

根據java程式碼生成UML圖

php程式碼生成折現統計圖

相關推薦