背景: 这几天在做复宏汉霖的报表.用到了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没有找到,就直接搜狗搜索.可能还找的快一些.
- 官网点开一个图形会直接进入实例页面.可以实时修改查看.完全可以先在实例页面.实现想要的结果后,再复制刚刚实现的代码进到项目中.(因为维护的老项目每次启动和热部署都很慢...所以在网上实时修改好了再用对我来说很有用)
- 有时候项目热部署后没有生效不代表你写错了.重新运行下项目再看看.
- 不赶时间的话,方法和变量还是要好好命名!养成好的习惯!不要学我...我会改的...