背景: 這幾天在做復宏漢霖的報表.用到了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沒有找到,就直接搜狗搜索.可能還找的快一些.
- 官網點開一個圖形會直接進入實例頁面.可以實時修改查看.完全可以先在實例頁面.實現想要的結果後,再複製剛剛實現的代碼進到項目中.(因為維護的老項目每次啓動和熱部署都很慢...所以在網上實時修改好了再用對我來説很有用)
- 有時候項目熱部署後沒有生效不代表你寫錯了.重新運行下項目再看看.
- 不趕時間的話,方法和變量還是要好好命名!養成好的習慣!不要學我...我會改的...
