柱状图---02

_//初始化数据
_EchartData = [
{
name: ‘光明码头’,
value: 1358
},
{
name: ‘镇司码头’,
value: 1215
},
{
name: ‘炼化码头’,
value: 1146
},
{
name: ‘台塑化一码头’,
value: 985
}, {
name: ‘港鑫东方码头’,
value: 985
},
{
name: ‘北三集司’,
value: 962
},
{
name: ‘北电码头’,
value: 872
},
{
name: ‘金光粮油码头’,
value: 660
}, {
name: ‘青峙化工码头’,
value: 554
},
{
name: ‘东大码头’,
value: 334
}
];

getArrByKey = (data, k) => {
let key = k || “value”;
let res = [];
if (data) {
data.forEach(function(t) {
res.push(t[key]);
});
}
return res;
};

var attackSourcesColor = [
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: “#131a2d” },
{ offset: 1, color: “#f9d901” }
]),
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: “#131a2d” },
{ offset: 1, color: “#a471fa” }
]),
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: “#131a2d” },
{ offset: 1, color: “#46fcfe” }
]),
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: “#131a2d” },
{ offset: 1, color: “#15b9f0” }
])
];
function attackSourcesDataFmt(sData) {
var sss = [];
sData.forEach(function(item, i) {
// console.log(‘item’,item)
_let itemStyle = {
color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i]
};
sss.push({
value: item.value,
itemStyle: itemStyle,
sum:item.sum
});
});
return sss;
}
// 数据排序 多的上去
EchartData = EchartData.sort((a, b) => {
// console.log(‘a’,a,’b’,b)
return b.value - a.value
});
var option = {
tooltip: {
trigger: ‘axis’,
axisPointer: {
type: ‘shadow’
}
},
grid: {
left: ‘5%’,
right: ‘13%’,
bottom: ‘3%’,
top: ‘3%’,
containLabel: true
},
xAxis: {
type: ‘value’,
axisLabel : {
show : true,
textStyle : {
color : ‘#5e829d’,
align : ‘right’,
fontSize: 10 /文字大小/
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine :{ //网格线
lineStyle:{
type:’dotted’, //设置网格线类型 dotted：虚线 solid:实线,
color:’#777e82’
},
show:true //隐藏或显示
},
},
yAxis: {
type: ‘category’,
data: getArrByKey(EchartData, ‘name’),
inverse: true,// 升序
splitLine :{
show:false //隐藏或显示
},
axisLabel : {
show : true,
textStyle : {
color : ‘#A9D2FF’,
align : ‘right’,
fontSize: 10 /文字大小/
}
},
axisLine: {
// show: false
_lineStyle:{
color:’#777e82’
}
},
axisTick: {
show: false
},
offset: 10,
nameTextStyle: {
fontSize: 15,
},
},
series: [
{
name: ‘活跃船舶数’,
type: ‘bar’,
data: attackSourcesDataFmt(EchartData),
barWidth: 14,
barGap: 10,
smooth: true,
label: {
normal: {
show: true,
position: ‘right’,
offset: [5, -2],
textStyle: {
color: ‘#B1E2FE’,
fontSize: 13
}
}
},
itemStyle: {
emphasis: {
barBorderRadius: 7
},
normal: {
barBorderRadius: 7,
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: ‘#131a2d’},
{offset: 1, color: ‘#15b9f0’}

                    ]<br />                    )<br />                }<br />            }<br />        }<br />    ]<br />};