전자 차트란 무엇입니까? 사용하는 방법? 전자차트 소개

不言
풀어 주다: 2018-09-11 13:43:51
원래의
16395명이 탐색했습니다.

차트는 우리에게 막대한 데이터를 적절한 방식으로 직관적으로 표시할 수 있습니다. 또한 차트 분석을 통해 귀중한 정보를 얻을 수도 있습니다. 데이터를 매우 편안하고 직관적으로 보여주기 위해 ECharts가 여기에 있습니다. 실제로 없어서는 안될 차트가 정확히 무엇인가요? 사용하는 방법? 이 글에서는 전자차트의 내용을 소개하겠습니다.

먼저 살펴보겠습니다전자차트란 무엇인가요?

공식 웹사이트의 설명을 보면 echarts가 상용급 데이터 차트라는 것을 알 수 있습니다. 이는 대부분의 브라우저와 호환되는 순수 JavaScript 아이콘 라이브러리입니다. 직관적이고 생생하며 대화형이며 고도로 사용자 정의 가능한 데이터 시각화 차트를 제공합니다. 혁신적인 드래그 앤 드롭 재계산, 데이터 보기, 값 범위 로밍 및 기타 기능은 사용자 경험을 크게 향상시키고 사용자에게 데이터 마이닝 및 통합 기능을 제공합니다.

간단히 말하면 echarts는 데이터 시각화에 도움을 주는 라이브러리입니다.

echarts가 무엇인지에 대한 설명을 읽은 후 echarts를 사용하는 방법을 살펴보겠습니다.

우리는 위에서 echarts가 상용급 데이터 차트라고 언급했습니다. 그럼 이 차트들이 무엇인지 살펴보겠습니다

꺾은선형 차트(영역형 차트), 세로 막대형 차트(막대형 차트), 분산형 차트(버블 차트), K-라인 차트, 원형 차트(도넛형 차트)

레이더 차트(채워진 차트) 레이더 차트), 코드 차트, 힘 방향 레이아웃 차트, 지도, 대시보드, 깔때기 차트, 이벤트 리버 차트 및 기타 12가지 유형의 차트가 있습니다.

차트가 무엇인지 알고 나면 차트를 사용하는 방법도 알아야 합니다.

먼저 플러그인을 다운로드해야 합니다: https://github.com/ecomfe/echarts/archive/1.4.1.zip

그런 다음 예를 사용하여 echarts 사용의 기본 프로세스를 설명합니다. .

echarts 사용 첫 번째 단계: 먼저 파일에 JS 라이브러리를 도입해야 합니다. Baidu의 CDN

<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
로그인 후 복사

echarts를 사용하여 두 번째 단계를 사용할 수 있습니다. 그런 다음 사용할 차트 표시용 DIV를 생성합니다. 세 번째 단계: 로드된 차트 유형 및 경로 구성

<div id="pie" style="height:400px"></div>
<div id="bar" style="height:400px"></div>
로그인 후 복사

echarts 4단계: 차트 데이터 구성

<script type="text/javascript">
        // 路径配置
        require.config({
            paths:{ 
                &#39;echarts&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;,
                &#39;echarts/chart/bar&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;,
        &#39;echarts/chart/pie&#39; : &#39;http://echarts.baidu.com/build/echarts&#39;
            }
        });
</script>
로그인 후 복사

echarts 5단계: 차트에 데이터 표시

optionpie = {
  title: {
    text: &#39;2018年08月客户总满意度比例图&#39;,subtext: &#39;测试人员&#39;,x: &#39;center&#39;
  },
  tooltip: {
    trigger: &#39;item&#39;,
    formatter: "{a}<br/>{b} : {c} ({d}%)"
  },
  legend: {
    orient: &#39;vertical&#39;,
    x: &#39;left&#39;,
    data: [&#39;满意&#39;, &#39;不满意&#39;]
  },
  toolbox: {
    show: true,
    feature: {
      restore: true,
      saveAsImage: true
    }
  },
  calculable: true,
  series: [
  {
    name: &#39;总满意度百分比&#39;,
    type: &#39;pie&#39;,
    radius: &#39;55%&#39;,
    center: [&#39;50%&#39;, 225],
    data: [
    { value: 100, name: &#39;满意&#39; },
    { value: 16, name: &#39;不满意&#39;}
  ]
  }
  ]
};

option = {
  title: {
    text: &#39;2018年08月客户满意度分布图&#39;,subtext: &#39;测试人员&#39;,x: &#39;left&#39;
  },
  tooltip: {
    trigger: &#39;axis&#39;,
    formatter: "{b}<br/>{a0} : {c0}<br/>{a1} : {c1}"
  },
  legend: {
    x: &#39;right&#39;,
    padding: [5,70,5,5],
    data: [&#39;满意&#39;, &#39;不满意&#39;]
  },
  toolbox: {
    show: true,
    feature: {
      restore: true,
      saveAsImage: true
    }
  },
  calculable: true,
  xAxis: [
  {
    type: &#39;category&#39;,
    data: [&#39;客服人员满意度&#39;, &#39;维修人员满意度&#39;, &#39;售后人员满意度&#39;]
  }
  ],
  yAxis: [
  {
    type: &#39;value&#39;,
    splitArea: { show: true }
  }
  ],
  series: [
  {
    name: &#39;满意&#39;,
    type: &#39;bar&#39;,
    radius: &#39;55%&#39;,
    center: [&#39;50%&#39;, 225],
    data: [10, 5, 8]},
  {
    name: &#39;不满意&#39;,
    type: &#39;bar&#39;,
    radius: &#39;55%&#39;,
    center: [&#39;50%&#39;, 225],
    data: [2, 4, 6]}
  ]
};
로그인 후 복사

관련 권장 사항:

Echarts 사용 세부 소개


웹팩에서 EChart를 어떻게 사용하나요?

위 내용은 전자 차트란 무엇입니까? 사용하는 방법? 전자차트 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!