echarts 應用數個樣例
- 應用一：環形圖和餅圖嵌套
先說明一下內部文件分佈：
javascript
注意輸入數組的格式（不是通常Javascript 的數組格式，而是有點像json 的樣子），代碼例如如下：html
profiles_pie_weibo:function(event_id){
heats=[{name:'直達', value:335},{name:'營銷廣告', value:679},{name:'搜索引擎', value:1548}];
heats2 = [{name:'直達', value:335},{name:'郵件營銷', value:310},{name:'聯盟廣告', value:234},{name:'視頻廣告', value:135},
{name:'百度', value:1048},{name:'谷歌', value:251},{name:'必應', value:147},{name:'谷歌', value:102}];
// echarts庫文件路徑配置
require.config({
paths: {
echarts: $base.appConfig.lib_scripts_path + '/echarts/'
}
});
// 使用圖表
require(
[
'echarts',
'echarts/chart/pie'
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('profiles_layout'));
var option = {
tooltip : { //鼠標hover時提示
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [
{
name: '訪問來源',
type:'pie',
radius: [0,'35%'], //內部餅圖
itemStyle : {
normal : {
label : {
position : 'inner'
},
labelLine : {
show : false
}
}
},
data: heats
},
{
name: '訪問來源2',
type:'pie',
radius: ['50%','70%'], //數組形式，環形圖
data: heats2
}
]
};
// 爲echarts對象載入數據
myChart.setOption(option);
}
);//======end require=======
},
另：應用function到tooltips的樣例：html5
tooltip : {
trigger: 'item',
formatter: function (params,ticket,callback) {
if ('titles' == params.seriesName) {
return "職位: " + params.name + "，個數：" + params.value;
} else
if ('names' == params.seriesName) {
return "姓名: " + params.name;
}
}
series : [
{
name:'titles',
type:'pie',
radius: [0,'35%'], //內部餅圖
itemStyle : {
normal : {
label : {
show: false,
position : 'inner'
},
labelLine : {
show : false
}
}
},
data: titles
},
{
name: 'names',
type:'pie',
radius: ['50%','70%'], //數組形式，環形圖
data: names
}
]
效果圖（內圈 tooltips）：java
（外圈 tooltips）：
node
- 應用二：SVG擴展-人體圖（人物畫像/用戶畫像的簡化版）
這個東西代碼不難，但那個SVG底圖的相應代碼起着關鍵的影響，因此搞這個以前最好學一點SVG代碼編寫規則。好吧。作echarts SVG擴展的人仍是比較少的，網上差點兒找不到多少直接相關資料，僅僅能本身摸弄着過河了~ios
代碼（有一點點無用代碼。不影響閱讀）：git
//人物畫像
profiles_weibo_3:function(event_id){
// echarts庫文件路徑配置
require.config({
paths: {
echarts: $base.appConfig.lib_scripts_path + '/echarts/'
}
});
// 使用圖表
require(
[
'echarts',
'echarts/chart/map'
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('profiles_layout'));
// 本身定義擴展圖表類型：mapType = body
require('echarts/util/mapData/params').params.bodyMale = {
getGeoJson: function (callback) {
$.ajax({
url: $base.appConfig.lib_scripts_path + "/echarts/svg/raw_man.svg",
dataType: 'xml',
success: function(xml) {
callback(xml);
},
error:function(XMLResponse){
alert(XMLResponse.responseText);
}
});
}
};
var option = {
title : {
text : '人體password',
subtext: '地圖SVG擴展',
x:'center'
},
tooltip : {
trigger: 'item'
},
dataRange: {
min: 0,
max: 100,
x: 'center',
y: 'center',
calculable : true,
itemHeight:30,
color: ['orangered','yellow','lightskyblue']
},
series : [
{
name: '人體password-男',
type: 'map',
mapType: 'bodyMale', // 本身定義擴展圖表類型
mapLocation: {
x:'left'
},
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: 'head', value: 90},
{name: 'body', value: 60},
{name: 'left_hand', value: 70},
{name: 'right_hand', value: 50},
{name: 'left_leg', value: 40},
{name: 'right_leg', value: 30},
{name: 'bag', value: 90}
],
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 5
},
data : [
[
{name:'男',geoCoord:[138, 126]},
{name:'女',value:90,geoCoord:[268, 56]}
]
]
}
}
]//======end series=======
};
myChart.setOption(option);
}
);//======end require=======
},
效果圖：
SVG Reference:github
echarts sample：http://echarts.baidu.com/doc/example/map16.html?qq-pf-to=pcqq.c2cajax
echarts sample 中用到的SVG文件：https://code.csdn.net/u013476464/baidu_data_visualization/tree/master/doc/example/svg/body-male.svgjson
SVG擴展其它樣例：http://www.oschina.net/code/piece_full?code=38878
SVG在線編輯：http://editor.method.ac/
SVG 學習：http://www.w3cplus.com/html5/svg-transformations.html，http://www.tuicool.com/articles/yUZz2mu
上面的樣例用到我作的SVG文件。
僅僅是圖片編輯工具是不夠的，還需要改動裏面的代碼。另外，stroke 和fill 是不能加在需要做色彩變化的項上的。否則dataRange中的着色會不成功。代碼例如如下：
<?xml version="1.0"?> <svg width="232" height="336" xmlns="http://www.w3.org/2000/svg"> <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --> <g> <title>background</title> <rect fill="#fff" id="canvas_background" height="338" width="234" y="-1" x="-1"/> <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"> <!-- <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>--> </g> </g> <g> <title>Layer 1</title> <ellipse name="head" ry="39.5" rx="39" id="svg_1" cy="51" cx="116.5" stroke-width="1.5"/> <ellipse name="body" ry="66" rx="15" id="svg_2" cy="158.5" cx="116.5" stroke-width="1.5"/> <ellipse name="right_leg" ry="37.5" rx="10" id="svg_3" cy="268" cx="95.5" stroke-width="1.5"/> <ellipse name="left_leg" ry="48" rx="9.5" id="svg_4" cy="270.5" cx="144" stroke-width="1.5"/> <ellipse name="right_hand" ry="8.5" rx="41.5" id="svg_5" cy="144" cx="53" stroke-width="1.5"/> <ellipse name="left_hand" ry="9" rx="40.5" id="svg_6" cy="142.5" cx="187" stroke-width="1.5"/> <path id="svg_8" d="m91.5,43.5c12,2 18,-3 18,-3c0,0 -30,1 -18,3z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/> <path id="svg_9" d="m127.5,39.5c15,4 15,3 14.5,2.5c0.5,0.5 -29.5,-6.5 -14.5,-2.5z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/> <path id="svg_10" d="m99.5,68.5c0,-1 15,11 14.5,10.5c0.5,0.5 18.5,-9.5 18,-10" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/> <path id="svg_11" name="bag" d="m22.5,161.5c-10,17 -11,61 -11.5,60.5c0.5,0.5 14.5,28.5 14,28c0.5,0.5 13.5,-25.5 13,-26l-15.5,-62.5z"/> </g> </svg>
- 應用三：等級金字塔圖
內含圖中節點點擊事件樣例
var bandTitleList=data.bandTitleList;
var bands = new Array();
if(bandTitleList && bandTitleList.length > 0){
$.each(bandTitleList, function(i, item){
bands.push({value:item.band, name: item.title});
});
// echarts庫文件路徑配置
require.config({
paths: {
echarts: $base.appConfig.lib_scripts_path + '/echarts/'
}
});
//繪製表
require(
[
'echarts',
'echarts/chart/funnel'
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('bands_chart'));
var option = {
title : {
text: '級別圖'
},
tooltip : {
trigger: 'item',
formatter: "{b}"
},
series : [
{
name:'級別',
type:'funnel',
x2:'50%',
sort : 'ascending',
data: bands
// [{value:20, name:'訂單,訂單2'}, {value:100, name:'展示'}]
}
]
};
myChart.setOption(option);
var ecConfig = require('echarts/config');
// 實現節點點擊事件
function focus(param) {
var data = param.data;
// 推斷節點的相關數據是否正確
if (data != null && data != undefined) {
if (data.value != null && data.value != undefined) {
//彈出每一級包含的人員
$biosMain.showNamesByBand(name, data.value);
}
}
}
// 綁定圖表節點的點擊事件
myChart.on(ecConfig.EVENT.CLICK, focus);
}
);//======end require=======
// first run
if (bands.length > 0) {
$biosMain.showNamesByBand(name, bands[0].value);
}
}else{
$("#bands_chart").html("<li style='color:#6EAFD7'>"+$.language.getText('WEIBO_NO_DATA')+"</li>");
}
效果圖：
- 應用四：樹形圖（勉強也可做組織結構圖）
1）數據source 訂製
<pre name="code" class="javascript"> var titleNameList=data.titleNameList;
var lvl_3 = new Array();
var lvl_2 = new Array();
var lvl_1 = new Array();
var preTitle = "";
if(bandTitleList){
$.each(titleNameList, function(i, item){
if (preTitle != "" && preTitle != item.title) { // group by title
lvl_2.push({name:preTitle, value:20, children:lvl_3, level:2}); // custom label: level
lvl_3 = [];
}
preTitle = item.title;
lvl_3.push({name:item.name, value:20, level:3, itemStyle: {normal: {color: '#cc9999', label: {position: 'right'}}}});
});
lvl_1.push({name:"", value:20, children:lvl_2, level:1, itemStyle: {normal: {color: '#cc6666'}}});
2）option
//繪製表
require(
[
'echarts',
'echarts/chart/tree'
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('names_chart'));
var option = {
title : {
text: '級別相應人員圖'
},
tooltip : {
trigger: 'item',
formatter: function (params,ticket,callback) {
if (3 == params.data.level) {
return "姓名: " + params.data.name;
} else
if (2 == params.data.level) {
return "職位: " + params.data.name;
} else
if (1 == params.data.level) {
return "band";
}
}
// {b} // for testing
},
series : [
{
type:'tree',
name : "Force tree",
orient : "horizontal",
rootLocation : {x:'20%',y:'top'},
layerPadding : 160,
nodePadding : 23,
roam : true,
itemStyle: {
normal: {
label: {
show: true
},
nodeStyle : {
brushType : 'both',
strokeColor : 'rgba(255,215,0,0.6)',
lineWidth : 1
}
}
},
data : lvl_1
}
]
};
myChart.setOption(option);
}
);//======end require=======3）效果圖
經驗：假設不出圖又不報錯。有多是因爲echarts js 之間不一樣版本號所形成。可以用src版的echarts 追蹤進原碼肯定。我就試過tree 不出圖。緣由是用了新版的tree.js。舊版的echarts.js。
- 應用五：堆積條形圖
option = {
title : {
text: '經過狀況分析',
x:'center'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'shadow' // 默以爲直線，可選爲：'line' | 'shadow'
}
},
legend: {
data:['不經過', '經過'],
x : 'left'
},
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 : 'value'
}
],
yAxis : [
{
type : 'category',
data : ['分期2','分期3','分期4','分期5','分期6', '貸1','貸2','貸3']
}
],
series : [
{
name:'不經過',
type:'bar',
stack: '總量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[20, 117, 5, 4, 44, 22, 9, 63]
},
{
name:'經過',
type:'bar',
stack: '總量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[19, 91, 4, 2, 27, 12, 13, 57]
}
]
};
http://echarts.baidu.com/doc/example/bar4.html
- 應用六：餅圖（最普通也最常常使用）
option = {
title : {
text: '拒絕狀況分析',
x:'center',
textStyle: {fontSize: 24}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['客戶緣由','其它緣由','綜合推斷']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
color:['#CC99FF','#FF9966','#9999FF'],
series : [
{
type:'pie',
radius : '55%',
center: ['50%', '60%'],
itemStyle : { normal: {
label : {textStyle: {fontSize: 16},show: true, formatter: '{b}: {d}%'}}},
data:[
{value:335, name:'客戶緣由'},
{value:310, name:'其它緣由'},
{value:234, name:'綜合推斷'}
]
}
]
}; 效果： http://echarts.baidu.com/doc/example/pie1.html
- 1. Markdown應用樣例
- 2. ECharts第一個實例
- 3. SSIS實例應用（txt文件樣例）
- 4. ECharts應用小結
- 5. Echarts樣式
- 6. echarts數據對應不上
- 7. ECharts引用組件案例
- 8. Hicharts弄個樣例
- 9. 5個Spark應用實例
- 10. 13 個mod_rewrite 應用舉例
- 更多相關文章...
- • Maven Web 應用 - Maven教程
- • XML 應用程序 - XML 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • Flink 數據傳輸及反壓詳解
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
- 1. Markdown應用樣例
- 2. ECharts第一個實例
- 3. SSIS實例應用（txt文件樣例）
- 4. ECharts應用小結
- 5. Echarts樣式
- 6. echarts數據對應不上
- 7. ECharts引用組件案例
- 8. Hicharts弄個樣例
- 9. 5個Spark應用實例
- 10. 13 個mod_rewrite 應用舉例