1、echars畫柱狀圖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main" style="height: 400px;">
</div>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
var myCharts = echarts.init(document.getElementById("main"));
var option = {
title : {
text : "瀑布圖",
subtext : "2018-3-27"
},
legend : {
data : ["降雨量","水蒸氣","蒸發量","啊啊啊","不不不"]
},
tooltip : {
show : true,
trigger : "axis",
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
}
},
toolbox : {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : {
type : "category",
name : "時間(小時)",
data : ["9","10","11","12","13","14","15","16"]
},
yAxis : {
type : "value",
},
series : [
{
name : "降雨量",
type : "bar",
data : [12.3,11.0,14.2,11.0,15.0,11.2,14.9,17.3],
},
{
name : "啊啊啊",
type : "bar",
stack : "量",
data : [12.3,11.0,14.2,11.0,15.0,11.2,14.9,17.3],
z : "6"
},
{
name : "不不不",
type : "bar",
data : [12.3,11.0,14.2,11.0,15.0,11.2,14.9,17.3],
//斜線
markLine : {
itemStyle:{
normal:{
lineStyle:{
type: 'dashed'
}
}
},
data : [
[{type : 'min'}, {type : 'max'}]
]
}
},
{
name : "水蒸氣",
type : "bar",
stack: '不不不',
data : [30,50,70,40,33,65,45,50]
},
{
name : "蒸發量",
type : "bar",
data : [13.5,15.0,17.0,14.0,13.3,16.5,14.5,15.0]
}
]
};
myCharts.setOption(option);
</script>
</body>
</html>注意：
在django的前端模板中，js代碼需要寫在body裏：
