在JSP中如何导入echarts，求大神解答echarts 衣服配置项内容和展示
求各位大神解答一下，怎么在jsp中导入echarts require.config({}) 一直报错 var echarts=require() 也报错，求解应该怎么写，谢谢各位了
配置项如下
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="utf-8">
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="main" style="widtb:600px;heigth:400px"></div>
<button type="button" id="button1">显示</button>
<script type="text/javascript">
$(() => {
$("#button1").click(function() {
$("#main").slideToggle(999);
})
});
var shuname = new Array();
var shusize = new Array();
$.ajax({
url : "shuTestAction_getAllPower",
type : "post",
dataType : "json",
success : function(jsonArray) {
for (x in jsonArray[0]) {
shuname[x] = jsonArray[0][x];
}
for (x in jsonArray[1]) {
shuzize[x] = jsonArray[1][x];
}
}
})
/* //配置路径？没懂
require.config({
paths : {
echarts:'js/echarts'
}
}); */
//引入echarts
var echarts = require('js/echarts.js');
//使用
/* require([ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
], function(ec) { */
//准备好的dom ，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
title : {
text:'数据测试我是标题',
subtext:'标题下面的我也不知道是什么'
},
tooltip:{
//在 tooltip 的 trigger 为 axis 的时候可选
trigger:'axis'
},
legend:{
data:['衣服','裤子','鞋子']
},
toolbox:{ //工具栏 内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
show:true,//是否显示工具栏组件。
showTitle:true,//是否在鼠标 hover 的时候显示每个工具 icon 的标题
feature:{/* 各工具配置项。
除了各个内置的工具按钮外，还可以自定义工具按钮。
注意，自定义的工具名字，只能以 my 开头，例如下例中的 myTool1，myTool2： */
//下面是 faeture 内置工具按钮
mark : {//API中未找到，待测试
show : true
},
dataView:{//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
show:true, //是否显示改工具
readOnly:false //是否不可编辑（只读）。
},
magicType:{//动态类型切换
show:true,
type:['line','bar']
},
restore:{//配置还原项
show:true
},
saveAsImage:{//保存为图片
show:true //是否显示工具
}
}
},
calculable : true,//是否显示拖拽用的手柄（手柄能拖拽调整选中范围）？ 不确定
xAxis:[{ //直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
type:'category', //坐标轴类型。 category 适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
data:['1个','2g','3g','4g']
}],
yAxis:[{ //Y轴
type:'value', //数值轴，适用于连续数据
}],
series:[{ //系列列表。每个系列通过 type 决定自己的图表类型
name:'衣服', //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
type: "line", //类型 折线/面积图
data: shusize, //数据库数据
markPoint:{ //图表标注
animation:true,//是否开启动画
data : [ {
/*
标注的数据数组。每个数组项是一个对象，有下面几种方式指定标注的位置。
1.通过 x, y 属性指定相对容器的屏幕坐标，单位像素，支持百分比。
2.用 coord 属性指定数据在相应坐标系上的坐标位置，单个维度支持设置 'min', 'max', 'average'。
3.直接用 type 属性标注系列中的最大值，最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。
当多个属性同时存在时，优先级按上述的顺序。
*/
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
markLine : { //图表标线
data : [ {
type : 'average',
name : '平均值'
} ]
}
},{
name:'裤子',
type:'bar',
data: shusize,
markPoint : {
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
}]
};
//为echarts对象加载数据
myChart.setOption(option);
//})
</script>
</body>
</html>
截图如下
