【Echarts】学习笔记

认识Echarts

官网：https://echarts.apache.org/zh/index.html

使用步骤

第一步：安装echarts

第二步：引入echarts

<template>
  <div class="dashboard">
    <h2>dashboardh2>
  div>
template>

<script>
import * as echarts from "echarts"; // 因为内部是通过 export xxx 导出的，所以用 * 接收

export default {
  name: "dashboard",
  setup() {
    return {};
  },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

第三步：初始化Echarts对象，并且设置配置进行绘制

<template>
  <div class="dashboard">
    <div ref="divRef" :style="{ width: '400px', height: '300px' }">div>
  div>
template>

<script>
import { onMounted, ref } from "vue";

import * as echarts from "echarts"; // 因为内部是通过 export xxx 导出的，所以用 * 接收

export default {
  name: "dashboard",
  setup() {
    const divRef = ref(null);

    // 注意：在setup执行的时候，ref还没有绑定到节点上面，可以通过onMounted节点挂着完成、nextTick进入下一轮再执行
    onMounted(() => {
      // 1. 初始化echarts实例
      const echartsInstance = echarts.init(divRef.value);
      // 2. 编写配置文件
      const option = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      // 3. 设置配置，并且开始配置
      echartsInstance.setOption(option);
    });

    return { divRef };
  },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

配置说明

学习建议：先选择要使用的案例，删掉没用的属性，剩下不懂的属性可以去查看文档

初始化配置

第一个参数是容器

第二个参数是实例主题

第三个参数是额外配置，比如渲染器的选择(canvas，svg)，svg性能更高

const echartsInstance = echarts.init(divRef.value, 'dark', { renderer: 'svg' });
1

TIP

在须要创建很多 ECharts 实例 或 低端安卓，SVG 渲染器可能效果更好
数据量很大、较多交互时，可以选用 Canvas 渲染器

实例配置

https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data

option = {
  title: {
    text: 'Dynamic Data', // 主标题
    subtext: 'test' // 副标题
  },
  tooltip: { // 鼠标触发效果
    trigger: 'axis',  // 显示坐标轴（柱状图axis，散点图item）
    axisPointer: {
      type: 'cross', // x,y轴参考线（line/shadow/cross）
      label: {
        backgroundColor: '#283b56' // 参考线标注背景
      }
    }
  },
  legend: {
    data: ['Dynamic Line','Dynamic Bar'] // 调整图例样本顺序，不写默认以series里的name排序
  }, 
  toolbox: {
    show: true, 
    feature: {
      dataView: { readOnly: false }, // 数据视图
      restore: {}, // 刷新数据
      saveAsImage: {} // 下载图表
    }
  },
  dataZoom: { // 数据缩放（图例下面会出现一个拉条）
    show: true, 
    start: 0,   // 缩放的起始位置（百分比）
    end: 100
  },
  xAxis: [ // x轴刻度标注（最多两个）注：顺序要和y轴对应
    {
      type: 'category',
      boundaryGap: true,
      data: categories
    },
    {
      type: 'category',
      boundaryGap: true,
      data: categories2
    }
  ],
  yAxis: [ // y轴刻度标注（最多两个）
    {
      type: 'value',
      scale: true,
      name: 'Price',
      max: 30,
      min: 0,
      boundaryGap: [0.2, 0.2]
    },
    {
      type: 'value',
      scale: true,
      name: 'Order',
      max: 1200,
      min: 0,
      boundaryGap: [0.2, 0.2]
    }
  ],
  series: [ // 具体数据
    {
      name: 'Dynamic Bar', // 图例提取的名称
      type: 'bar', // 图例类型
      xAxisIndex: 1, // 对应的x轴，默认是0
      yAxisIndex: 1, // 对应的y轴，默认是0
      data: data // 数据源
    },
    {
      name: 'Dynamic Line',
      type: 'line',
      data: data2
    }
  ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75