前端插件：数据可视化-Echarts使用指南

最新推荐文章于 2024-05-28 11:11:34 发布

BoomShaKa_S

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量2.5k

点赞数 2

分类专栏：前端插件前端切图仔的进阶之路文章标签： Echarts 数据可视化

本文链接：https://blog.csdn.net/weixin_41350225/article/details/88192946

版权

前端切图仔的进阶之路同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

前端插件

2 篇文章 0 订阅

订阅专栏

Echarts是什么

ECharts，一个使用 JavaScript 实现的开源可视化库，
它可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），
其底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表

Echarts的特点与好处

1．丰富的可视化类型
2．多种数据格式无需转换直接使用
3．千万数据的前端展现
4．移动端优化
5．多渲染方案，跨平台使用！
6．深度的交互式数据探索
7．多维数据的支持以及丰富的视觉编码手段
8．动态数据
9．绚丽的特效
10．通过 GL 实现更多更强大绚丽的三维可视化
11．无障碍访问（4.0+）

如何使用Echarts?

下载Echarts

①官网下载(推荐)

http://echarts.baidu.com/download.html

②github下载

https://github.com/apache/incubator-echarts

③npm下载

cnpm install echarts --save

④通过cdn形式在线引入echarts

<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.js"></script>

在这里我演示下官网下载的步骤
首先，点击链接进入官网
点击导航栏的下载(开发过程中建议使用未压缩版)
在这里插入图片描述

ECharts 4可以像普通的 JavaScript 库一样用 script 标签引入

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>//这里带'.min'后缀的就是压缩版
</head>
</html>

Echarts使用实例

①　构建基本的网页模板，引入 echarts.js
②　为ECharts准备一个具备大小（宽高）的Dom
③　基于准备好的dom，初始化echarts实例,e【charts.init()】
④　指定图表的配置项和数据option【想展现什么样的图表就写什么样的配置】
⑤　使用刚指定的配置项和数据显示图表。setOption(option)

实例演示

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./echarts.js"></script></head><body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1200px;height:800px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'		
            },
            tooltip: {},	
            legend: {	
                data:['销量']
            },
            xAxis: {	
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},	
            series: [{	
                name: '销量',	
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script></body></html>

效果演示

在这里插入图片描述

配置详解

在这里插入图片描述

Echarts的应用

首先要说明一点是，echarts这个框架的配置内容很是多，所以不要尝试着把这个框架中的方法都给记住，这是不太可能的事。但是由于这个框架的配置文件参数比较多，所以我们就需要来学习一下echarts是怎样来对其进行分类的

echarts的图形化呈现主要是通过配置方法来实现的(setOption),然后是对图形标签进行初始化，最后把配置方法(setOption)赋值到初始化图形中，详细的配置文件请戳这里，这里我就来介绍一下关于配置文件的学习的经验之谈，比较常见的配置大致如下图：
在这里插入图片描述

Echarts需要注意的地方

如何实现echart图表的响应式展现

方式一：使用百分比控制图表的宽度

不足：在图表显示后，用户显示的更改了窗体的大小的话，除非我们显式的刷新，否则图表不会自动更改大小
在这里插入图片描述

方式二：用resize方法来进行处理

//在宽度设为100%后，我们再在onresize事件里面进行处理即可
window.onresize = function () {
mycharts.resize();
}

当同时渲染多个图表时的自适应同样的做法即可

方式三：为了使echart图表随着浏览器的大小发生响应式变化，所以需要在设置配置之前添加

window.onresize = echart.resize;

其他问题

当X轴上面要渲染的数据太多的时候就会出现只渲染出来一部分，但是图表中的数据显示(比如说柱状图中的每个柱子)又会自动的进行宽度的缩放，所以会导致X轴与图中的信息不相匹配的问题，解决的方法是在X轴设置axisLabel :{ interval:0 }这个属性问题就可以解决了，Y轴的使用方法相同

异步加载数据

请求数据
调用echarts对象的setOption方法重新渲染数据即可

option.series[0].data = 新数据
mycharts.setOption(option);

如果需要连续加载那就连续的调用setOption()方法即可
代码演示：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 1. 盛放echarts图表的容器 -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="./echarts.js"></script>
<script>
// 2. 获取这个容器元素
var mainDiv = document.querySelector("#main");
// 3. 将echarts绑定到dom元素上
var mycharts = echarts.init(mainDiv);
// 4. 准备配置对象，指定图表的配置项和数据
var option = {
		xAxis: {
		type: 'category',
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
		yAxis: {
		type: 'value'
	},
		series: [{
		data: [820, 932, 901, 934, 1290, 1330, 1320],
		type: 'line',
		smooth:true,
	}]
};
// 使用刚指定的配置项和数据显示图表。
mycharts.setOption(option);
//使用定时器模拟不间断的后端数据
setInterval(function () {
option.series[0].data = option.series[0].data.map(function (ele,i) {
var rand=Math.round(Math.random()*50)
if(rand>25) rand=-rand;
return ele + rand;
})
mycharts.setOption(option);
}, 1000)
</script>
</body>
</html>

图表主体

设置图表的整体风格样式，如果你引入的是完整版主题js文件，那么可以直接写主题dark,light，除此以外，其他的都要下载相应的主题文件

// 获取这个容器元素
var mainDiv = document.querySelector("#main");
// 将echarts绑定到dom元素上，可以更改主题
var mycharts = echarts.init(mainDiv,"dark");

自定义主题：通过官网的在线构建构建，创建自己的主题，然后可以作为js文件使用，也可以作为一个主题jsom对象使用
地址：http://echarts.baidu.com/theme-builder/

 将该文件在 HTML 中引用；

使用 echarts.init(dom, 'demoTheme') 创建图表，第二个参数即为 *.js 文件中注册的主题名字

Echarts的API交互

首先我们来理清官方文档中的API的分类，大致的API可以分成这样的四类
在这里插入图片描述

这里我们就来解释一下echarts对象里面主要是包括一些销毁对象(dispose)，注册地图(registerMap)，初始化对象(echarts.init),关联对象(connect)，属于全局属性的设置，echartsInstance这个是包含echarts图中的某些属性的获取或者设置，获取宽高(getWidth、getHeight),获取配置(getOption)，设置配置(setOption)等操作action和events这两个操作在上图中已经很明白了，所以就不多做解释，具体的使用方法要与业务进行挂钩才有意义

dataSet

ECharts 4 提供了数据集（dataset）组件来单独声明数据
在这里插入图片描述
参考文章地址
https://www.cnblogs.com/st-leslie/p/5771241.html

BoomShaKa_S

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
前端插件：数据可视化-Echarts使用指南

Echarts是什么ECharts，一个使用 JavaScript 实现的开源可视化库，它可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），其底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表Echarts的特点与好处1．丰富的可视化类型2．多种数据格式...
复制链接

扫一扫