ECharts初体验（下载使用步骤、vscode取色器插件）


ECharts初体验之使用五部曲

  • 1. 下载并引入echarts.js
  • 2. 准备一个具备大小的DOM容器
    • VScode取色器插件下载
  • 3. 初始化echarts实例对象
  • 4. 指定图表的配置项和数据（option）
  • 5. 把配置项设置给echarts对象
  • 完整代码

1. 下载并引入echarts.js

打开ECharts官网，点击文档、教程，进入五分钟上手ECharts界面，选择从官网下载界面下载：
在这里插入图片描述
进入后翻到最下面，我使用的是方法三在线定制，点它。
在这里插入图片描述
选择好自己需要的突变和组件进行打包下载，点击下载即可，我没有压缩代码，下载的是echarts.js，如果压缩了的话，下载的会是echarts.min.js。
在这里插入图片描述
下载完毕，引入：

1
2
3
<!-- index.html -->
<!-- 1. 下载并引入echarts.js文件 -->
<script src="script/echarts.js"></script>

2. 准备一个具备大小的DOM容器

1
2
3
<!-- index.html -->
<!-- 2. 准备一个具备大小的DOM容器 -->
<div class="box"></div>

有容器了，但一定记得要给它大小。

1
2
3
4
5
6
/* style.css */
.box{
    width: 600px;
    height: 600px;
    background-color: #7bb0ca;
}

VScode取色器插件下载

为了更方便选择颜色，没有取色器也太不方便了。

  1. 按Ctrl+Shift+X打开Extension插件面板
  2. 键入vs color picker
  3. 下载，点击install
    在这里插入图片描述
    下载好后，文档里说了如何使用：
    在这里插入图片描述
    这两步之后准备工作就做完了：
    在这里插入图片描述

3. 初始化echarts实例对象

1
2
3
4
// script.js

// 3. 初始化echarts实例对象，利用echarts.init(DOM容器)
var myCharts = echarts.init(document.querySelector(".box"))

4. 指定图表的配置项和数据（option）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// script.js

// 4. 指定图表的配置项和数据（option）
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

5. 把配置项设置给echarts对象

1
2
3
4
// script.js

// 5. 把配置项设置给echarts对象
myCharts.setOption(option);

这样就好了~
在这里插入图片描述

完整代码

  • index.html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyECharts</title>
    <link rel="stylesheet" href="style/style.css">
</head>
<body>
    <!-- 2. 准备一个具备大小的DOM容器 -->
    <div class="box"></div>
    <!-- 1. 下载并引入echarts.js文件 -->
    <script src="script/echarts.js"></script>
    <script src="script/script.js"></script>
</body>
</html>
  • style.css
1
2
3
4
5
.box{
    width: 600px;
    height: 600px;
    background-color: #7bb0ca;
}
  • script.js
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
// 3. 初始化echarts实例对象，利用echarts.init(DOM容器)
var myCharts = echarts.init(document.querySelector(".box"))

// 4. 指定图表的配置项和数据（option）
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 5. 把配置项设置给echarts对象
myCharts.setOption(option);