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