echarts入门基础知识总结

最新推荐文章于 2024-09-02 11:37:25 发布

草深无处不鸣蛙

最新推荐文章于 2024-09-02 11:37:25 发布

阅读量648

点赞数 1

分类专栏： echarts 文章标签： javascript vue.js 数据可视化可视化 js

本文链接：https://blog.csdn.net/qq_45846691/article/details/108740082

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

echarts入门基础知识总结

echarts是百度开源的一个使用 JavaScript 实现的开源可视化库，提供直观，交互丰富，可高度个性化定制的数据可视化图表,用于实现数据的可视化。

数据可视化，顾名思义让数据以一种更加清晰直观的图表形式进行呈现，相较于大量繁杂的数据，视觉效果和可读性更佳，能够有效的传达信息，有利于决策的实施，因此，广泛应用。

echarts特点:

开源免费功能丰富社区活跃支持多种数据支持流数据移动端优化跨平台酷炫的特效等等

快速上手

echarts的使用大体分为五步：

步骤一：引入echarts.js（echarts官网首页 https://echarts.apache.org/zh/index.html）

第一步是引入echarts.js文件，可以在官网下载js库文件，也可以通过CDN或者npm的方式获得通过npm安装echarts
```
npm install echarts --save
```
通过标签方式直接引入构建好的 echarts 文件
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    
    <script src="echarts.min.js"></script>
</head>
</html>
```
步骤二：准备一个具备宽度和高度的div盒子，用于放置echarts图表
```
<div id="box" style="width:600px;height:600px"></div>	
```

步骤三：初始化echarts实例

var myCharts = echarts.init(document.getElementById('box'))

步骤四：准备配置项

这步很关键，决定里图表的类型，以及呈现的样式效果

//柱状图
var option = {
xAxis: {   //x轴配置项
    type: 'category', //类型为类别轴
    data: ['小明', '小红', '小王'] //类别轴要展示的数据
},
yAxis: { 	//y轴配置项
    type: 'value' //类型为数值轴
},
series: [{
        name: '语文',
        type: 'bar', //决定每个图表的类型
        data: [70, 92, 87], //数值轴展示的数据
        }]
	}