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 的位置

   

   

    [removed][removed]

方法二: 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。

var echarts = require('echarts');

// 基于准备好的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]

    }]

});

ECharts示例

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

在这里举一个例子:

     

   

   

   

   

    [removed][removed]

   

   

    [removed]

        // 基于准备好的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);

    [removed]

运行后界面:(简洁大方~ 非常好看)

按需引入 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’。

需要做一个散点图，但是excel实现的效果不太满意

于是找到了 echarts 找个JS插件，稍微修改了模板文件，得到需要的散点图

以下是读取文件数据，修改模板中data的代码

# -*- coding: utf-8 -*-

"""

Created on Wed Oct 17 14:52:50 2018

@author: sofeien

"""

import os

import re

 

path= os.path.abspath('散点图.csv')

 

data_str='var data=['               

with open(path,'r',encoding='utf-8') as f_input:

        line_index=0

        for line in f_input:

            if(line_index==0):

                line_index+=1

                continue

            list_line=[x.strip() for x in re.split('[,\s]',line)]

            data_str += "[%s,%s,'%s']," % (list_line[1],list_line[2],list_line[0])

        data_str = data_str[:-1]+'];'

os.rename('scatter-weight.html', 'scatter-weight_bak.html')

with open('scatter-weight_bak.html','r',encoding='utf-8') as f:

    with open('scatter-weight.html','w',encoding='utf-8') as f_output:

        for line in f:

            if(line.find('var data=[')!=-1):

                f_output.write(data_str)

                f_output.write('\n')

            else:

                f_output.write(line)

os.remove('scatter-weight_bak.html')

 

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

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 的位置

    [removed][removed]