前言

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

使用流程步骤

共分为三个步骤：

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

1、获得API

可以在官网的上下载：。

解压后内部长这样：

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

2、引入API

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

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

3、配置相关项

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

　　设置一个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里面的内容本地化的程度。一点点进步，累积到最后就会突破。