饼状图
效果图：
代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.4.0/echarts.min.js "></script></head><body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 800px;height:400px;"></div><script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据option = {title : {text : '某站点用户访问来源',subtext : '纯属虚构',x : 'center'},tooltip : {trigger : 'item',formatter : "{a} <br/>{b} : {c} ({d}%)"},legend : {orient : 'vertical',x : 'left',data : [ '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎' ]},toolbox : {show : true,feature : {mark : {show : true},dataView : {show : true,readOnly : false},magicType : {show : true,type : [ 'pie', 'funnel' ],option : {funnel : {x : '25%',width : '50%',funnelAlign : 'left',max : 1548}}},restore : {show : true},saveAsImage : {show : true}}},calculable : true,series : [ {name : '访问来源',type : 'pie',radius : '55%',center : [ '50%', '60%' ],data : [ {value : 335,name : '直接访问'}, {value : 310,name : '邮件营销'}, {value : 234,name : '联盟广告'}, {value : 135,name : '视频广告'}, {value : 1548,name : '搜索引擎'} ]} ]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body></html>