전자 차트의 몇 가지 일반적인 구성 구성(코드 예제 포함)

echarts의 기본 사용법에 대해서는 다루지 않겠습니다. 공식 웹사이트에 많은 데모가 있으므로 복사하여 붙여넣기만 하면 됩니다. 여기서는 저자의 회사 내 공통 구성을 주로 요약합니다.

1. 이중 Y축

데이터에 다중선이 있고 일부 선에는 데이터가 크고 일부 선에는 데이터가 매우 작은 경우 하나의 Y축에 모두 표시하면 데이터의 양이 작아집니다. 하나는 X축에 매우 가까워서 데이터의 변화 추세를 볼 수 없습니다. 이때 데이터의 양은 한쪽에 표시되고 양은 적습니다. 반대편에는 데이터가 표시됩니다.

options.yAxis만 구성하고 options.series의 각 데이터에 대해 yAxisIndex를 구성하면 됩니다. , 1이 맞습니다. options.yAxis，然后在options.series中，给每个数据配置yAxisIndex即可，0是左边，1是右边。

options = {
    series: [
        {
            data: [...],
            type: "line",
            yAxisIndex: 0,
        },
        {
            data: [...],
            type: "line",
            yAxisIndex: 1,
        },
        ...
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
    ],
}

2.loading效果

echarts自带了loading，在数据加载时可以调用showLoading()，取消加载时可以用hideLoading()

options = {
  title: {
    text: '此时间段暂无数据',
    textStyle: {
      color: 'black',
      fontWeight: 'normal',
      fontSize: 25,
    },
    left: '45%',
    top: '30%',
  },
};

2. 로딩 효과

echarts는 로딩과 함께 제공됩니다. 데이터를 로딩할 때 showLoading()을 호출할 수 있고, 취소할 때 hideLoading().

3.no-data placeholder

echarts는 좋은 no-data 자리 표시자를 제공하지 않으며 제목 마법 수정만 사용할 수 있습니다. 데이터가 없으면 먼저 X축과 Y축을 수동으로 지운 다음 데이터가 있으면 제목을 삭제하세요.

<br/>

4. 단위가 포함된 레이블

echarts의 기본 레이블에는 단위가 없으며 echarts는 단위 구성을 제공합니다. 시리즈의 각 폴리라인에 tooltip.valueFormatter를 구성하면 됩니다.

라벨 표시 스타일이 만족스럽지 않은 경우 echarts를 사용하면 라벨의 html을 사용자 정의할 수도 있습니다. 이때 포맷터의 html에 단위를 추가할 수 있습니다.

구성은 다음과 같습니다. 자신의 프로젝트에 따라 변경하세요. rrreee

🎜🎜

위 내용은 전자 차트의 몇 가지 일반적인 구성 구성(코드 예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!