ngx-echarts笔记（angular+ngx-echarts）

这里的很乱，正确md排版的见`ngx-echarts笔记2`(https://blog.csdn.net/kikyou_csdn/article/details/82528373)

### 一、给图表添加背景

在图表外加一个外层div,给这个外层div设置背景

>html:

 

```

<!--html-->

<div class="setimg">

    <div echarts [options]="rightOption4" class='demo-chart'></div>

</div>

```

 

>css:

 

```

.setimg {

    width: 100px;

    height: 100px;

    margin:0 auto;

    background: url("../../assets/icon2.png") no-repeat;

    background-size:50px 50px;/*背景图片大小*/

    background-position: center center;/*背景图片居中*/

    border: 1px solid blue;/*没啥用，方便调试0.0*/

}

.demo-chart {

    width: 100%;   

    height: 100%;

    margin-top: 0 ;

}

```

>显示效果：

### 二、在环状图中添加指示线

>去掉series[]里的label和labelline属性就可以显示了，应该是默认就可以显示的（具体原因不知道）

显示效果：

### 三、在柱状图上方添加数字

 

在series:[]里添加

>ts:

 

```

series : [

        {

            name:'jiang',

            type:'bar',

            data: [40, 60, 50, 88, 67, 55, 34, 56],          

            label:{

                show:true,

                position:'top',//在顶部显示数值

            }

        },

        

    ]

```

 

### 四、在柱状图上方添加百分数（字符串）

 

* 和添加数字一样，只是增加一个`formatter`属性

* 不能直接在data里写字符串

 

```

series : [

        {

            name: 'jiang',//name

            type: 'bar',

            barWidth: '50%',

            data: [40, 60, 50, 88, 67, 55, 34, 56],           

            label:{

                show:true,

                position:'top',//在顶部显示数值

                formatter:'{c}%'//给数字后添加“%”

            }

        },

        

    ]

```

 

 

 

### 五、去掉网格线和坐标线

在`xA