Echarts学习之使用要点步骤

对echarts的引入，官网提供3种引入方式：模块化包引入、模块化单文件引入、标签式单文件引入。这里官网推荐使用的是模块化单文件引入，这里也只总结这种引入方式的一些要点步骤。

1、引入echarts主文件

新建一个html/jsp文件，通过script标签引入echarts.js

2、图表加载容器

为ECharts准备一个具备大小（宽高）的Dom。

3、配置图表路径

为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js）

4、加载图表形态

动态加载echarts和所需图表

5、配置数据，生成图表

回调函数中可以初始化图表并驱动图表的生成。以下代码要出现在上一步骤的function中

// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main')); 
                
option = {...};//图表配置信息
                	            
// 为echarts对象加载数据 
myChart.setOption(option); 

下面是官网上一个完整过程的例子，生成雷达图。

<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<%@ taglib prefix="s" uri="/struts-tags"%>  
  
  
  
  
  


    
    

    
    
    

效果图

参考来源：

https://www.douban.com/note/509404582/

官网学习：

http://echarts.baidu.com/echarts2/doc/example.html

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