echarts3.0異步數據加載之series樣式處理
問題引入
咱們知道，在echarts3.0 中引入了炫酷的展現效果，可是咱們發現控制這些炫酷樣式的代碼所有都在series或者其餘標籤裏面，若是取消以後就變成了官方實例默認的樣式。給個例子：數據庫
option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
//注意這裏的color標籤,待會兒會註釋掉對比效果
color:['#8fc31f','#f35833','#00ccff','#ffcc00'],
legend: {
orient: 'vertical',
x: 'right',
data: ['準時','遲到','請假','未到'],
formatter:function(name){
var oa = option.series[0].data;
var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value;
for(var i = 0; i < option.series[0].data.length; i++){
if(name==oa[i].name){
return name + ' ' + oa[i].value + ' ' + (oa[i].value/num * 100).toFixed(2) + '%';
}
}
}
},
series : [
{
name: '簽到比例分析',
type: 'pie',
radius : '55%',
center: ['40%', '50%'],
data:[
{value:335, name:'準時'},
{value:310, name:'遲到'},
{value:234, name:'請假'},
{value:135, name:'未到'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
label:{
show: true,
//position:'inside',
formatter: '{b} : {c} ({d}%)'
}
},
labelLine :{show:true}
},
}
]
};
複製代碼
加載的圖形如圖所示:json
/**color:['#8fc31f','#f35833','#00ccff','#ffcc00'],*/
複製代碼
而後，就變成了這樣:數組
解決方案
咱們只要在js中定義一個足夠大的顏色或者樣式對象數組便可，而後再遍歷json串的時候按需加載所須要的顏色或者樣式，即有幾個展現的因子就加載幾種顏色（樣式）。 實際來操做一下，假設咱們的json串爲bash
var json={
"data":[
{ "value":335, "name":"準時" },
{ "value":310, "name":"遲到" },
{ "value":234, "name":"請假" },
{ "value":135, "name":"未到" }
],
"text":"考勤狀況統計報表",
"subtext":"xx公司"
}
複製代碼
那麼咱們定義一個color數組,echarts
//根據本身的須要，定義多個，保證每一個數據都能取到便可。
var color=['#8fc31f','#f35833','#00ccff','#ffcc00','#9c6a79','#21b6b9'...],
複製代碼
而後，把這個color數組按元素因子的個數去取對應數量的顏色便可。ide
var color=['#8fc31f','#f35833','#00ccff','#ffcc00','#9c6a79','#21b6b9'...],
//length<=color.length;
var length=json.data.length;
//分割數組
json.color=color.slice(0,length);
複製代碼
再打印json數據ui
var json={
"data":[
{ "value":335, "name":"準時" },
{ "value":310, "name":"遲到" },
{ "value":234, "name":"請假" },
{ "value":135, "name":"未到" }
],
"text":"考勤狀況統計報表",
"subtext":"xx公司",
"color":["#8fc31f","#f35833","#00ccff","#ffcc00"]
}
複製代碼
大功告成！這就達到了咱們想要的數據，而後咱們把json串中的數據加載到想應的echarts中option便可。spa
複雜案例
咱們前面所討論的只是顏色這一要素，是最基本的原理和思想的展現。那麼咱們再來看一個比較複雜的例子。涉及到series的樣例，先上圖。code
option = {
// backgroundColor: '#394056',
title: {
text: '請求數',
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#F1F1F3'
},
left: '6%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ['移動', '電信', '聯通'],
right: '4%',
textStyle: {
fontSize: 12,
//color: '#F1F1F3'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#57617B'
}
},
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
}, {
axisPointer: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisTick: {
show: false
},
position: 'bottom',
offset: 20,
data: ['', '', '', '', '', '', '', '', '', '', {
value: '週六',
textStyle: {
align: 'left'
}
}, '週日']
}],
yAxis: [{
type: 'value',
name: '單位（%）',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14
}
},
splitLine: {
lineStyle: {
color: '#57617B'
}
}
}],
series: [{
name: '移動',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
//控制線條下面區域面積的顏色
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(137, 189, 27, 0.3)'
}, {
offset: 0.8,
color: 'rgba(137, 189, 27, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
//控制線條的顏色
itemStyle: {
normal: {
color: 'rgb(137,189,27)',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 12
}
},
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
}, {
name: '電信',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
//控制線條下面區域面積的顏色
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 136, 212, 0.3)'
}, {
offset: 0.8,
color: 'rgba(0, 136, 212, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
//控制線條的顏色
itemStyle: {
normal: {
color: 'rgb(0,136,212)',
borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 12
}
},
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
}, {
name: '聯通',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
//控制線條下面區域面積的顏色
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(219, 50, 51, 0.3)'
}, {
offset: 0.8,
color: 'rgba(219, 50, 51, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
//控制線條的顏色
itemStyle: {
normal: {
color: 'rgb(219,50,51)',
borderColor: 'rgba(219,50,51,0.2)',
borderWidth: 12
}
},
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
}, ]
};
複製代碼
好的，咱們把上面的註釋部分 areaStyle,itemStyle去掉,再來看效果：orm
var areaStyle=[];
var item1={
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 136, 212, 0.3)'
}, {
offset: 0.8,
color: 'rgba(0, 136, 212, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
}
var item2={
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 136, 212, 0.3)'
}, {
offset: 0.8,
color: 'rgba(0, 136, 212, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
}
var item3=...,var item4=...
areaStyle.push(item1);
areaStyle.push(item2);
areaStyle.push(item3);
//itemStyle數組相似
....
複製代碼
而後，經過遍歷將這個2個數組添加到對應的json串中便可,這裏省略中間過程，最後咱們獲得相似這樣的json串就ok了
//這裏json串沒有嚴格遵循json語法
var json={
"data":{[220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122],
[120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]..... }
"title":"請求數",
"areaStyle":{
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(219, 50, 51, 0.3)'
}, {
offset: 0.8,
color: 'rgba(219, 50, 51, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
},
normal:{
....
},.......
},
"itemStyle":{
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 136, 212, 0.3)'
}, {
offset: 0.8,
color: 'rgba(0, 136, 212, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
},
normal:{
.....
},.......
}
}
複製代碼
好的，這樣就無所不能了，咱們想要加載什麼樣式都不是問題了，相信你們多研究幾個例子也能舉一反三啦！
相關文章
- 1. CSS 樣式異步加載
- 2. Qt 異步加載界面或者異步處理數據
- 3. 基於echarts異步加載數據之多個series加載實例
- 4. Loader異步加載數據
- 5. ECharts3異步加載數據
- 6. Jqgrid之異步加載數據-yellowcong
- 7. 數據加載樣式
- 8. 【轉載】Android異步處理
- 9. 轉載：異步處理 celery
- 10. 異步加載的方式
- 更多相關文章...
- • C# 異常處理 - C#教程
- • PHP 異常處理 - PHP教程
- • Flink 數據傳輸及反壓詳解
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. CSS 樣式異步加載
- 2. Qt 異步加載界面或者異步處理數據
- 3. 基於echarts異步加載數據之多個series加載實例
- 4. Loader異步加載數據
- 5. ECharts3異步加載數據
- 6. Jqgrid之異步加載數據-yellowcong
- 7. 數據加載樣式
- 8. 【轉載】Android異步處理
- 9. 轉載：異步處理 celery
- 10. 異步加載的方式