准备工作：1,下载eChars.js 导入到项目（并在在webContent目录下，新建Js文件夹并将eChars.js包导入 ）
-------------------------------------------具体代码演示------------------柱状图效果----------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts入门</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的DOM容器-->
<div id='main' style='width:600px;height:400px;'></div>
<!-- 引入ECharts文件 -->
<script src="${pageContext.request.contextPath}/js/echarts.js"></script>
<script>
//基于准备好的DOM，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//指定图表的配置项和数据
var option = {
title:{
text:'EChars入门'
},
//提示框组件
tooltip:{
//坐标轴触发，主要用于柱状图，折线图等
trigger:'axis'
},
//图例
legend:{
data:['销量']
},
//横轴
xAxis:{
data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
//纵轴
yAxis:{},
//系列列表。每个系列通过type决定自己的图表类型
series:[{
name:'销量',
//折线图 @图表的类型bar ,pie
type:'bar',
data:[5, 20, 36, 10, 10, 20]
}]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
sdafsadfsda
</body>
</html>
3152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
