echart是一個商業級別的數據圖標,一個純JavaScript的圖標庫,下面是中每個柱子超過閾值改變顏色狀態
一.設置相關變量
var snames1=[];
var vals1=[];
var color1=[];
二. 通過ajax獲取相關數據進行處理
$.ajax({
type: "POST",
url:ctx+"/aum/getMeAsLi",
dataType:"json",
success:function(data){
if(data){
for(var i=0;i<data.length;i++){
//如果公司名稱存在時候,把公司名稱放入snames1
if(data[i].sorg_sname!==""||data[i].sorg_sname!==0) {
//push()方法可以向數組的末尾添加一個或是多個元素,並返回新的長度
snames1.push(data[i].sorg_sname);}else{
snames1.push(0);}
//如果相應的數值存在時候,把公司名稱放入vals1
if(data[i].val!==""||data[i].val!==0) {
vals1.push(data[i].val);
}else{
vals1.push(0);
}
三.根據組織機構名稱和數值進行判斷,如果相應的值超過閾值,則改變顏色
if(data[i].sorg_sname=="公司名1"&&data[i].val>=30) {color1.push('#F26865');}
else if(data[i].sorg_sname=="公司名1"&&data[i].val<30){color1.push('#4780F5');}
if(data[i].sorg_sname=="公司名2"&&data[i].val>=40){
color1.push('#F26865');}
else if(data[i].sorg_sname=="公司名2"&&data[i].val<40){color1.push('#4780F5');}
if(data[i].sorg_sname=="公司名3"&&data[i].val>=30){
color1.push('#F26865');}
else if(data[i].sorg_sname=="公司名3"&&data[i].val<30){color1.push('#4780F5');}
if(data[i].sorg_sname=="公司名4"&&data[i].val>=60){
color1.push('#F26865');}
else if(data[i].sorg_sname=="公司名4" && data[i].val<60){color1.push('#4780F5');}
if(data[i].sorg_sname=="公司名5"&&data[i].val>=90){
color1.push('#F26865');}
else if(data[i].sorg_sname=="公司名5" && data[i].val<90){color1.push('#4780F5');}
}
}
var myChart = echarts.init(document.getElementById('aa3b'));
三.將相關的數據放入option中
itemStyle: {
normal: {
color: function(params) {
var colorList=color1;
return colorList[params.dataIndex] 即可
四.這是效果圖,如果超過指定的閾值,相應的柱子就會變成變色,引起用戶的警示