Angular7 + echarts 柱状图比例（1）

1、效果图

2、代码

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

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-2ZFV-zvt
 * @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';
    // 已入库面积
    yrkComponentGuid = '28d2137f-2a05-4d5d-97da-3ce62557b969';
    // 已出库面积
    ycrComponentGuid = 'a47042ad-f76b-461f-b4a1-edfdf5b5bac9';

    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 myseries;

        this._indexList.getOption({
            'componentGuid': `${componentGuid}`,
            'params': {'year': '2019', 'xzq_code': '33'}
        }).subscribe((result: any) => {
                if (result.result == 'Success') {
                    var colors = ['#4bced0', '#ffa94c', '#006edf', '#e167557'];

                    var series = JSON.parse(result.data).data.series[0];
                    myseries = this.setMyseries(series.data, colors);
                }
            },
            error1 => {
                console.log(error1);
            },
            () => {
                this.myChart = echarts.init(document.getElementById(domId));

                // 拟收储面积（公顷）等
                this.assemblyChart(myseries);
                console.log(`${componentGuid}，进度条加载已完成。`);
            });
    }

    /**
     * 通过规则基本对象属性封装进度条的对象json
     *
     * @param data
     * @param colors
     * @return sery
     * @date 2019/6/17 14:39
     */
    private setMyseries(data: any[], colors: any[]): any {
        var arr: any[] = [];
        data.forEach((o, i) => {
            var name = o.name;
            var data = o.value;

            // 封装页面季度条显示对象
            var sery = {
                type: 'bar',
                name: `${name}`,
                data: [`${data}`],
                stack: 'income',
                barWidth: 13,
                label: {
                    normal: {
                        show: true,
                        position: 'left',
                        //TODO
                        offset: [40, 40],
                        formatter: '{a}\n{c} （公顷）'
                    }
                },
                itemStyle: {
                    normal: {
                        color: data == 0 ? '#ffffff' : `${colors[i]}`,
                        barBorderRadius: [5, 0, 0, 5],

                    }
                },
            };

            arr.push(sery);
        });
        return arr;
    }

    /**
     * 组装图表
     *
     * @param data 数据源
     * @param color 颜色
     * @return
     * @date 2019/6/17 10:35
     */
    private assemblyChart(myseries: any[]) {
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    var res = params.name;

                    for (var i = 0; i < myseries.length; i++) {
                        res += myseries[i].name + ' : ' + myseries[i].data[0] + '（公顷 ）</br>';
                    }
                    return res;
                }
            },
            xAxis: {
                type: 'value',
                show: false,

            },
            yAxis: {
                type: 'category',
                show: false,
                axisTick: {
                    show: false
                }
            },
            series: myseries
        };
        this.myChart.setOption(option, true);
    }
}