Angular7 + echarts 柱状图比例（2）+ 保存的echarts-icon_sery = { name : '', type : 'line', smooth : true, -优快云博客

本文介绍了如何在Angular7项目中使用Echarts创建柱状图，并详细说明了如何添加保存为图片的功能。通过在series配置项上方或下方添加toolbox组件，实现图表的restore和saveAsImage功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 => {
                cons