echart 在toolbox裡新增自定義排序工具
阿新 • • 發佈：2019-02-08
//重新配置資料
myChart.setOption(option);
}
},
myTool2: {
show: true,
title: '降序',
icon: 'image://icon-xia.png',
onclick: function (){
var data_val1=[], name_val1=[];
data = data.sort(function(a,b){
return b.val-a.val;
});
$.each(data,function(i,n){
data_val1.push(n.val);
name_val1.push(n.name);
});
option.xAxis.data = name_val1;
option.series[0].data = data_val1;
myChart.setOption(option);
}
},
myTool3: {
show: true,
title: '還原',
icon: 'M3.8,33.4 M47,18.9h9.8V8.7 M56.3,20.1 C52.1,9,40.5,0.6,26.8,2.1C12.6,3.7,1.6,16.2,2.1,30.6 M13,41.1H3.1v10.2 M3.7,39.9c4.2,11.1,15.8,19.5,29.5,18 c14.2-1.6,25.2-14.1,24.7-28.5',
onclick: function (){
option.xAxis.data = name_val;
option.series[0].data = data_val;
myChart.setOption(option);
}
}
}
},
xAxis: {
type: 'category',//座標軸型別。類目軸
data: name_val, //類目資料
boundaryGap : true,
axisTick : {//座標軸刻度相關設定
alignWithLabel : true,
interval : 0
},
axisLabel : {//座標軸刻度標籤的相關設定。
interval : 0,
rotate : 25
}
},
yAxis: {//直角座標系 grid 中的 y 軸
axisLabel: {//座標軸刻度標籤的相關設定。
textStyle: {//刻度標籤文字樣式
color: '#999'//字型顏色
}
}
},
series: [//系列列表
{
name: 'GMP認證檢查缺陷分佈',
type: 'bar',//柱狀/條形圖
itemStyle: {//柱條樣式
normal: {//正常預設
label: {//圖形上的文字標籤
show: true,
position: 'top',
formatter: '{c}',
textStyle: {
color:'#000'
}
},
color: new echarts.graphic.LinearGradient(//柱條顏色漸變
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
},
emphasis: {//觸發時
color: new echarts.graphic.LinearGradient(//柱條顏色漸變
0, 0, 0, 1,
[
{offset: 0, color: '#2378f7'},
{offset: 0.7, color: '#2378f7'},
{offset: 1, color: '#83bff6'}
]
)
}
},
data: data_val//系列中的資料內容陣列
}
]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>