echarts 사례 : 백분율 스타일을 보여주는 대시 보드 차트
실제 개발 작업에서는 데이터 시각화 가 자주 사용됩니다 . echarts 는 더 일반적으로 사용되는 데이터 시각화 도구입니다. 백분율 스타일을 보여주는 echarts 대시 보드 차트 의 사례를 공유하겠습니다 . 렌더링은 다음과 같습니다.
다음과 같이 진행하십시오.
1. echart 다운로드 및 가져 오기
npm install echarts --save
echarts를 사용하여 필수 js 파일 소개
import echarts from 'echarts'
2. dom 요소 가져 오기 및 옵션 생성
let ginsengGauge = echarts.init(document.getElementById('ginsengGauge'))
let option ={
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
type: 'gauge', //类型:仪表盘图
name: '制造业',
title: {
offsetCenter: [0, '120%'], //系列标题文字(效果图中的“制造业”)的位置,第一个为横坐标,第二个为纵坐标
color: "#fff", //字体颜色
fontSize: 16,
},
center: ['15%', '45%'], //仪表盘图的中心点相对于dom容器的位置
detail: {
//设置效果图中文字“30.25%”的相关配置
formatter: '{value}%',
offsetCenter: [0, 0],
color: "#FFF",
fontSize: 18
},
data: [{
value: 30.25, //此处要改数据
name: '制造业'
}],
radius: '50%', //环形的大小
clockwise: true,
axisLine: {
show: true,
lineStyle: {
color: [
[0.3025, '#1A8FC5'], //占总数的30.25%,即value/100,颜色为'#1A8FC5'
[1, '#E1E8EE'] //基底大圈比例为1,颜色为'#E1E8EE',
],
width: 10, //环形的粗细
}
},
splitLine: {
show: false //不显示分隔线
},
axisTick: {
show: false //不显示仪表盘刻度
},
axisLabel: {
show: false
},
pointer: {
show: false //不显示仪表盘指针
},
},
]
}
개인 블로그 Song Zhang에 오신 것을 환영합니다.