vue 프로젝트에서 echart를 사용하는 방법

사용 방법: 1. "yarn add echarts" 또는 "npm install echarts -S" 또는 "cnpm install echarts -S" 명령을 사용하여 Echarts를 설치합니다. 3. vue 페이지에서 해당 API를 호출하면 됩니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

Echarts는 상용급 데이터 차트로, 대부분의 브라우저와 호환됩니다. 하단 레이어는 경량 캔버스 클래스 라이브러리 ZRender를 사용하여 직관적이고 생생하며 고도로 개인화된 데이터 시각화를 제공합니다. 차트. 혁신적인 드래그 앤 드롭 재계산, 데이터 보기, 값 범위 로밍 및 기타 기능은 사용자 경험을 크게 향상시키고 사용자에게 데이터 마이닝 및 통합 기능을 제공합니다.

Echarts, 프레임워크 독립적인 JS 차트 라이브러리이지만 Js를 기반으로 하므로 Vue 등 많은 프레임워크에서 사용할 수 있습니다.

간단히 시작하고 ECHARTS를 설치하세요 다음 설치 방법 중 하나를 선택하세요. 버전 번호는 4.8.0

// yarn
yarn add echarts
// npm
npm install echarts -S
// cnpm
cnpm install echarts -S

전역적으로 소개됨yarn， echarts 版本号是 4.8.0

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

全局引入

在main.js中

<template>
  <div class="home">

</div>
</template>

<script>
export default {
name: &#39;Home&#39;,
}
</script>

到了这一步说明你已经把准备工作做完了

清空多余代码

我们先把页面其他不需要用到的代码给清除吧

<div id="EChart" style="width: 300px; height: 300px;"></div>

创建一个容器

创建一个 id 为EChart 的div 作为容器 (使用id会有个小问题，在最后解答)

getRenderer() {
      console.log(this.$echarts);
      // 基于准备好的dom，初始化echarts实例
      let EChart = this.$echarts.init(document.getElementById("EChart"));
      // 配置参数
      let config = {
        title: { text: "悲伤日记" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      // 设置参数
    EChart.setOption(config);
},

创建一个方法

mounted() {
    // 在生命周期中调用 getRenderer 方法
    this.getRenderer();
},

生命周期中调用此方法

let config = {
   title: { text: "悲伤日记" },
   tooltip: {},
   xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
       {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
       },
    ],
};

请看大屏幕

吃瓜群众：“这特么不是官方示例么？能不能炫一点”

严老师：“说实话确实有点low ，不要慌这才哪到哪呢，我们先从基础讲堂开始嘛”

先了解其参数

先讲讲其中简单的一些配置参数，枯燥乏味，但是摸清楚之后，以后画图那是顺手得一**

先整点简单、常用的来看看（备注里面皆是对应API地址）