問題引入
我們知道泳赋，在echarts3.0 中引入了炫酷的展示效果屿愚，但是我們發(fā)現(xiàn)控制這些炫酷樣式的代碼全部都在series或者其他標(biāo)簽里面汇跨，如果取消之后就變成了官方實例默認(rèn)的樣式务荆。給個例子：
option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/> : {c} (p9nlx1x%)"
},
//注意這里的color標(biāo)簽,待會兒會注釋掉對比效果
color:['#8fc31f','#f35833','#00ccff','#ffcc00'],
legend: {
orient: 'vertical',
x: 'right',
data: ['準(zhǔn)時','遲到','請假','未到'],
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:'準(zhǔn)時'},
{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: '穷遂 : {c} (1x7tzdh%)'
}
},
labelLine :{show:true}
},
}
]
};
加載的圖形如圖所示:
添加了樣式的option
然后我們把上面的option中的color屬性注釋掉:
/**color:['#8fc31f','#f35833','#00ccff','#ffcc00'],*/
然后函匕，就變成了這樣:
默認(rèn)樣式
這個圖例就是官方默認(rèn)的顏色，很難看有木有蚪黑。那么問題來了盅惜，我們實際應(yīng)用中加載的元素是不確定的，不可能把color定死為4個顏色祠锣，可能是3個酷窥，可能是5個咽安，如果我們要想實現(xiàn)自定義顏色伴网，該怎么才能實現(xiàn)呢？不可能把它寫到數(shù)據(jù)庫中然后單獨拼接到j(luò)son串中吧妆棒，太麻煩了而且實踐性不高澡腾。
解決方案
我們只要在js中定義一個足夠大的顏色或者樣式對象數(shù)組即可，然后再遍歷json串的時候按需加載所需要的顏色或者樣式糕珊，即有幾個展示的因子就加載幾種顏色（樣式）动分。
實際來操作一下，假設(shè)我們的json串為
var json={
"data":[
{ "value":335, "name":"準(zhǔn)時" },
{ "value":310, "name":"遲到" },
{ "value":234, "name":"請假" },
{ "value":135, "name":"未到" }
],
"text":"考勤情況統(tǒng)計報表",
"subtext":"xx公司"
}
那么我們定義一個color數(shù)組,
//根據(jù)自己的需要红选，定義多個澜公，保證每個數(shù)據(jù)都能取到即可。
var color=['#8fc31f','#f35833','#00ccff','#ffcc00','#9c6a79','#21b6b9'...],
然后喇肋，把這個color數(shù)組按元素因子的個數(shù)去取對應(yīng)數(shù)量的顏色即可坟乾。
var color=['#8fc31f','#f35833','#00ccff','#ffcc00','#9c6a79','#21b6b9'...],
//length<=color.length;
var length=json.data.length;
//分割數(shù)組
json.color=color.slice(0,length);
再打印json數(shù)據(jù)
var json={
"data":[
{ "value":335, "name":"準(zhǔn)時" },
{ "value":310, "name":"遲到" },
{ "value":234, "name":"請假" },
{ "value":135, "name":"未到" }
],
"text":"考勤情況統(tǒng)計報表",
"subtext":"xx公司",
"color":["#8fc31f","#f35833","#00ccff","#ffcc00"]
}
大功告成！這就達(dá)到了我們想要的數(shù)據(jù)蝶防，然后我們把json串中的數(shù)據(jù)加載到想應(yīng)的echarts中option即可甚侣。
復(fù)雜案例
我們前面所討論的只是顏色這一要素，是最基本的原理和思想的展示间学。那么我們再來看一個比較復(fù)雜的例子殷费。涉及到series的樣例，先上圖低葫。
折線面積圖
再來看option：
option = {
// backgroundColor: '#394056',
title: {
text: '請求數(shù)',
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: ['移動', '電信', '聯(lián)通'],
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
}
},
//控制線條下面區(qū)域面積的顏色
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
}
},
//控制線條下面區(qū)域面積的顏色
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: '聯(lián)通',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
//控制線條下面區(qū)域面積的顏色
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去掉,再來看效果：
默認(rèn)樣式
很明顯沒有加了樣式的好看。
這里我就說下大概思路嘿悬，和上面加載color數(shù)組顏色類似殷绍，先把需要加載的樣式areaStyle,itemStyle抽取出來做成足夠大的數(shù)組。
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數(shù)組類似
....
然后鹊漠，通過遍歷將這個2個數(shù)組添加到對應(yīng)的json串中即可,這里省略中間過程主到，最后我們得到類似這樣的json串就ok了
//這里json串沒有嚴(yán)格遵循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":"請求數(shù)",
"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:{
.....
},.......
}
}
好的茶行，這樣就無所不能了，我們想要加載什么樣式都不是問題了登钥，相信大家多研究幾個例子也能觸類旁通啦畔师！
