차트 프로젝트 구현을 위한 echart 사용에 대한 참고 사항

이 글의 내용은 차트 프로젝트를 구현하기 위해 echarts를 사용할 때 주의해야 할 사항에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

최근에 echarts를 활용한 차트 프로젝트를 했습니다. API를 이해하는 능력이 제한되어 있어 사용이 원활하지 않습니다.
좋은 기억력은 나쁜 글쓰기만큼 좋지 않다는 속담처럼, 후속 검토를 위해 몇 가지 핵심 사항을 기록해 두겠습니다.

첫 번째 사용법

프로젝트: ionic+angular4+echarts

    1.由于打包原因，echarts不能直接引入进package.json的dependencies中，只能以原始的方式从index.html中引入
    <script src="assets/js/echarts.min.js"></script>

    2.在组件的.html文件中
    <div echarts [options]="pieOption" (chartClick)="jump2Detail($event)"></div>

    3.在组件的.ts文件中配置好options的值pieOption以及点击drill down的逻辑

두 번째 참고 사항

1. 각 렌더링 영역에는 위치 설정이 있으며 위쪽, 아래쪽, 왼쪽 및 오른쪽으로부터의 거리를 사용자 정의할 수 있습니다

    grid:{
        top:...
        left:...
        bottom:...
        right:...
    }
    
    legend:{
        top:...
        left:...
        ...
    }

2 . 값과 관련된 각 표시 지점은 기본적으로 포맷터를 제공합니다.

tooltip:{
        formatter: params => { //自定义hover状态数据显示的情况
            let str = '';
            str += `<h6 style="color:#fff;font-size:13px;margin:4px 0">${params[0].name}</h6>`;
            params.forEach(item => {
                str += `${item.marker}${item.seriesName}: ${Math.round(item.value).toLocaleString()}<br>`;
                //item中提供了图标、颜色等
            });
            return str;
        }
    }
    
    legend:{
        formatter: (name) => { //需要根据值去重算数据然后显示的情况
            let source = data.source[name.toUpperCase()];
            var total = 0;
            source.forEach(element => {
                total += element;
            });

            return name + ': ' + Math.round(total).toLocaleString();
        }
    }

3.xAxis/yAxis는 좌표축의 일부 속성 스케일, 좌표축 이름 및 좌표 정보 표시 방법을 구성합니다.

4.toolbox 도구 모음이 내장되어 있습니다. -in 내보내기 그림, 데이터 보기, 동적 유형 전환, 데이터 영역 확대/축소, 재설정을 위한 5가지 도구가 있습니다. 그 중 캔버스의 관련 API를 통해 그림을 직접 내보낼 수 있으며 동시에 여러 차트를 가져올 수 있습니다. 5. dataZoom 데이터 영역 확대/축소 구성 요소--여러 개의

dataZoom:[
    {
        type:'inside', //内置在坐标系中 通过鼠标滚轮或者手指touch进行处罚
        ...
    },
    {
        type:'slider', //在外部 显示为滑动条形的一个组件，可直接拖动使用
        ...
    }
]

6.series 시리즈 목록이 있을 수도 있습니다. 각 시리즈는 유형을 통해 차트 유형을 결정합니다. 다양한 차트에 따라 다양한 형식의 데이터를 주입합니다

series:{
    type:'line'/'pie'/'bar'/'treemap',
    ...
}

실제로 각 시리즈는 차트에는 몇 가지 미묘한 설정, 데이터 및 색상, 간격 등이 있습니다...

관련 권장 사항:

echarts를 사용하여 원형 차트 부문 통계 테이블에 클릭 이벤트 추가 구현

Echarts를 사용하여 동적 곡선 차트 구현

위 내용은 차트 프로젝트 구현을 위한 echart 사용에 대한 참고 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!