Angluar5+ionic3实践(三)

背景: 这几天在做复宏汉霖的报表.用到了echarts.git到了一个新功能.三张报表.静态页面画了两天.今天来整理下学到的知识点.

认识下echarts

echarts官网地址

里面有许许多多的图例.目前我需要用到的是饼图Pie和柱状图Bar.

实践饼图Pie

• 先看下实现效果:

由上图可看出实际覆盖率用的是饼图.这里用到的就是echarts的 Pie.

• 实现逻辑:

html 页面代码:

 <ion-row justify-content-between >
     <div no-margin class="font-12 echarts-title" style='border-bottom: none !important;'>
         <span style='margin:0px 0px 10px 0px;color: #14a3d9;display: block;'>实际覆盖客户数</span>
         <div style="position: relative; margin-left: 10%;"> 
         <img src="assets/icon/actual.png" alt="" style="width: 80px;margin-left: 40%;"/>
         <p class='number'>10000人</p>
         </div>
     </div>
     <div no-margin class="font-12 echarts-title" style='border-bottom: none !important;'>
         <span style='margin:0px 0px 0px -40px;color: #d98a14;display: block;'>实际覆盖率</span>
         <div #chart1 style='width:100px;height:100px;' ></div>
     </div>
 </ion-row>

ts 页面代码:

export class VisitReportPageNew {
     @ViewChild("chart1") chart1: ElementRef; 
      ionViewWillEnter() {
         this.setChart1();
      }
      setChart1() {
         const ec = echarts as any;
         const container = this.chart1.nativeElement;
         const chart = ec.init(container);
         chart.setOption({
             title: {
                 show: true,
                 x: "center",
                 y: "center",
                 text: 85 + "%",
                 itemGap: 0, // 主副标题间距
                 textStyle: {
                     fontSize: "13",
                     color: "#d98a14",
                 },
                 subtext: "",
                 subtextStyle: {
                     fontSize: "13",
                     color: "#5B697A",
                     fontWeight: "600",
                 },
             },
             color: ["#d98a14", "#f1dbbb"],
             series: {
                 name: "",
                 type: "pie",
                 radius: ["72%", "82%"],
                 avoidLabelOverlap: true,
                 hoverAnimation: false,
                 labelLine: {
                     normal: {
                        show: false,
                     },
                 },
                 data: [
                     { value: 85, name: "" },
                     { value: 15, name: "" },
                 ],
             },
         });
         }
}

• 还有css和module.ts页面的代码关联不大我就不放了.
• 这里主要记住的一些基本参数.

1. series.type : 定义图形形状
2. series.radius : 图形大小,第一个参数是外圈,第二个参数是内圈
3. color : 图形颜色,第一个参数是分布圈主要颜色,第二个参数是剩余内容颜色
4. title.text : 图形中间的文字
5. title.textStyle : 图形中间的文字的样式
6. series.data : 占比值

实践饼图稍复杂版Pie

• 先看下实现效果:

上图中的拜访次数分布by拜访目的的图就是稍复杂版的饼图.
来看下代码:

html 页面代码:

 <ion-card>
     <div class="visit-number">
         <div no-margin class="font-12 echarts-title" style='border-bottom: none !important;'>
             <p style="font-size: 12px;color: #999999;">拜访次数分布by拜访目的</p>
         <div #chart2 style='width:300px;height:300px;margin-top: 20px;'></div>
         </div>
     </div>
  </ion-card>

ts 页面代码:

