(참고 echars 결합되어야한다) 프로젝트에 장착 프로젝트 의존성뿐만 1) 프로젝트
npm install echarts vue-echarts--save
npm install echarts-liquidfill --save
2) 구성 요소를 도입하는 것은 liquidFill.js 크리스탈 볼의 필요
import 'echarts-liquidfill/src/liquidFill.js'; //在这里引入
3) 결정 공 부가 템플릿 DOM 노드 장착
<div id="echarts" :style="{width: '340px', height: '220px',}"></div>
4）在方法methods中添加liquidFill调用方法，如
initWhater () {
VAR 값 = this.score
하자 myChart = this.echarts.init (document.getElementById를 ( 'myChartWhater'))
데이터 = []
data.push (값)
data.push (값)
data.push (값)
myChart.setOption ({
의 backgroundColor : 컨테이너의 '흰색', // 배경색
제목 : {
텍스트 : '',
문자 유형 : {
fontWeight를 '정상'
fontSize는 25,
색상 : 'RGB (97, 142, 205)'
}
},
시리즈 :
{
유형 : '
liquidFill
'
반경 : '80 %의 '// 반경 폴로
날짜 : 날짜,
backgroundStyle : {
색상 : '흰색'
},
라벨 : {
정상 : {
포맷 :
(값 * 100) .toFixed (0) +
'\의 N'+ // 랩
'\ n을'+
this.healthyName, // 좋은? 차이? 우수한
문자 유형 : {
fontSize는 : 50 // 글꼴 크기
}
}
},
개요 : {
쇼는 true, // 부울 값의 윤곽을 표시할지 여부를
borderDistance 0, // 그래프의 외형에서 숫자
itemStyle : {
의 borderColor : '#의 edf2f6', // 테두리 색상
borderWidth : 1 // 폭 경계
// shadowBlur : 5, // 그림자 범위의 윤곽이 내부 및 외부에 그림자를 설정하면
//와 shadowColor : '# 000'// 그림자 색상 외형
}
},
색깔: [
'RGBA (118,216,255,0.3)'
'RGBA (0,206,255,0.5)'
'RGBA (0,148,255,0.3)'
상기 컬러 값에 대응 // 파형 데이터 인
}
]
})
}
})
},
4）在mounted（）{}中调用 initWater方法
页面完成效果如：
大功告成！！！！