<%@ page language="java" import="supermarket.connDb,java.util.* " content
Type="
text/
html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
ArrayList<String[]> list = connDb.index_4();
ArrayList<String[]> list2 = connDb.index_5();
%>
<
html>
<head>
<meta http-equiv="Content-
Type" content="
text/
html; charset=UTF-8">
<title>ECharts supermarket</title>
<link href="./css/style.css"
type="
text/css" rel="stylesheet"/>
<link rel="shortcut icon" href="#"/>
<
script src="./js/echarts.min.js"></
script>
<
script src="./js/echarts.js"></
script>
<
script src="./js/style/macarons.js"></
script>
<
script src="./js/style/roma.js"></
script>
<
script src="./js/style/vintage.js"></
script>
</head>
<body>
<div class='header'>
<p>ECharts supermarket</p>
</div>
<div class="content">
<div class="nav">
<ul>
<li><a href="./SMindex.jsp">总商品品类成交对比</a></li>
<li><a href="./SMindex1.jsp">饮品成交量对比</a></li>
<li><a href="./SMindex2.jsp">各省会员人数</a></li>
<li><a href="./SMindex3.jsp">男女购买商品对比</a></li>
<li class="current"><a href="#">商品购买关系</a></li>
</ul>
</div>
<div class="container">
<div class="title">超市商品购买关系</div>
<div class="show">
<div class='chart-
type'></div>
<div id="main" style="width:700px;height:500px"></div>
</div>
</div>
</div>
<
script>
var supermarketContainer=document.getElementById('main');
//基于准备好的dom,初始化echarts实例
var myChart = echarts.init(supermarketContainer);
//指定图表的配置项和数据
<%
ArrayList list11 = new ArrayList();
for(int i =0;i<list.size();i++){
list11.add(list.get(i)[0]);
list11.add(list.get(i)[1]);
}
System.out.println(list11);
LinkedHashSet<Integer>hashSet =new LinkedHashSet(list11);
ArrayList<Integer>list1 =new ArrayList(hashSet);
//System.out.println(list1);
%>
var nodes =[];
<%
for(int i =0; i<list1.size(); i++){
%>
nodes.push({
name: '<%=list2.get(i)[1]%>',
id: '<%=list2.get(i)[0]%>',
symbolSize: 20,
symbol:'circle',})
<%
}
%>
console.log(nodes)
var links =[];
<%
for(int i =0; i<list.size();i++){
String temp =list.get(i)[2];
double temp1 =Double.parseDouble(temp);
double temp2 =temp1 * 10;
temp1 =temp1 * 100;
temp =String.format("%.2f", temp1).toString()+"%";
//System.out.println(temp);
%>
links.push({
source: '<%=list.get(i)[0]%>',
target: '<%=list.get(i)[1]%>',
lineStyle: {width: '<%=temp2%>'},
relation: {name: '<%=temp%>'}})
<%
}
%>
console.log(links)
var option ={
title: {
text: '超市商品购买关系图',
left: 'left',
//top: 20,
textStyle: {
//color: '#ccc'
}
},
tooltip : {
trigger: 'item'
//formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
//colorLightness: [0, 1]
}
},
grid:{
containable:true
},
series : [
{
type: 'graph',
layout: 'force',
nodes: nodes,
links: links,
force: {
repulsion:100,
gravity:0.03,
edgeLength:80,
layoutAnimation:false
},
itemStyle: {
normal: {
opacity:0.9,
color:function(params){
var colorList=[
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
];
return colorList[params.dataIndex]
}
}
},
lineStyle: {
normal: {
show:true,
color:'target',
width:5
}
},
label: {
show: true,
position: "bottom",
distance: 5,
fontSize: 10,
align: "center",
},
autoCurveness: 0.01,
edgeLabel: {
show: true,
position: "middle",
fontSize: 10,
formatter: (params) =>{
return params.data.relation.name;
},
},
edgeSymbol: ["circle", "arrow"],
}
]
};
// 使用刚指定的配置项和数据显示图表
option && myChart.setOption(option);
//}}
</
script>
</body>
</
html>这是index.jsp代码Tomcat7.0
本文讨论了如何在使用Eclipse Indigo编辑JavaScript渲染的HTML模板时，解决语法高亮、格式化等问题。通过安装特定插件，可以将包含<script type=text/html>标签的内容视为HTML进行编辑。
扫一扫
2661
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
