6개의 echarts 통계 차트의 스타일 수정 공유

echarts 그래픽 생성은 상대적으로 간단합니다. Javascript를 직접 인용하면 됩니다. 이 라이브러리를 사용하는 세 가지 주요 이유는 이 라이브러리가 Baidu 프로젝트이고 업데이트되었기 때문입니다. 두 번째는 이 라이브러리의 프로젝트 문서가 비교적 자세하고 각 사항이 명확하게 설명되어 있으며 중국어로 되어 있어 이해하기 쉽습니다. 세 번째 포인트는 이 라이브러리가 다양한 그래픽을 지원하고, 그래픽을 직접 전환할 수 있어 사용이 매우 편리하다는 점입니다.

1: 꺾은선형 차트 막대의 색상 수정

series : [ {
name : ‘SBP(收缩压)’,
type : ‘line’,
itemStyle : {
normal : {
lineStyle:{
color:’#f73d31’
}
}
},
data : y_data
},

2: 제목 색상 속성 수정

아이콘의 기본 제목 색상을 빨간색으로 변경하려면 제목에 textStyle: {color: 'red' }를 추가하세요.
그림 .png

title: {
text: ‘平均耗时（分钟）’,
textStyle: {
color: ‘red’
},
},

3: 배경색 설정

var option={
backgroundColor:‘rgba(128, 128, 128, 0.1)’ //rgba设置透明度0.1
}

4: 빈 페이지 표시 수정

모든 데이터가 정상이고 콘솔에는 오류가 보고되지 않지만 페이지에 데이터가 표시되지 않는 경우, 이때 추가해야 할 것은 고정 너비만 설정하면 됩니다.

5: 모바일 단말기 적응 문제, 다양한 휴대폰 화면에 적응

차트가 여러 개인 경우 var 옵션 = {} 뒤에 이와 같은 코드를 추가하면 디스플레이 화면 크기에 따라 아이콘이 변경되고 변경됩니다.

window.onresize = function () {
myChart1.resize();
       myChart2.resize();      
        myChart3.resize();        
        }

6: xy축 좌표축 색상 수정

x축 좌표:

xAxis: {
type: ‘value’,
boundaryGap: [0, 0.01],
axisLine:{
lineStyle:{
color:’#e33b38’,
width:1,//这里是为了突出显示加上的
}
}
},

y축 좌표:

yAxis: {
type: ‘category’,
data: [‘SA服务’, ‘洗车’, ‘总检’, ‘喷漆’, ‘钣金’, ‘机修’, ‘等号’],
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: [’#e33b38’]
}
},
nameTextStyle: {
color: [’#e33b38’]
},
axisLine:{
lineStyle:{
color:’#e33b38’,
width:1,//这里是为了突出显示加上的
}
}
},

위는 차트의 속성값 수정입니다. 읽어보세요. 그리고 그것으로부터 배우세요!

위 내용은 6개의 echarts 통계 차트의 스타일 수정 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!