Echarts 그림 구성 요소 의 속성 과 소스 코드
ECharts 3.x/ECharts 4.x 에서 하나의 ECharts 인 스 턴 스 는 여러 개의 그림 구성 요 소 를 존재 할 수 있 고 여러 개의 그림 구성 요 소 를 편리 하 게 할 수 있 습 니 다.그림 의 수량 이 너무 많 을 때 스크롤 로 페이지 를 넘 길 수 있 습 니 다.
ECharts 에서 그림 구성 요소 의 속성 은 표 와 같 습 니 다.
그림 구성 요소 속성 설명도 그림 과 같 습 니 다.
어느 해 의 증 발 량,강 수량,최저 기온 과 최고 기온 데 이 터 를 이용 하여 접 힌 기둥 혼합 도 를 그리고 도표 에 그림 구성 요 소 를 배치 합 니 다.
그림 의 수량 이 너무 많 거나 그림 의 길이 가 너무 길 때 수직 으로 그림 을 굴 리 거나 수평 으로 그림 을 굴 릴 수 있 습 니 다.속성 legend.type 을 참조 하 십시오.이때 type 속성의 값 을'scroll'으로 설정 하면 그림 이 한 줄 에 만 표시 되 고 나머지 부분 은 자동 으로 스크롤 효과 로 나타 납 니 다.그림 과 같 습 니 다.
그림 에서 알 수 있 듯 이 오른쪽 위의 미끄럼 아이콘 은 바로 그림 의 스크롤 아이콘 으로 그림 을 스크롤 효과 로 나 타 낼 수 있 습 니 다.
그림 의 소스 코드 는 다음 과 같다.
<html>
<head>
<meta charset="utf-8">
<!-- ECharts -->
<script src="js/echarts.js"></script>
</head>
<body>
<!--- ECharts （ ） DOM-->
<div id="main" style="width: 600px; height: 600px"></div>
<script type="text/javascript">
// DOM， ECharts
var myChart = echarts.init(document.getElementById("main"));
//
var option = {
color: ["red", 'green', 'blue', 'grey'], //
legend: {
orient: 'horizontal', //'vertical'
x: 'right', //'center'|'left'|{number},
y: 'top', //'center'|'bottom'|{number}
backgroundColor: '#eee',
borderColor: 'rgba(178,34,34,0.8)',
borderWidth: 4,
padding: 10,
itemGap: 20, textStyle: { color: 'red' },
},
xAxis: { // x
data: [' ', ' ', ' ', ' ', ' ', ' ', ' ']
},
yAxis: [ // y
{ // 1 y
type: 'value',
axisLabel: { formatter: '{value} ml' }
},
{ // 2 y
type: 'value',
axisLabel: { formatter: '{value} °C' },
splitLine: { show: false }
}
],
series: [ //
{ // 1
name: ' ', type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
},
{ // 2
name: ' ', smooth: true,
type: 'line', yAxisIndex: 1, data: [11, 11, 15, 13, 12, 13, 10]
},
{ // 3
name: ' ', type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
},
{ // 4
name: ' ', smooth: true,
type: 'line', yAxisIndex: 1, data: [-2, 1, 2, 5, 3, 2, 0]
}
]
};
//
myChart.setOption(option);
</script>
</body>
</html>
Echarts 그래 픽 구성 요소 속성 과 소스 코드 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Echarts 그래 픽 구성 요소 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 지원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
어쩌면 echarts에 더 좋은 방법echarts를 React에 유용하게 사용하세요. echarts-for-react 기반 Make echarts come in handy for React. Based on 🌈 사용하기 쉬움(기본 레이아웃 및 스타일 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
