Angular4.x+ 集成 echarts(亲测)

2020-03-25 先放张效果图.gif

image.png

第一步：

到echarts官网下载一个需要的js版本，我这里是自己定制的，只选取了折线，柱状，饼图。

算了不放源文件了，太大了发不了文章。自己到官网下。

第二步：

引入到静态的项目文件里面，如下图：

image.png

第三步：找到：typings.d.ts 这个文件加入：

declare var echarts: any;

第四步：构建一个组件，并渲染界面

html

<div class="content">
        <div id="container" style="height: 600px"></div>
        <!--<div echarts [options]="chartOption" style="height: 400px" class="demo-chart"></div>
        <div echarts [options]="option" style="height: 400px" class="demo-chart"></div>-->
    </div>

ts

chartInit(): void {
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var option = {};
        option = {
            title: {
                text: 'Step Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Step Start', 'Step Middle', 'Step End']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'Step Start',
                    type: 'line',
                    step: 'start',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Step Middle',
                    type: 'line',
                    step: 'middle',
                    data: [220, 282, 201, 234, 290, 430, 410]
                },
                {
                    name: 'Step End',
                    type: 'line',
                    step: 'end',
                    data: [450, 432, 401, 454, 590, 530, 510]
                }
            ]
        };

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }


    ngOnInit(): void {
        this.chartInit();
    }