优秀的编程知识分享平台

网站首页 > 技术文章 正文

echarts入门（echarts入门书籍）

nanyue 2024-10-12 05:48:43 技术文章 20 ℃

1.下载echarts.js（百度搜索echarts官网）

2.将echarts.js放入项目中

3.创建echarts.jsp(在jsp中引入<script src="echarts.js"></script>)

4.浏览器访问

<%@page pageEncoding="UTF-8" contentType="text/html; utf_8" isErrorPage="false" %>
<!doctype html>
<html lang="en">
<head>
 <title>Echarts使用</title>
<%-- 在同一个包下--%>
 <script src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
 // 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById('main'));

 // 指定图表的配置项和数据
 var option = {
 title: {
 text: 'ECharts ', //标题
 textStyle:{
 color:'#3621ac'
 }
 },
 tooltip: {}, //工具提示
 legend: { //按钮
 data:['销量','库存'] //要与下方series中name名字相同
 },
 xAxis: { //x轴数据
 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
 },
 yAxis: {}, //根据数据自动适应y轴高度
 series: [{ //[]数组{}对象
 name: '销量',
 type: 'bar', //系列(线条：line圆饼：pie柱状图：bar)
 data: [5, 20, 36, 10, 10, 20]//对应数据
 },
 {
 name: '库存',
 type: 'bar', //系列(线条：line圆饼：pie)
 data: [12, 23, 46, 14, 140, 20]//对应数据
 }]
 };

 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
</script>
</body>
</html>

使用ajax请求从json文件中获取值

方法一：
<%@page pageEncoding="UTF-8" contentType="text/html; utf_8" isErrorPage="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set value="${pageContext.request.contextPath}" var="path"/>
<!doctype html>
<html lang="en">
<head>
 <title>Echarts使用</title>
 <%--引入echarts.js--%>
 <script src="echarts.js"></script>
 <%-- 引入jquery--%>
 <script src="${path}/statics/boot/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
 // 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById('main'));

 // 指定图表的配置项和数据
 var option = {
 title: {
 text: 'ECharts ', //标题
 textStyle:{
 color:'#3621ac'
 }
 },
 tooltip: {}, //工具提示
 legend: { //按钮
 data:['销量','库存'] //要与下方series中name名字相同
 },
 xAxis: { //x轴数据
 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
 },
 yAxis: {}, //根据数据自动适应y轴高度
 series: [{ //[]数组{}对象
 name: '销量',
 type: 'bar', //系列(线条：line圆饼：pie柱状图：bar)
 },
 {
 name: '库存',
 type: 'bar', //系列(线条：line圆饼：pie)
 }]
 };
 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
 $.ajax({
 url:'${path}/statics/json/echarts.json',//访问json文件
 type:'get',
 dataType:'json',
 success:function(result){//拿到数据,数据存放在result里面
 var option={
 series: [{
 data:result.data1
 },{
 data:result.data2
 }]
 }
 myChart.setOption(option);//声明数据后需要重新赋值
 }
 })


</script>
</body>
</html>




方法二：将option全部放入ajax请求中
<%@page pageEncoding="UTF-8" contentType="text/html; utf_8" isErrorPage="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set value="${pageContext.request.contextPath}" var="path"/>
<!doctype html>
<html lang="en">
<head>
 <title>Echarts使用</title>
 <%--引入echarts.js--%>
 <script src="echarts.js"></script>
 <%-- 引入jquery--%>
 <script src="${path}/statics/boot/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
 // 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById('main'));


 $.ajax({
 url:'${path}/statics/json/echarts.json',//访问json文件
 type:'get',
 dataType:'json',
 success:function(result){//拿到数据,数据存放在result里面
 var option = {
 title: {
 text: 'ECharts ', //标题
 textStyle:{
 color:'#3621ac'
 }
 },
 tooltip: {}, //工具提示
 legend: { //按钮
 data:['销量','库存'] //要与下方series中name名字相同

 },
 xAxis: { //x轴数据
 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
 },
 yAxis: {}, //根据数据自动适应y轴高度
 series: [{ //[]数组{}对象
 name: '销量',
 type: 'bar', //系列(线条：line圆饼：pie柱状图：bar)
 data:result.data1
 },
 {
 name: '库存',
 type: 'bar', //系列(线条：line圆饼：pie)
 data:result.data2
 }]
 };
 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
 }
 })


</script>
</body>
</html>





//json文件（相当于一个map集合）
{
 "data1": [5, 20, 36, 10, 10, 20],
 "data2": [12, 23, 46, 14, 140, 20]
}

Tags：

猜你喜欢

最近发表
标签列表