html中
在Angular4中的ts文件
import * as echarts from 'echarts';
import * as numeral from 'numeral';
@Component({
selector: 'app-barchart',
templateUrl: './barchart.component.html',
styleUrls: ['./barchart.component.scss']
})
export class BarChartComponent implements OnInit {
barchart:any;
echartsOptions:any;
ngOnInit() {
this.barchart = echarts.init(document.getElementById('barchart'));
this.echartsOptions = {
animation: false,
title : {
text: '',
subtext: '',
textStyle : {
color : '#FFF' ,
fontWeight: 'normal',
fontFamily: 'globalFirstFont'
},
x: '25%',
y: '-2%'
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'none'
},
//自定义tooltip显示的数据金钱符号及格式化
formatter: function(datas) {
let res = datas[0].name + '
', val;
for (let i = 0, length = datas.length; i < length; i++) {
val = '€' + numeral(datas[i].value / 100).format('0,0.00');
res += datas[i].seriesName + ':' + ' ' + val + '
';
}
return res;
}
},
legend: {
data: ['収入', '支出'] ,
show : false,
textStyle : {
color : '#FFF' ,
fontSize : 16 ,
},
bottom: '0',
// padding_top: 20
},
calculable : true,
grid: {
left: '3%',
right: '3%',
bottom: '15%',
top: '8%',
// containLabel: true
},
xAxis : [
{
scale: true,
type : 'category',
// splitNumber: 3,
nameGap : 20,
data : [1,2,3,4,5,6],
color : '#FFF' ,
fontSize : 18 ,
axisTick: {
show: false
},
axisLine : {
show : false,
lineStyle : {
width: 3,
type: 'solid',
color: '#4073FF',
alpha: .4
}
},
splitLine: {
show: false
},
axisLabel : {
textStyle : {
color : '#323232' ,
fontSize : 16 ,
}
}
}
],
yAxis : [
{
type : 'value',
show: false,
}
],
series : [
{
barGap : 1,
name: 'title',
type: 'bar',
barWidth: 20,
itemStyle: {
emphasis: {
barBorderRadius: [0, 30, 30, 0]
},
normal : {
barBorderRadius: [4, 4, 4, 4],
borderWidth: 1,
borderColor: '#4073FF',
**//自定义每个柱子的颜色**
color: function(params) {
const colorList = ['#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFC15D'];
return colorList[params.dataIndex];
},
label : {
show : true,
textStyle : {
fontSize : 14,
color: '#4073FF',
fontFamily: 'globalFirstFont'
},
rotate: -90,
align: 'left',
verticalAlign: 'middle',
position: 'insideTop',
padding_top: 10,
}
},
},
data: [{value: 195000}, {value: 247250}, {value: 167500}, {value: 172250}, {value: 187000}, {value: 180000,
label: {normal: {textStyle: {color: '#FFF'}}}, itemStyle: { emphasis: { color: '#FFC15D' }, normal : {borderColor:'#FFF'}}
}]
},
{
barGap : 0.2,
name: '支出',
type: 'bar',
barWidth : 20,
itemStyle: {
emphasis: {
barBorderRadius: [0, 30, 30, 0],
},
normal : {
barBorderRadius: [4, 4, 4, 4],
color: function(params) {
const colorList = ['#4073FF', '#4073FF', '#4073FF', '#4073FF', '#4073FF', '#FF9400'];
return colorList[params.dataIndex];
},
label : {
show : true,
textStyle : {
fontSize : 14,
color: '#FFF',
fontFamily: 'globalFirstFont'
},
//柱子文字垂直显示
rotate: -90,
align: 'left',
verticalAlign: 'middle',
position: 'insideTop',
padding_top: 10,
formatter: function (a) {
return '€ ' + numeral(a.value / 100).format('0,0.00');
},
}
},
},
data: [247250, 187000, 237000, 172250, 189500,
{value: 95000,
label: {itemStyle: { emphasis: { color: '#FF9400' } , normal: {label: { padding_top: 10}}}}
}]
}
]
};
this.barchart.setOption(this.echartsOptions, true);
}
}