ECharts 学习笔记01, 柱状图

目标

使用 ECharts 绘制简单的柱状图, 示例如下

demo

搭建环境

新建文件夹 note01, 并新建 index.html, index.css, index.css 文件
获取 echarts
下载源代码版本, 保存为 ./note01/echarts.js

至此, note01 的目录结构应该是这样的

./note01/
 |---index.html
 |---index.js
 |---index.css
 |---echarts.js

编写 `index.html`

编写一个普通的 html5 文件即可, 然后引入我们的 js, css 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>echarts note01</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <main></main>
</body>
<script src="echarts.js"></script>
<script src="index.js"></script>
</html>

编写 `css` 文件

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
```
main{
    width: 600px;
    height: 400px;
}
```

编写 `js` 文件

我们需要通过 echarts.init(domElement) 方法初始化一个 echarts 实例, 然后通过 setOption() 方法绘图。

'use strict';
// 初始化 echarts 实例
var myEChart = echarts.init(document.getElementsByTagName('main')[0]);

// 设定图表的配置项和数据
var option = {
    title:{
        text: '柱状图'
    },
    tooltip:{

    },
    legend:{
        data:['销量']
    },
    xAxis:{
        data:['衬衫', '裤子', '袜子']
    },
    yAxis:{

    },
    series:[{
        name: '销量',
        type: 'bar',
        data: [5, 36, 20]
    }],
};

// 显示图表
myEChart.setOption(option);

小结

以上就是使用 ECharts 进行绘图的第一个例子。休息一下，马上开始下一次学习~

ECharts 学习笔记01, 柱状图

目标

搭建环境

编写 `index.html`

编写 `css` 文件

编写 `js` 文件

小结

FrozenMap

引用和评论

在 minikube 中使用 nfs

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

2024最全ECharts 实战大全（速记版+资源）

ECharts 学习笔记01, 柱状图

目标

搭建环境

编写 index.html

编写 css 文件

编写 js 文件

小结

FrozenMap

引用和评论

在 minikube 中使用 nfs

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

2024最全ECharts 实战大全（速记版+资源）

编写 `index.html`

编写 `css` 文件

编写 `js` 文件