Angular7 + echarts 柱状图比例（2）+ 保存的echarts-icon

1、效果图

2、代码

import {Component, Input, OnInit} from '@angular/core';
import * as echarts from 'echarts';
import {DataSet} from '@antv/data-set';
import {IndexService} from '../../../services/index.service';

/**
 * @Description : 拟收储面积（公顷）等进度条内容
 * @Auth : Xuhy
 * @DemoUrl : https://gallery.echartsjs.com/editor.html?c=x_DmR07G6K
 * @Date : 2019/6/10
 * @Time : 19:47
 */
@Component({
    selector: 'app-gain',
    templateUrl: './gain.component.html',
})
export class GainComponent implements OnInit {
    // 拟收储面积
    nscComponentGuid = '6fd79ab3-163d-41c7-a41b-c14988665c57';

    myChart: any;

    constructor(private _indexList: IndexService) {
    }

    ngOnInit(): void {
        // 拟收储数据
        this.echartByCIDAndDomId(this.nscComponentGuid, 'try');
    }


    //=========================================================进度条辅助方法=========================================================

    /**
     * 通过规则componentGuid/domId，获取数据之后渲染echart图表
     *
     * @param componentGuid
     * @param domId
     * @return
     * @date 2019/6/15 16:14
     */
    private echartByCIDAndDomId(componentGuid: any, domId: string) {
        var res;
        this._indexList.getOption({
            'componentGuid': `${componentGuid}`,
            'params': {'year': '2019', 'xzq_code': '33'}
        }).subscribe((result: any) => {
                if (result.result == 'Success') {
                    var series = JSON.parse(result.data).data.series[0];
                    res = this.setMyseries(series.data);
                }
            },
            error1 => {
                console.log(error1);
            },
            () => {
                this.myChart = echarts.init(document.getElementById(domId));

                // 拟收储面积（公顷）等
                var option = this.assemblyChart(res.honorData, res.myseries);
                this.myChart.setOption(option, true);
            });
    }

    /**
     * 通过规则基本对象属性封装进度条的对象json
     *
     * @param data
     * @return honorData, myseries
     * @date 2019/6/17 14:39
     */
    private setMyseries(data: any[]): any {
        var honorData: any[] = [];
        var myseries: any[] = [];

        data.forEach((o, i) => {
            var name = o.name;
            var data = o.value;

            honorData.push({name: name, data: [data]});

            // 封装页面季度条显示对象
            var sery = {
                name: name,
                type: 'bar',
                barWidth: 20,
                stack: '总量',
                zlevel: 10,
                data: honorData[i].data
            };

            myseries.push(sery);
        });
        return {honorData, myseries};
    }

    /**
     * 组装图表
     *
     * @param honorData 数据源
     * @param myseries 文字json
     * @return
     * @date 2019/6/17 10:35
     */
    private assemblyChart(honorData: any[], myseries: any[]): any {
        // note: 设置灰色背景色的长度的逻辑不够好，请自行调整

        var legendData = [],
            sumArray = [],
            honorXAxisData = ['拟收储面积'];
        var maxArray = [];
        var sumData1 = null;
        var sumData2 = null;
        var sumData3 = null;
        var sumData4 = null;
        var sumData5 = null;
        honorData.map(function (a, b) {
            legendData.push(a.name);
            a.data.map(function (x, y) {
                switch (y) {
                    case 0:
                        sumData1 += x;
                        break;
                    case 1:
                        sumData2 += x;
                        break;
                    case 2:
                        sumData3 += x;
                        break;
                    case 3:
                        sumData4 += x;
                        break;
                    case 4:
                        sumData5 += x;
                        break;
                }
            });
        });
        maxArray.push(sumData1, sumData2, sumData3, sumData4, sumData5);
        // 设置灰色背景色的长度
        var isMax = maxArray.sort(function (a, b) {
            return b - a;
        })[0] * 1.1;
        var bjData1 = [isMax, isMax, isMax, isMax, isMax];
        var bjData2 = [isMax + 20, isMax + 20, isMax + 20, isMax + 20, isMax + 20];

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'none'
                },
                // show: true,
                // backgroundColor: '#fff',
                borderColor: '#ddd',
                textStyle: {
                    // color: '#3c3c3c',
                    fontSize: 16
                },
                formatter: function (p) {
                    var relVal = p[0].name;
                    var sum = 0;
                    for (var z = 0; z < p.length; z++) {
                        if (!(p[z].seriesName == 1001 || p[z].seriesName == 1000)) {
                            sum += p[z].value;
                        }
                    }
                    for (var i = 0; i < p.length; i++) {
                        if (!(p[i].seriesName == 1001 || p[i].seriesName == 1000)) {
                            // NaN 判断
                            relVal += '<br>' + p[i].marker + p[i].seriesName + ' ' + p[i].value + ' ' + '(' + (((100 * parseFloat(p[i].value)) / parseFloat(String(sum))).toFixed(2)== 'NaN' ? 0 : p[i].value) + '%)';
                        }
                    }
                    return relVal;
                }
            },
            backgroundColor: '#ffffff',
            color: ['#4BCED0', '#FFA94C', '#006EDF', '#E167557'],
            legend: {
                data: legendData,
                x: 'center',
                y: 'bottom',
                itemWidth: 20,
                itemHeight: 20,
                itemGap: 30, // 例间距
                padding: 30,
                textStyle: {
                    color: '#999999',
                    fontSize: 16
                }
            },
            grid: {
                left: '10%',
                right: '10%',
                bottom: '5%',
                top: '5%',
                containLabel: true
            },
            xAxis: [{
                type: 'value',
                show: false
            },
                {
                    type: 'value',
                    show: false
                }
            ],
            yAxis: [{
                type: 'category',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#999999',
                    fontSize: 16, // 文字大小
                    fontWeight: 400,
                    interval: 0
                },
                offset: 20,
                data: honorXAxisData
            },
                {
                    type: 'category',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#5b00ff',
                        fontSize: 36,
                        fontWeight: 300,
                        interval: 0
                    }
                }
            ],
            series: [{
                name: '1000',
                type: 'bar',
                barGap: '-100%',
                barWidth: 20,
                itemStyle: {
                    normal: {
                        barBorderRadius: [30, 30, 30, 30]
                    }
                },
                xAxisIndex: 0,
                // yAxisIndex: 1,
                data: bjData1,
                emphasis: {
                    itemStyle: {
                        color: '#999999'
                    }
                },
                zlevel: 5
            }
            ]
        };
        myseries.forEach(series => {
            option.series.push(series);
        });
        return option;
    }

    //=========================================================进度条辅助方法=========================================================


}

<div id="try" style="height:260px;"></div>

1.保存 功能

2.在series上方或者下方添加

toolbox: {
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },