<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>柱狀圖</title>
<!-- 引入 ECharts 文件 -->
<script type="text/javascript" src="/static/common/jquery.min.js"></script>
<script src="/static/echars/echarts.min.js"></script>
<style>
html,body{
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script>
$(function () {
var targetDom=$("#line")[0]
var chart = echarts.init(targetDom);
var option = {
title: {
text: '柱狀圖',
subtext:"學生成績",
left :"left"
},
legend:{
data:["成績"],
left:'left',
top:'center',
itemWidth :10,
itemHeight :10
},
tooltip:{},
xAxis:{
type:'category',
data:["計算機","英語","數學","語文","社會科學"],
axisPointer:{
show:true
}
},
yAxis:{
type: 'value',
min:0,
max:100,
interval:10,
splitLine:{
show:false
},
axisLabel:{
formatter: '{value}',
textStyle: {
color: function (value, index) {
if(value<=60){
return "red";
}else if(value <=80){
return "orange"
}else{
return 'green';
}
}
}
},
minorTick:{
show: true
},
axisPointer:{
show:true
}
},
visualMap: {
type:'piecewise',
min: 0,
max: 100,
splitNumber: 5,
orient : 'horizontal',
color: ['green','orange','red'],
textStyle: {
color: 'black',
align:"right"
},
left:'center',
top:'top',
inverse:true
},
dataZoom:[{
orient : 'vertical',
yAxisIndex:0
},{
orient : 'horizontal',
xAxisIndex:0,
top:'bottom'
}],
toolbox: {
show: true,
feature: {
dataZoom: {
},
magicType: {type:['line', 'bar', 'stack', 'tiled']},
restore: {},
saveAsImage: {}
}
},
series:[
{
name:"成績",
type:"bar",
data: [90,95,80,70,80],
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
chart.setOption(option)
})
</script>
</head>
<body>
<!-- 爲 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="line" style="width: 50%;height:50%;float: left;"></div>
</body>
</html>