Angular-创建一个带有主内容和副内容的饼状图表

最新推荐文章于 2020-07-14 14:30:03 发布

宕机高手

最新推荐文章于 2020-07-14 14:30:03 发布

阅读量396

点赞数 1

分类专栏： Angular

本文链接：https://blog.csdn.net/weixin_41012753/article/details/85337914

版权

Angular 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

最近遇到一个需求,大概是这个样子在这里插入图片描述

本来想用D3js去画，后来发现这个主要得问题在于饼状图里面的两个label是不同格式，有一个主内容和副内容，查了查也没有找到合适的方法（对不起，其实就是没画明白）。

然后找了找其他插件，发现echart这个插件太好用了。他的核心也是d3，但是封装的很好，稍微改改就可以达到效果。
点击可以进入官网echarts。

1.安echarts插件

这个自行百度吧 ?

2.给图表一个空间（view）

 <div echarts [options]="pieoption" [loading]="showloading" class="demo-chart"></div>

[options]是图标的一个标志位，我们需要在ts里写下绘制图表的逻辑
[loading]给他一个延迟加载的动画效果

3.绘制图表（controller）

延迟动画

constructor() {
    setTimeout(() => {
      this.showloading = false;
    }, 3000);
    this.news = MOCKNEWS;
  }

绘制图表

 this.pieoption = {
      color: ['#E6E7E9', '#E6E7E9'],
      tooltip: {
        show: false//display prompt
      },
      series: [{
        name: '您所选取功能所占总金额得百分比',
        type: 'liquidFill', 
        radius: ['60%', '70%'],//control pie width
        label: {
          normal: {
            position: 'center'
          }
        },
        hoverAnimation: true,
        data: [{
          value: this.realTotal,
          name: '',
          itemStyle: {
            normal: {
              color: {
                colorStops: [{
                  offset: 0,
                  color: '#367bec' // 0% color
                }, {
                  offset: 1,
                  color: '#28D2E3' // 100% color
                }]
              },
              borderWidth: 0,
              label: {
                show: true
              },
              labelLine: {
                show: false
              }
            }
          },
          label: {
            normal: {
              formatter: '{d}%',
              textStyle: {
                color: '#000',
                fontSize: 120,
                fontWeight: 'bold'
              }
            }
          },
        }, {
            value: this.unlessTotal,
            name: '',
            itemStyle: {
              normal: {
                color: {
                  colorStops: [{
                    offset: 0,
                    color: '#E6E7E9' // 0% color
                  }, {
                    offset: 1,
                      color: '#E6E7E9' // 100% color
                  }]
                },
                borderWidth: 0,
                label: {
                  show: true
                },
                labelLine: {
                  show: false
                }
              }
            },
          label: {
            normal: {
              formatter: '\n\n\n您所选取功能所占总金额得百分比\nThe percentafe of the total amount of\n functional requirements\n that you select',
              textStyle: {
                color: '#000',
                fontSize: 25
              }
            }
          }
        }]
      }]
    };