- 引入Echarts的相关库文件，以及自定义的js文件
<script src="${pageContext.request.contextPath}/js/echarts/source/echarts.js"></script>
<script src="${pageContext.request.contextPath}/js/phoneSample.js"></script>
- 定义图表的展示位置，建议使用bootstrap布局
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#iPhone" data-toggle="tab">iPhone</a></li>
<li><a href="#SAMSUNG" data-toggle="tab">SAMSUNG</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="iPhone">
<div class="row placeholders" style="float:clear;">
<h2><strong>iPhone手机分析</strong></h2>
</div>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder" id ="pie4All_iPhone" style="height:500px;width:650px">
</div>
<div class="col-xs-6 col-sm-3 placeholder" id ="bar_iPhone" style="height:500px;width:650px;float:left;">
</div>
</div>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder" id ="pie4Not_iPhone" style="height:500px;width:650px">
</div>
</div>
</div>
<div class="tab-pane fade" id="SAMSUNG">
<div class="row placeholders" style="float:clear;">
<h2><strong>SAMSUNG手机分析</strong></h2>
</div>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder" id ="pie4All_SAMSUNG" style="height:500px;width:650px">
</div>
<div class="col-xs-6 col-sm-3 placeholder" id ="bar_SAMSUNG" style="height:500px;width:650px;float:left;">
</div>
</div>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder" id ="pie4Not_SAMSUNG" style="height:500px;width:650px">
</div>
</div>
</div>
</div>
</div>
- 编写phoneSample.js文件，处理图表数据（代码很简单，详见注释）
//封装饼状图参数
function setOptionPie(data){
var legend_data = [];
if(data && data.length > 0){
$.each(data, function(idx, d){
legend_data.push(d.name);
});
}
var option = {
title : {
text: data.title || ‘‘,
x:‘center‘
},
tooltip : {
trigger: ‘item‘,
formatter: "{b} : {c} ({d}%)"
},
legend: {
orient : ‘vertical‘,
x : ‘left‘,
data:legend_data
},
calculable : true,
series : [
{
type:‘pie‘,
radius : ‘55%‘,
center: [‘50%‘, ‘60%‘],
data:data,
itemStyle : {
normal : {
label : {
show: true,
position : ‘outer‘,
formatter : "{b}\n{d}%",//在饼状图上显示百分比
/*textStyle : {
color : ‘rgba(30,144,255,0.8)‘,
align : ‘center‘,
baseline : ‘middle‘,
fontFamily : ‘微软雅黑‘,
fontSize : 30,
fontWeight : ‘bolder‘
}*///自定义饼图上字体样式
},
labelLine : {
show : true,
}
},
emphasis : {
label : {
show : true,
formatter : "{d}%"//鼠标移动到饼状图上显示百分比
}
}
}
}
]
};
return option;
}
//封柱状状图参数
function setOptionBar(data){
var legend_data = [];
//var series = [];
if(data && data.length > 0){
$.each(data, function(idx, d){
legend_data.push(d.name);
//series.push({name:d.name,type:‘bar‘,itemStyle : { normal: {label : {show: true, position: ‘insideRight‘}}},data:d.data});
});
}
/*var option = {
tooltip : {
trigger: ‘axis‘,
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
}
},
legend: {
data:legend_data
},
calculable : true,
xAxis : [
{
type : ‘value‘
}
],
yAxis : [
{
type : ‘category‘,
data : data && data[0] ? data[0].yAxis : []
}
],
series : series
};
return option;*/
var option = {
title : {
text: data.title || ‘‘,
x:‘center‘
},
tooltip : {
trigger: ‘axis‘,
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
}
},
legend: {
orient : ‘vertical‘,
x : ‘left‘,
data:legend_data
},
calculable : true,
xAxis : [
{
type : ‘value‘
}
],
yAxis : [
{
type : ‘category‘,
data : data && data[0] ? data[0].yAxis : []
}
],
series : [
{
name:legend_data[0],
type:‘bar‘,
stack: ‘总量‘,
itemStyle : { normal: {label : {show: true, position: ‘insideRight‘}}},
data:data[0].data
},
{
name:legend_data[1],
type:‘bar‘,
stack: ‘总量‘,
itemStyle : { normal: {label : {show: true, position: ‘insideRight‘}}},
data:data[1].data
},
{
name:legend_data[2],
type:‘bar‘,
stack: ‘总量‘,
itemStyle : { normal: {label : {show: true, position: ‘insideRight‘}}},
data:data[2].data
}
]
};
return option;
}
//设置相关参数，展示图表
function showChart(data, type, phoneFlag) {
require([ ‘echarts‘, ‘echarts/chart/‘+(type.substr(0,3) == ‘pie‘?‘pie‘:type) ], function(ec) {
var myChart = ec.init(document.getElementById(type+‘_‘+phoneFlag));
var option = null;
if(type == ‘pie4All‘){
data.title = "口碑现状";
option = setOptionPie(data);
}else if(type == ‘bar‘){
data.title = "用户评价的分布现状";
option = setOptionBar(data);
}else if(type == ‘pie4Not‘){
data.title = "负面信息属性分布状况";
option = setOptionPie(data);
}
myChart.setOption(option);
window.onresize = function () {
myChart.resize();
};
});
}
// 请求后台数据，填充图表
function ajaxChart(phoneFlag, type) {
$.ajax({
type : "POST",
dataType : "json",// 返回json格式的数据
url : "../psServlet",
data : {
phoneFlag : phoneFlag,
method: type
},
success : function(data) {
if(data && data.length > 0){
showChart(data, type, phoneFlag);
}
}
});
}
$(function(){
// 加载图表所需的js库文件
require.config({
paths: {
echarts: path+‘/js/echarts/source‘
}
});
ajaxChart("iPhone", "pie4All");
ajaxChart("iPhone", "bar");
ajaxChart("iPhone", "pie4Not");
ajaxChart("SAMSUNG", "pie4All");
ajaxChart("SAMSUNG", "bar");
ajaxChart("SAMSUNG", "pie4Not");
});
- 后续准备用面向对象的方式封装下，将图表展示和数据接口独立出来，方便其他项目引用
时间： 2025-01-31 18:41:41