echart-20170209静态数据-柱图/饼图展示-个人练习

来源：互联网发布：win10壁纸windows聚焦编辑：程序博客网时间：2024/06/05 02:01

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>


<div id="main" style="height:400px"></div>



<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>


<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});

//4、<script>标签内动态加载echarts和所需图表，
//回调函数中可以初始化图表并驱动图表的生成，option见API & Doc -->
// 使用
require(
[
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/pie'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));

var option1 = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};

var option2 = {
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%'],
itemStyle : {
normal : {
label : {
// position : 'inner',
formatter : function (params) {
return params.name+ (params.percent - 0).toFixed(0) + '%'
}
},
labelLine : {
show : true
}
}

},
data:[
{value:300, name:'新增验资数量'},
{value:500, name:'复核中验资数量'},
{value:200, name:'工商审批中验资数量'},

]
}
]
};


// 为echarts对象加载数据
myChart.setOption(option2);
}
);
</script>


</body>
</html>

0 0