ecahrtsの基本構成
デマンドファーストの効果図
円グラフ
notLoggedOption:{
//1.标题属性配置
title:{
text:'累计未登录人数',
subtext:'5000名',
textAlign: 'center',
left:'42.6%',
top:'42%',
textStyle:{
color:'#606266',
fontSize:'20',
},
subtextStyle:{
color:'#303133',
fontSize:'24',
fontWeight:'blod'
}
},
//2
color: ['#254BE9','#0BDBA8','#F3D01D','#FD571F'],
//3.提示的配置
tooltip: {
backgroundColor:'rgba(0,0,0,0.7)',
borderWidth: 0 ,
textStyle:{
color:'#fff'
},
trigger: 'item'
},
//4.图例的配置
legend: {
top: '50%',
right: '4%',
orient:'vertical',
icon: "circle"
},
//5.饼图的展示配置
series: {
type: 'pie',
radius: ['52%', '82%'],
right:'120',
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
}
},
labelLine: {
show: false
},
itemStyle: {
normal: {
"borderWidth": 2, // 间距的宽度
"borderColor": '#fff', //背景色
label:{
show: true,
position: 'inner',
fontSize: 12,
fontWeight: 'bold',
align: "left",
formatter: function (p) {
//指示线对应文字,百分比
return p.percent.toFixed(0) + "%";//设置百分比保留几位小数
}
}
}
},
data: [
{
value: 1048, name: '30-60天内未登录人数',label:{
color:"#fff"}},
{
value: 735, name: '60-90天内未登录人数',label:{
color:"#fff"}},
{
value: 580, name: '90-180天内未登录人数',label:{
color:"#fff"}},
{
value: 484, name: '180天以上未登录人数',label:{
color:"#fff"}},
]
}
},
- 円グラフの中央は、ログインしていない人の数を修正する必要があります。これは、パンして行います
- color list 各ファン領域の色
- 扇形の各領域をタッチすると、プロンプト ボックスがポップアップします。
- 凡例はデフォルトで上部にあり、パンによって左右に表示するように構成できます
- radius 属性は同心円として構成でき、emphasis 属性は itemStyle を強調表示して各セクターのコンテンツ表示を構成するように構成できます。
折れ線グラフ
loginTrendOption: {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器配置项。
type: 'cross', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
axis: 'auto', // 指示器的坐标轴。
snap: true, // 坐标轴指示器是否自动吸附到点上
},
showContent: true,
backgroundColor: 'rgba(0,0,0,0.7)',
textStyle: {
color: '#fff',
},
formatter: function (params) {
const unit = ['人','次','次']
let tip = params[0].name+'<br />'
if (params!=null&¶ms.length) {
for(let i=0;i<params.length;i++){
tip += `${
params[i].marker}${
params[i].seriesName}：${
params[i].value}${
unit[i]}<br />`
}
}
return tip
},
},
legend: {
left: 24,
bottom: 24,
itemHeight: 4,
itemWidth: 10,
icon: 'rect',
textStyle: {
color: '#606266',
fontSize: 14,
},
y: 'top',
data: ['登录人数', '登录次数', '人均登录次数'],
},
//1.指标系网格配置
grid: {
top: 50,
left: 24,
right: 24,
bottom: 24,
containLabel: true,
},
//2.x轴配置
xAxis: {
type: 'category',
boundaryGap: true,
axisLine: {
lineStyle:{
color:"#DCDFE6"
}
},
axisLabel: {
color: '#606266',
fontSize: 12
},
data: []
},
//3.y轴配置
yAxis: {
min: 0,
minInterval: 1, // 最小分割刻度
type: "value",
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12
},
splitLine: {
show: true,
lineStyle: {
color: '#DCDFE6'
}
}
},
series: [
{
name: '登录人数',
type: 'line',
symbolSize: 6, //设置折线上圆点大小
data: [],
},
{
name: '登录次数',
type: 'line',
symbolSize: 6, //设置折线上圆点大小
data: [],
},
{
name: '人均登录次数',
type: 'line',
symbolSize: 6, //设置折线上圆点大小
data: [],
},
],
color:['#0BDBA8','#F3D01D','#FD571F']
},
円グラフと比較して、折れ線グラフは X 軸が多く、Y 軸の構成が必要であり、タイプは折れ線です。
注: モニター ウィンドウの変更、および echarts のグラフィックスも適応的に変更する必要があります (これは を指します)。
this.chartsNotLog = this.$echarts.init(document.getElementById('notLoggedChart'));
this.chartsLoginTrend = this.$echarts.init(document.getElementById('loginTrendChart'));
const that = this
window.addEventListener("resize", function () {
that.chartsNotLog.resize();
that.chartsLoginTrend.resize();
});