export class VisitReportPageNew {
     @ViewChild("chart2") chart2: ElementRef;
      ionViewWillEnter() {
         this.setChart2();
      }
      setChart2() {
         const ec = echarts as any;
         const container = this.chart2.nativeElement;
         const chart = ec.init(container);
         chart.setOption({
             tooltip: {
                 name: "占比",
                 trigger: "item",
                 backgroundColor: "rgba(255,255,255,0.8)",
                 textStyle: {
                    color: "black",
                 },
                 formatter: function (params) {
                     return (params.marker + params.name + " : " +params.value + "人" + "(" +params.percent +"次)");
                 },
                 position: [10, 10],
            },
             color: ["#4584DC","#14A3D9","#5FBFE4","#2FC691","#F3B73B","#F0D7A2","#DC6025",],
             legend: {
                 show: "true",
                 orient: "horizontal",
                 x: "center",
                 bottom: "6%",
                 itemWidth: 15,
                 itemHeight: 15,
                 itemGap: 15,
                 data: ["拜访目的1", "拜访目的2", "拜访目的3", "拜访目的4", "拜访目的5"],
                 textStyle: {
                     color: "#535E6C",
                     opacity: 0.7,
                 },
             },
         // 圆心中间说明
             graphic: {
                 elements: [{
                     type: "text",
                     style: {
                         text: `占比`,
                         fill: "#98A6B7",
                         fontSize: 14,
                         textAlign: "center",
                         fontWeight: 800,
                     },
                     left: "center",
                     top: "32%",
                 }],
             },
             series: [{
                 name: "",
                 type: "pie",
                 radius: ["30%", "40%"],
                 center: ["50%", "34%"],
                 avoidLabelOverlap: true,
                 label: {
                     normal: {
                         formatter: `{d}次`,
                         borderWidth: 0,
                         borderRadius: 4,
                         fontWeight: "bold",
                         padding: [-20, -35, 0, -25], // 外标说明位置
                     rich: {
                         a: {
                            // 外标底部
                             color: "#606C7B",
                             fontSize: 14, // 字大小
                         },
                     hr: {
                         width: "100%",
                         borderWidth: 0.5,
                         height: 0,
                     },
                     b: {
                         // 外标顶部
                         fontSize: 14, // 字大小
                         color: "#606C7B",
                     },
                    },
                    },
                 },
                 labelLine: {
                     show: true,
                     length: 25,
                     length2: 35,
                 },
                 data: [
                 {
                     value: "1",
                     name: "拜访目的1",
                 },
                 {
                     value: "2",
                     name: "拜访目的2",
                 },
                 {
                     value: "3",
                     name: "拜访目的3",
                 },
                 {
                     value: "4",
                     name: "拜访目的4",
                 },
                 {
                     value: "5",
                     name: "拜访目的5",
                 },
                 ],
             }],
       });
   }
}

• 那个代码有点点多.... 可能以后学会了熟练了代码就变得精简了...
• 整理一下这个稍复杂的饼图学到的属性值:

1. series.label.normal.formatter : 饼图块延伸出来的文字说明.
2. series.center : 图形在所在区域的位置.

实践柱状图Bar

• 先看下实现效果:

上图中的机构分布by等级是用柱状图展示的

HTML 页面代码:

 <ion-row>
     <div no-margin class="font-12 echarts-title" style='border-bottom: none !important;'>
        <span style='color: #999999;'>机构分布by等级</span>
     <div #chart1 style='width:300px;min-height:200px;' ></div>
     </div>
 </ion-row>

ts 页面代码:

export class VisitReportPageNew {
     @ViewChild("chart1") chart1: ElementRef; 
      ionViewWillEnter() {
         this.setChart1();
      }
      setChart1() {
         const ec = echarts as any;
         const container = this.chart1.nativeElement;
         const chart = ec.init(container);
         chart.setOption({
             xAxis:[{
                 type: "category",
                 data: ['A级', 'B级', 'C级', 'D级',],
                 axisTick:{
                    alignWithLabel:true,
                 },
                boundaryGap:['20%', '20%']
             }],
             yAxis:[{
                show: false,
             }],
             series:[{
                 name:'',
                 barWidth: 10,
                 data: [60, 76, 55, 19],
                 type: 'bar',
                 color: '#32a3e7',
                 label: {
                     show: true,
                     position: 'top',
                     formatter: "{c}"+"家",
                     color: '#000000',
                 }
             }]
         });
    }

• 柱状图稍微简单一些.这里用到了隐藏Y轴,修改X轴刻度.增加状图文字.
• 学到的属性值介绍:

1. yAxis.show : 是否展示Y轴
2. series.barWidth : 柱状图的粗度调整
3. xAxis.axisTick.alignWithLabel : 刻度展示

总结一下学到的知识点:

• 认识并依葫芦画瓢的使用了echarts.
• 很多问题和需求都是有人遇到过的,如果看官方API没有找到,就直接搜狗搜索.可能还找的快一些.
• 官网点开一个图形会直接进入实例页面.可以实时修改查看.完全可以先在实例页面.实现想要的结果后,再复制刚刚实现的代码进到项目中.(因为维护的老项目每次启动和热部署都很慢...所以在网上实时修改好了再用对我来说很有用)
• 有时候项目热部署后没有生效不代表你写错了.重新运行下项目再看看.
• 不赶时间的话,方法和变量还是要好好命名!养成好的习惯!不要学我...我会改的...