【笔记】Echarts学习笔记

发表于 更新于 阅读次数：

前言

Apache ECharts是一个使用TypeScript实现的可视化图表库，由Apache软件基金会提供，可以运行在主流桌面及移动浏览器上，包括Internet Explorer 8/9/10/11、Google Chrome、Firefox、Safari等，其底层依赖矢量图形库ZRender。

引入依赖

1
<script src="https://unpkg.com/echarts@5/dist/echarts.min.js"></script>

获取Echarts对象

  • width可以不指定，但是必须指定height
1
2
3
4
5
<div id="chart" style="width: 600px; height: 400px;"></div>

<script>
  const chart = echarts.init(document.getElementById("chart"));
</script>

定义主题

dart：深色主题，缺省值为浅色主题

1
const chart = echarts.init(document.getElementById("chart"), "dark");

指定渲染器

renderer：指定渲染器

canvas：缺省值，Canvas渲染器
svg：SVG渲染器

1
2
3
const chart = echarts.init(document.getElementById("chart"), null, {
  renderer: "canvas"
});

根据配置渲染图表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [0, 0, 0, 0, 0, 0, 0],
      type: "bar"
    }
  ]
};

chart.setOption(option);

定义数据

按顺序定义数据

1
2
3
4
5
6
7
8
const option = {
  series: [
    {
      data: [0, 0, 0, 0, 0, 0, 0],
      type: "bar"
    }
  ]
};

定义索引及数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const option = {
  series: [
    {
      data: [
        [0, 0],
        [1, 0],
        [2, 0],
        [3, 0],
        [4, 0],
        [5, 0],
        [6, 0]
      ],
      type: "bar"
    }
  ]
};

定义数据对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const option = {
  series: [
    {
      data: [
        {value: 0, name: "Monday"},
        {value: 0, name: "Tuesday"},
        {value: 0, name: "Wednesday"},
        {value: 0, name: "Thursday"},
        {value: 0, name: "Friday"},
        {value: 0, name: "Saturday"},
        {value: 0, name: "Sunday"}
      ],
      type: "bar"
    }
  ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const option = {
  series: [
    {
      data: [
        {value: [0, 0], name: "Monday"},
        {value: [1, 0], name: "Tuesday"},
        {value: [2, 0], name: "Wednesday"},
        {value: [3, 0], name: "Thursday"},
        {value: [4, 0], name: "Friday"},
        {value: [5, 0], name: "Saturday"},
        {value: [6, 0], name: "Sunday"}
      ],
      type: "bar"
    }
  ]
};

渲染地图

注册地图

1
2
3
echarts.registerMap("China", {
  geoJSON: data
});

查看所有注册的地图

1
const exist = echarts.getMap("China");

根据配置渲染地图

  • 下载GeoJSON文件

阿里云数字可视化平台：https://datav.aliyun.com/portal/school/atlas/area_selector

1
2
3
4
5
6
7
8
9
10
11
fetch("./中华人民共和国.geojson").then(res => res.json()).then(data => {
  const option = {
    series: [
      {
        type: "map",
        map: "China"
      }
    ]
  };
  chart.setOption(option);
});
1
2
3
4
5
6
7
8
9
10
fetch("./中华人民共和国.geojson").then(res => res.json()).then(data => {
  const option = {
    geo: [
      {
        map: "China"
      }
    ]
  };
  chart.setOption(option);
});

与散点图配合

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
fetch("./中华人民共和国.geojson").then(res => res.json()).then(data => {
  const option = {
    // 渲染地图
    geo: [
      {
        map: "China"
      }
    ],
    // 渲染散点图
    series: [
      {
        type: "effectScatter",
        geoIndex: 0,
        coordinateSystem: "geo",
        data: [
          {
            name: "北京",
            value: [116.405285, 39.904989, 0]
          }
        ]
      }
    ]
  };

  chart.setOption(option);
});

响应式

1
2
3
4
5
6
7
8
9
<div id="chart" style="height: 400px;"></div>

<script>
  const chart = echarts.init(document.getElementById("chart"));

  window.addEventListener("resize", () => {
    chart.resize();
  });
</script>

自动显示提示

seriesIndex：指定系列索引
dataIndex：指定数据索引

1
2
3
4
5
6
7
const chart = echarts.init(document.getElementById("chart"));

chart.displayTooltip({
  type: "showTip",
  seriesIndex: 0,
  dataIndex: 0
});

完成