import {Component, OnInit} from '@angular/core'; import {MovieService} from "../movie.service"; @Component({ selector: 'app-avg-rate-by-type', templateUrl: './avg-rate-by-type.component.html', styleUrls: ['./avg-rate-by-type.component.css'] }) export class AvgRateByTypeComponent implements OnInit{ movies: any[] = [] options: any; constructor(private movieService: MovieService) { } ngOnInit() { this.movieService.avg_rate_by_type().subscribe((data: any[]) => { this.movies = data; console.log(this.movies) const type = Object.keys(data) const avg_rate = Object.values(data) this.options = { title: { text: '不同类型电影质量', left:'center', }, xAxis: { type: 'category', data: type, axisLabel: { interval: 0 } }, yAxis: { type: 'value' }, series: [ { data: avg_rate, type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' }, sort:'descending' } ] } }) }}如何让柱形图的柱子从大到小排序？

你可以在series中添加sort属性并将其设置为'descending'来让柱形图的柱子从大到小排序。修改后的代码如下：

import {Component, OnInit} from '@angular/core';
import {MovieService} from "../movie.service";

@Component({
  selector: 'app-avg-rate-by-type',
  templateUrl: './avg-rate-by-type.component.html',
  styleUrls: ['./avg-rate-by-type.component.css']
})
export class AvgRateByTypeComponent implements OnInit{
  movies: any[] = []
  options: any;

  constructor(private movieService: MovieService) {
  }

  ngOnInit() {
    this.movieService.avg_rate_by_type().subscribe((data: any[]) => {
      this.movies = data;
      console.log(this.movies)
      const type = Object.keys(data)
      const avg_rate = Object.values(data)
      this.options = {
        title: {
          text: '不同类型电影质量',
          left:'center',
        },
        xAxis: {
          type: 'category',
          data: type,
          axisLabel: {
            interval: 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: avg_rate,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            sort:'descending'
          }
        ]
      }
    })
  }
}