图表------折线图

Posted cxiang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图表------折线图相关的知识,希望对你有一定的参考价值。

@layout("/common/_container.html"){
<div class="ibox float-e-margins">
<div class="ibox-content">
<h3 style="text-align:center;color:red;" id="ts"></h3>
<div class="form-horizontal" id="temperatureCabinetInfoForm" >
<div id="container" style="height:450px">
</div>
</div>
</div>
</div>
<script src="${ctxPath}/static/modular/well/temperatureCabinet/temperatureCabinet_info.js"></script>
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var aa = "${id}";
//debugger;
// console.log(aa);
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
//var app = {};
option = null;
$.ajax({
url:Feng.ctxPath + "/temperatureSensor/zhexian",
type:"post",
data: {cabinet:aa},//井盖人员
dataType:"json",
success:function(data){
/* var legend[] =data.list;
var xAxis[] =data.listm; */
var legends = [];
legends=data.list;
// alert(legends.length);
if(legends.length>0){

}else{
$("#ts").html("暂无数据")
}
option = {
tooltip: {
trigger: ‘axis‘
},
legend: {
data:data.list
},
grid: {
left: ‘3%‘,
right: ‘10%‘,
bottom: ‘3%‘,
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
name : ‘日期‘,
type: ‘category‘,
boundaryGap: false,
data: data.listm
},
yAxis: {
name : ‘温度(℃)‘,
type: ‘value‘
},
series:data.listp /* [
{
name:‘上A‘,
type:‘line‘,
//stack: ‘总量‘,
data:[100.2,52,100,42.1]
},
{
name:‘上A‘,
type:‘line‘,
//stack: ‘总量‘,
data:[100,50]
},
{
name:‘上C‘,
type:‘line‘,
//stack: ‘总量‘,
data:[10,20,10,]
},
{
name:‘下B‘,
type:‘line‘,
//stack: ‘总量‘,
data:[100,52,10,42,76]
},
{
name:‘下C‘,
type:‘line‘,
//stack: ‘总量‘,
data:[20,20,10,402,96,38]
}
] */
}
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
})

 

</script>
@}















































































































以上是关于图表------折线图的主要内容,如果未能解决你的问题,请参考以下文章

echarts折线图图表怎么显示平均值

excel里折线图怎么设置横坐标的分布啊

论文中的折线图怎么画?

canvas图表详解系列:折线图

excel折线图横坐标为啥只显示一个数值?

如何将柱形图和折线图合为一张图表?