<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>