<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../scripts/jquery.min.js" type="text/javascript"></script>
<script src="echarts.min.js" type="text/javascript"></script>
</head>
<body>
<div style='border: 1px solid red; width:500px; height:500px;margin-left:20%;' id="idEcharts">
</div>
<script type="text/javascript">
$(document).ready(function(){
var app = {};
var option = null;
option = {
title: {//标题组件，包含主标题和副标题。
text: '主题名',
subtext: '副主题名'
},
tooltip: {//提示框组件。
show:true,//是否显示提示框组件
trigger: 'axis',
formatter: "Temperature : <br/>{b}km : {c}°C",//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，
axisPointer:{//坐标轴指示器配置项
type:"cross"//指示器类型。'line' 直线指示器
}
},
toolbox: {//工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
show: true,
feature: {
saveAsImage: {show: false}//不显示下载图片工具
}
},
calculable : true,//图形是否可以拖拽
xAxis: {
type: 'category',//轴线类型
boundaryGap: false,//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} W'
}
},
grid: [//绘制图形区域大小及位置
{x: '10%', y: '10%', width: '80%', height: '80%'}
],
legend: {//图例组件。
bottom:'1%',
data:['图例']//图例显示，名称和series名称一致
},
/* visualMap: {
show: false,
dimension: 0,
pieces: [{//自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式。例如：
gte: 0,
color: 'green'
}/* , {
gt: 6,
lte: 8,
color: 'red'
}, {
gt: 8,
lte: 14,
color: 'green'
}, {
gt: 14,
lte: 17,
color: 'red'
}, {
gt: 17,
color: 'green'
} ]
}, */
series: [
{
name:'图例',
type:'line',
smooth: false,//是否曲线显示
symbol:'circle',//实心圆
symbolSize:6,//大小
showAllSymbol:true,//标志图形默认只有主轴显示（随主轴标签间隔隐藏策略），如需全部显示可把 showAllSymbol 设为 true。
markLine : {
data : [
{type : 'average', name : '平均值',symbol:'emptyCircle'}
]
},
data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 420],
/* markArea: {//图表标域，常用于标记图表中某个范围的数据
data: [ [{
name: '早高峰',
xAxis: '07:30'
}, {
xAxis: '10:00'
}], [{
name: '晚高峰',
xAxis: '17:30'
}, {
xAxis: '21:15'
}] ]
} */
}
]
};
var dom = document.getElementById("idEcharts");
var myChart = echarts.init(dom);
if (option && typeof option === "object") {
myChart.setOption(option);
};
})
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../scripts/jquery.min.js" type="text/javascript"></script>
<script src="echarts.min.js" type="text/javascript"></script>
</head>
<body>
<div style='border: 1px solid red; width:500px; height:500px;margin-left:20%;' id="idEcharts">
</div>
<script type="text/javascript">
$(document).ready(function(){
var app = {};
var option = null;
option = {
title: {//标题组件，包含主标题和副标题。
text: '主题名',
subtext: '副主题名'
},
tooltip: {//提示框组件。
show:true,//是否显示提示框组件
trigger: 'axis',
formatter: "Temperature : <br/>{b}km : {c}°C",//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，
axisPointer:{//坐标轴指示器配置项
type:"cross"//指示器类型。'line' 直线指示器
}
},
toolbox: {//工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
show: true,
feature: {
saveAsImage: {show: false}//不显示下载图片工具
}
},
calculable : true,//图形是否可以拖拽
xAxis: {
type: 'category',//轴线类型
boundaryGap: false,//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} W'
}
},
grid: [//绘制图形区域大小及位置
{x: '10%', y: '10%', width: '80%', height: '80%'}
],
legend: {//图例组件。
bottom:'1%',
data:['图例']//图例显示，名称和series名称一致
},
/* visualMap: {
show: false,
dimension: 0,
pieces: [{//自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式。例如：
gte: 0,
color: 'green'
}/* , {
gt: 6,
lte: 8,
color: 'red'
}, {
gt: 8,
lte: 14,
color: 'green'
}, {
gt: 14,
lte: 17,
color: 'red'
}, {
gt: 17,
color: 'green'
} ]
}, */
series: [
{
name:'图例',
type:'line',
smooth: false,//是否曲线显示
symbol:'circle',//实心圆
symbolSize:6,//大小
showAllSymbol:true,//标志图形默认只有主轴显示（随主轴标签间隔隐藏策略），如需全部显示可把 showAllSymbol 设为 true。
markLine : {
data : [
{type : 'average', name : '平均值',symbol:'emptyCircle'}
]
},
data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 420],
/* markArea: {//图表标域，常用于标记图表中某个范围的数据
data: [ [{
name: '早高峰',
xAxis: '07:30'
}, {
xAxis: '10:00'
}], [{
name: '晚高峰',
xAxis: '17:30'
}, {
xAxis: '21:15'
}] ]
} */
}
]
};
var dom = document.getElementById("idEcharts");
var myChart = echarts.init(dom);
if (option && typeof option === "object") {
myChart.setOption(option);
};
})
</script>
</body>
</html>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
