Angular4 echarts柱形图及柱形图上文字显示方向

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); } }

你可能感兴趣的:(Angular4 echarts柱形图及柱形图上文字显示方向)