ionic中使用echarts

安装echarts

npm install echarts --save
npm install ngx-echarts --save
npm install @types/echarts --save

在使用页面的.modules.ts引入

import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
  	imports: [
  		NgxEchartsModule
  	],
})

HTML文件

<div echarts [options]='echartoption' style="width:100%;height:30vw;"></div>

ts文件

//先定义一个echartoption
echartoption: any = {};
//在方法里使用
this.echartoption1 = {
          legend: { show:false },
          grid: {
            left: '20%',
            right: '4%',
            bottom: '2%',
            containLabel: true
          },
          graphic:{
            type:'text',
            left:'center',
            top:'30%',
            style:{
                text:this.Take.whhRate!=undefined&&this.Take.whhRate!=null?this.Take.whhRate+"%":0+"%",     //环形中间文字及样式
                textAlign:'center',
                fill:'#000',
                width:30,
                height:30,
                fontSize:"20"
            }
          },
          series: [
            {
              name:'访问来源',
              type:'pie',
              radius: ['85%', '100%'],
              hoverAnimation: false,
              avoidLabelOverlap: false,
              label: {
                  normal: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'normal'
                    }
                  }
              },
              labelLine: {
                normal: {
                    show: false
                }
              },
              data:**[
                {value:this.Take.whhRate!=undefined&&this.Take.whhRate!=null?this.Take.whhRate:0},
                {value:this.Take.whhRate!=undefined&&this.Take.whhRate!=null?(100-this.Take.whhRate):100}
              ]**
            }
          ],
          color: ['#895BDE','#D1C3E9']
         };