Echarts 图表的本地配置

前言

Echarts是一个美观的可视化工具，但是很多朋友初次接触，不知道自己该怎么创建一个包含Echartst图表的本地HTML网页，本文将详细地介绍Echarts的使用流程。

使用流程步骤

共分为三个步骤：

1. 获得API
2. 在文章中引入
3. 配置相关项

1、获得API

可以在官网的GitHub上下载：https://github.com/apache/incubator-echarts/releases/tag/4.1.0。

解压后内部长这样：

而我们要用的Echarts则来自于文件夹‘dist’，里面有Echarts的各个版本，包括全面版的，简版的，我们选用全面版的，文件名就是Echarts.js。

2、引入API

在HTML文档的Head标签里面，加上这样一行代码：

  <script type="text/javascript" src="echarts.js"></script>
     

src是echarts所在的路径，我的路径是相对路径，即HTML文档和echarts在一个文件夹下面，且是同级。

3、配置相关项

• 首先要确定一个容器，用来显示图表：

<div id='main'></div>

　　设置一个id，方便后面使用

• 实例化echarts对象到这个容器里面

var chart = echarts.init(document.getElementById('main'));配置

• 配置option选项：

option = {
backgroundColor:

title:   ...

tooltip :  ...

visualMap:   ...
series :   ...
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '50%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:274, name:'联盟广告'},
{value:235, name:'视频广告'},
{value:400, name:'搜索引擎'}
] 
};

• 为图表引入配置项option

myChart.setOption(option);

4、如何在管官网上学习Echarts使用

Echarts上有很多实例，但是初学者不知道从何入手，其实耐心寻找的话，官网上面都有配置项，API,如下图

里面涉及到js语言，就需要有一定的基础了。作者我本身并未接触过javascript相关语言，但是依靠自学，基本上达到了可以将任意一个Gallery里面的内容本地化的程度。一点点进步，累积到最后就会突破。