使用echarts在jsp页面开发一个简单的折线图实例固定的参数

最新推荐文章于 2023-07-31 13:23:06 发布

1988我想和这个世界谈谈

最新推荐文章于 2023-07-31 13:23:06 发布

阅读量1.1k

点赞数

分类专栏： echarts 文章标签： echarts 折线图实例固定参数

本文链接：https://blog.csdn.net/malz_zh/article/details/85006979

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

此实例是参数固定的实例，不涉及框架，后台返回参数，只需要一个jsp页面和echarts.js，若需要展示后台查询到的数据请看博客：https://blog.csdn.net/malz_zh/article/details/85006703

<html>
<head>
<base href="<%=basePath%>">
<title>折线图</title>
   <script src="./js/echarts.js" type="text/javascript"></script>//echarts.js放在该页面的同级文件夹js中
</head>

<body>

<div id='main' style='width:600px;height:400px;'></div>
<script>
//基于准备好的DOM，初始化echarts实例--echarts.init() 方法初始化一个 ECharts 实例，在 init() 中传入图表容器 Dom 对象，
var myChart = echarts.init(document.getElementById('main'));
//指定图表的配置项和数据
var option = {
title:{
text:'折线图实例',//标题
subtext: '折线图',//备注
left: 'center',//标题位置
textStyle: {//标题颜色
       color: '#ccc'
       }
},
//提示框组件
tooltip:{
//坐标轴触发，主要用于柱状图，折线图等
trigger:'axis'
},
//横轴
xAxis:{
data:["衣服","鞋","裤子","手套"]
},
//纵轴
yAxis:{},
//系列列表。每个系列通过type决定自己的图表类型
series:[{
name:'数量',//series名称
type:'line',//series图表类型,line折线图、scatter散点图
data:[7, 10, 5, 1] //

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

1988我想和这个世界谈谈

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用echarts在jsp页面开发一个简单的折线图实例固定的参数

此实例是参数固定的实例，不涉及框架，后台返回参数，只需要一个jsp页面和echarts.js，若需要展示后台查询到的数据请看博客：https://blog.csdn.net/malz_zh/article/details/85006703&lt;html&gt; &lt;head&gt; &lt;base href="&lt;%=basePath%&gt;"&gt; &lt...
复制链接

扫一扫

专栏目录