Echarts 使用

安装 Echarts

npm install echarts --save

引入 Echarts

import * as echarts from "echarts";

基本使用

<template>
  <div class="page">
    <div class="title">电流瞬时波峰图</div>
    <div id="main"></div>
  </div>
</template>

<script setup>
  import * as echarts from "echarts";
  import { ref, onMounted, onBeforeUnmount, markRaw } from "vue";
  const myChart = ref(null);

  onMounted(() => {
    echartinit();
  });

  onBeforeUnmount(() => {
    window.removeEventListener("resize", function () {
      myChart.value.resize();
    });
  });

  // 设置字体
  const getfontsize = (size) => {
    let clientWidth = document.body.clientWidth;
    return (clientWidth / 1920) * size;
  };

  const echartinit = () => {
    // 找到Echart元素
    const chartDom = document.getElementById("main");

    // 默认的时候支持light或者dark两种样式 必须引入markRaw 取消数据响应
    myChart.value = markRaw(echarts.init(chartDom, "light"));

    // 设置图表得options

    let options = {
      title: {
        text: "ECharts 入门示例", //标题
      },
      tooltip: {
        trigger: "item", //气泡触发类型 默认数据触发 可选为axis
      },
      legend: {
        padding: 5, //图里内边距,单位PX,默认上下左右内边距都是5
        itemGap: 10, // legend 各个item之间的间隔，横向水平间隔，纵向布局为纵向间隔
        data: ["ios", "android"], //item 名称
      },
      xAxis: [
        {
          type: "category", //坐标轴类型，横轴默认为类目数值轴则参考yAxis
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
      ],
      yAxis: [
        {
          type: "value", //坐标轴类目类型，纵轴默认就是数值轴
          // boundaryGap: [0.1, 0.1], //坐标轴两端空白策略，数组内数值代表百分比
          splitNumber: 4, // 数值轴，分割段数 ，默认为5
        },
      ],
      series: [
        {
          name: "ios", //系列名称
          type: "line", //折线图
          data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123],
        },
        {
          name: "android", //系列名称
          type: "line", //折线图
          data: [45, 123, 145, 526, 233, 343, 43, 729, 33, 123, 45, 13],
        },
      ],
    };
    myChart.value.setOption(options);
    // 监听改变大小
    window.addEventListener("resize", function () {
      myChart.value.resize();
    });
  };
</script>

<style lang="scss" scoped>
  .page {
    overflow: hidden;
    .title {
      font-size: 16px;
      color: black;
      margin: 0 auto;
      text-align: center;
      font-size: 36px;
    }
    #main {
      width: 1000px;
      height: 400px;
      border: 1px solid #ccc;
      margin: 0 auto;
      margin-top: 20px;
    }
  }
</style>

各个部件名称

• 示例

Echart 十大基础常用图表

• 柱状图 bar

• 折线图 line

• 饼图 pie

• 散点图 scatter

• 气泡图 scatter

• 雷达图 radar

• 地图 map

• 漏斗图 funnel

• 词云 wordCloud

• 仪表盘 gauge

Echart 名词术语

• chart 完整的图表 如折线图，饼图等等

• axios 直角坐标系中的一个坐标轴，坐标轴可分为类目型，数值型或时间型

• xAxis 直角坐标系中的横轴，通常类目型

• yAxis 直角坐标系中的纵轴 通常默认数值型

• grid 直角坐标系中除坐标轴以外的绘图表格 用于定义直角系整体布局

• legend 图例

• dataRange 值域选择 常用于展现低于数据时选择值域范围

• dataZoom 数据区域缩放,常用于大量数据选择可视范围

• roamController 缩放漫游组件

• toolbox 辅助工具箱

• tooltip 气泡提示框

• timeline 时间轴

• series 数据系列 一个图标可能包含多个系列 ，每一个系列包含多个数据(重要)

Echart 开发四大步骤

• (1) 引入 Echarts

• (2) 初始化 Echarts

• (3) 准备 Data

• (4) 设置 options