angular + ionic _ echarts 使用： 折柱图

折柱图的实现：

1. 下载 echars 插件：

命令：
        npm/cnpm install echarts -S
        npm/cnpm install ngx-echarts -S

2. 使用前先导入 echarts文件 在app.module.ts

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

3. 在当前文件使用前 先导入echarts文件 在当前category-info.module.ts

   import { NgxEchartsModule } from 'ngx-echarts';
   @NgModule({
      imports:[CommonModule,
               FormsModule,
               IonicModule,
                NgxEchartsModule,]      //声明
    })
   

4. 在HTML文件中使用 占位

 <div echarts [options]='chartOption2' style="width:98%;;height:220px;margin:10px auto;"></div>

5. 在page.ts文件中定义数据：

this.chartOption2 = {
           grid: {                       // 图距离四周的距离位置
               left: '5%',
               right: '4%',     
               bottom: '20%',
               top:'5%',
               containLabel: true
           },
           tooltip: {
               trigger: 'axis',
               axisPointer: {
                   type: 'cross',
                   crossStyle: {
                       color: '#999'
                   }
               }
           },
           toolbox: { },
           legend: {
               data:['工业用气消费','商业用气消费','工业用气消费增长率','商业用气消费增长率'],
               textStyle:{
                   fontSize:10,
               },
               bottom: "bottom",    // 图标题的位置
           },
           xAxis: [
               {
                   type: 'category',
                   data: this.rxfYear2,  //动态数据     ['2014','2015','2016','2017','2018']  
                       // interval: 0,    //强制文字产生间隔
   				    //rotate: 45,     //文字逆时针旋转45°
   			  	  //  textStyle: {    //文字样式
   					            color: "black",
   					            fontSize: 16,
   					           fontFamily: 'Microsoft YaHei'
                       // },
                   axisPointer: {
                       type: 'shadow'
                   },
                   axisTick: {
                       show: false
                   }
               },
               
           ],
           yAxis: [
               {
                   type: 'value',
                   name: '',
                   axisLabel: {
                       formatter: '{value}'
                   axisLine:{
                       show:false
                   },
                   axisTick: {
                       show: false
                   }
               },
               {
                   type: 'value',
                   name: '',
                   axisLabel: {
                       formatter: '{value}'
                   },
                   axisLine:{
                       show:false
                   },
                   axisTick: {
                       show: false
                   }
               }
           ],
           series: [
               {
                   name:'工业用气消费',             //柱状图
                   type:'bar',
                   barWidth:'20%',
                   data:this.rtValue2    //动态数据     ['400','410','380','390','400'] 
               },
               {
                   name:'商业用气消费',
                   type:'bar',
                   barWidth:'20%',
                  data:this.rqValue2   //动态数据     ['400','410','380','390','400'] 
               },
               {
                   name:'工业用气消费增长率',            //折线图
                   type:'line',
                   yAxisIndex: 1,
                   data:this.rtRateAdd2    //动态数据     ['2','4','6','8','7'] 
               },
               {
                   name:'商业用气消费增长率',
                   type:'line',
                   yAxisIndex: 1,
                   data:this.rqRateAdd2   //动态数据     ['2','4','6','8','7'] 
               }
           ],
           color:['#0AC9F4','#F9A961' ,'rgb(235, 129, 30)','rgb(207, 179, 86)']    //颜色   按着顺序
         };