echarts圆环制作

最新推荐文章于 2025-06-20 12:15:10 发布

原创最新推荐文章于 2025-06-20 12:15:10 发布 · 426 阅读

CC 4.0 BY-SA版权

文章标签：

<div id="chart" ref="chart":style="{width: '100%', height: '300px'}"></div>

import echarts from 'echarts'

mounted () {
  this.initChart();

  this.$nextTick(() => {     //初始化
    this.initChart();
    this.getChartData();
    window.addEventListener("resize", () => {
      this.resize();           //监听屏幕大小，来刷新画布
    });
  });
},

methods: {
  //查询图表数据  动态的改变数据
  getChartData() {
    this.chart.hideLoading();
  },
  // echarts表格
  initChart() {
    let option = {
      title: {
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      //颜色
      color: ['#FFAF5F','#58E88A','#FF8A8F','#267AFE'],

      //圆环右上方的提示
      legend: {
        orient: 'vertical',
        x: '55%',  // x轴位置
        y: '8%',   // y轴位置
        data:['贷款xx万/xx月','利息xx元(xx%/月)','月利息xx元','费用无']
      },
      // 圆环内name
      graphic: [{
        type: 'text',
        left: '9.5%',
        top: '20%',
        fontSize: 12,
        style: {
          text: '总利息:1.2万元',
          fill: '#212937'
        }
      },{
        type: 'text',
        left: '11%',
        top: '28%',
        fontSize: 12,
        style: {
          text: '月供:1.2万元',
          fill: '#212937'
        }
      }],
      series: [
        {
          name:'访问来源',
          type:'pie',
          radius: ['30%', '40%'],
          center: ['20%', '25%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'left',
            },
            //点击圆环有提示
            // emphasis: {
            //   show: true,
            //   textStyle: {
            //     fontSize: '14',
            //     fontWeight: '500'
            //   }
            // }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data:[
            {value:335, name:'贷款xx万/xx月'},
            {value:310, name:'利息xx元(xx%/月)'},
            {value:234, name:'月利息xx元'},
            {value:135, name:'费用无'},
          ]
        }
      ]
    };

    this.chart = echarts.init(this.$refs.chart);   //定义
    this.chart.showLoading();  //等待的显示
    this.chart.setOption(option);  //展示
    this.chart.resize(); //刷新画布
  },
  resize() {
    if (this.chart) {
      this.chart.resize();
    }
  },
}