【笔记】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对象

  • 必须定义容器高度
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: [],
      type: 'bar'
    }
  ]
};

chart.setOption(option);

数据系列

定义图表类型

type：系列类型

bar：柱状图
line：折线图
scatter：散点图
pie：饼图

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
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
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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',
      itemStyle: {
        color: "red"
      }
    }
  ]
};

指定数据的图形样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const option = {
  series: [
    {
      data: [
        {
          value: 0,
          name: "Monday",
          itemStyle: {
            color: "red"
          }
        },
        {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'
    }
  ]
};

完成