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

最新推荐文章于 2024-08-17 10:29:13 发布

前端小白123

最新推荐文章于 2024-08-17 10:29:13 发布

阅读量3k

点赞数

文章标签： Angular echarts

本文链接：https://blog.csdn.net/zhenmingyue123/article/details/83089037

版权

html中

 <div echarts [options]="echartsOptions" id="barchart"></div>

在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 + '<br/>', 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 + ':' + '&nbsp;&nbsp;' + val + '<br/>';
                }
                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);
}



}