背景: 这几天在做复宏汉霖的报表.用到了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页面的代码关联不大我就不放了.
- 这里次要记住的一些基本参数.
series.type: 定义图形形态series.radius: 图形大小,第一个参数是外圈,第二个参数是内圈color: 图形色彩,第一个参数是散布圈次要色彩,第二个参数是残余内容色彩title.text: 图形两头的文字title.textStyle: 图形两头的文字的款式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", }, ], }], }); }}- 那个代码有点点多.... 可能当前学会了纯熟了代码就变得精简了...
- 整顿一下这个稍简单的饼图学到的属性值:
series.label.normal.formatter: 饼图块延长进去的文字说明.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轴刻度.减少状图文字.
- 学到的属性值介绍:
yAxis.show: 是否展现Y轴series.barWidth: 柱状图的粗度调整xAxis.axisTick.alignWithLabel: 刻度展现
总结一下学到的知识点:
- 意识并依葫芦画瓢的应用了echarts.
- 很多问题和需要都是有人遇到过的,如果看官网API没有找到,就间接搜狗搜寻.可能还找的快一些.
- 官网点开一个图形会间接进入实例页面.能够实时批改查看.齐全能够先在实例页面.实现想要的后果后,再复制刚刚实现的代码进到我的项目中.(因为保护的老我的项目每次启动和热部署都很慢...所以在网上实时批改好了再用对我来说很有用)
- 有时候我的项目热部署后没有失效不代表你写错了.从新运行下我的项目再看看.
- 不赶时间的话,办法和变量还是要好好命名!养成好的习惯!不要学我...我会改的...