<script src="js/echarts.simple.min.js"></script>
<!--準備畫布-->
<div id="main" style="width: 600px;height:400px;"></div>
<!--引人這個js是鼠標劃過的時候有效果-->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
tooltip: {
show: true
},
//右上角工具欄
toolbox: {show : true, feature : {
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
saveAsImage : {show: true}
}
},
// 圖例
legend: {x:'right', //靠右
data:['銷量','銷量1'] //這裏要與下面的name對應
},
xAxis : [
{
type : 'category',
data : ["A","B","C","D","E","F"]
}
],
yAxis : [
{
type : 'value'
splitLine: { // 控制Y軸的分隔線(輔助線)
show: false, // 默認顯示，屬性show控制顯示與否
lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
color: ['#ccc'],
width: 1,
type: 'solid'
}
},
],
series : [
{
"name":"銷量",
"type":"bar",
"barGap":'5%', //兩個柱子距離
itemStyle:{
normal:{color:'#ab78ba', //柱狀顏色
label : {
show : true, //柱頭數字
position : 'top',
textStyle : {
fontSize : '20',
fontFamily : '微軟雅黑',
fontWeight : 'bold'
}
}
}
},
"data":[5, 20, 40, 10, 10, 20]
},
{
"name":"銷量1",
"type":"bar",
"data":[25, 10, 20, 10, 10, 20]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
