ECharts实现数据可视化入门

谁借莪１个温暖的怀抱￠ 2024-04-17 21:07 74阅读 0赞

### ECharts是什么? ###

一个纯JavaScript图表库。ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

*  ECharts下载地址: https://www.echartsjs.com/en/index.html
 *  也可以根据自己需要: 下载echarts.min.js http://echarts.baidu.com/dist/echarts.min.js

#### 如何引入 ECharts？ ####

*  方法一: 用src引入所需要的echarts.min.js 的位置

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        
        <script src="echarts.min.js"></script>
    </head>
    </html>

*  方法二: npm 安装 ECharts

在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的，从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package。  
你可以使用如下命令通过 npm 安装 ECharts

*  npm install echarts --save

引入 ECharts  
通过 npm 上安装的 ECharts 和 zrender 会放在node\_modules目录下。可以直接在项目代码中 require(‘echarts’) 得到 ECharts。

#### ECharts示例 ####

*  官网例子:很全, 所需要的都可以查得到 https://www.echartsjs.com/examples/en/index.html
 *  在这里举一个例子:

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <title>ECharts</title>
        
        
        
        <script src="js/echarts.min.js"></script>
    </head>
    <body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    
            // 指定图表的配置项和数据
    	        option = {
    	    title: {
    	        text: 'ECharts例子'
    	    },
    	    tooltip: {},
    	    legend: {
    	        data:['销量']
    	    },
    	    xAxis: {
    	        data: ["项目1","项目2","项目3","项目4","项目5","项目6"]
    	    },
    	    yAxis: {},
    	    series: [{
    	        name: '销量',
    	        type: 'bar',
    	        data: [5, 20, 36, 10, 10, 20]
    	    }]
    	};
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    </html>

*  运行后界面:(简洁大方~ 非常好看)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDg2NTAx_size_16_color_FFFFFF_t_70]

#### 按需引入 ECharts 图表和组件 ####

默认使用 require(‘echarts’) 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。

例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。

// 引入 ECharts 主模块  
var echarts = require(‘echarts/lib/echarts’);  
// 引入柱状图  
require(‘echarts/lib/chart/bar’);  
// 引入提示框和标题组件  
require(‘echarts/lib/component/tooltip’);  
require(‘echarts/lib/component/title’);  
// 基于准备好的dom，初始化echarts实例  
var myChart = echarts.init(document.getElementById(‘main’));  
// 绘制图表  
myChart.setOption(\{  
title: \{ text: ‘ECharts 入门示例’ \},  
tooltip: \{\},  
xAxis: \{  
data: \[“衬衫”,“羊毛衫”,“雪纺衫”,“裤子”,“高跟鞋”,“袜子”\]  
\},  
yAxis: \{\},  
series: \[\{  
name: ‘销量’,  
type: ‘bar’,  
data: \[5, 20, 36, 10, 10, 20\]  
\}\]  
\});  
对于另一个流行的模块打包工具 browserify 也是同样的用法，这里就不赘述了。

#### loading 动画 ####

如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。

ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

myChart.showLoading();  
$.get(‘data.json’).done(function (data) \{  
myChart.hideLoading();  
myChart.setOption(…);  
\});  
移动端自适应  
ECharts 工作在用户指定高宽的 DOM 节点（容器）中。ECharts 的『组件』和『系列』都在这个 DOM 节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局，因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。

另外，有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。

为了解决这个问题，ECharts 完善了组件的定位设置，并且实现了类似 CSS Media Query 的自适应能力。

#### ECharts组件的定位和布局 ####

大部分『组件』和『系列』会遵循两种定位方式：

left/right/top/bottom/width/height 定位方式：

这六个量中，每个量都可以是『绝对值』或者『百分比』或者『位置描述』。

绝对值

单位是浏览器像素（px），用 number 形式书写（不写单位）。例如 \{left: 23, height: 400\}。

百分比

表示占 DOM 容器高宽的百分之多少，用 string 形式书写。例如 \{right: ‘30%’, bottom: ‘40%’\}。

位置描述

可以设置 left: ‘center’，表示水平居中。  
可以设置 top: ‘middle’，表示垂直居中。  
这六个量的概念，和 CSS 中六个量的概念类似：

left：距离 DOM 容器左边界的距离。  
right：距离 DOM 容器右边界的距离。  
top：距离 DOM 容器上边界的距离。  
bottom：距离 DOM 容器下边界的距离。  
width：宽度。  
height：高度。  
在横向，left、right、width 三个量中，只需两个量有值即可，因为任两个量可以决定组件的位置和大小，例如 left 和right 或者 right 和 width 都可以决定组件的位置和大小。 纵向，top、bottom、height 三个量，和横向类同不赘述。

center / radius 定位方式：

center  
是一个数组，表示 \[x, y\]，其中，x、y可以是『绝对值』或者『百分比』，含义和前述相同。

radius  
是一个数组，表示 \[内半径, 外半径\]，其中，内外半径可以是『绝对值』或者『百分比』，含义和前述相同。  
在自适应容器大小时，百分比设置是很有用的。

横向（horizontal）和纵向（vertical）  
ECharts的『外观狭长』型的组件（如 legend、visualMap、dataZoom、timeline等），大多提供了『横向布局』『纵向布局』的选择。例如，在细长的移动端屏幕上，可能适合使用『纵向布局』；在PC宽屏上，可能适合使用『横向布局』。

横纵向布局的设置，一般在『组件』或者『系列』的 orient 或者 layout 配置项上，设置为 ‘horizontal’ 或者’vertical’。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDg2NTAx_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4fec527061814e15b492c125778a1241.png