标题组件
//标题
title:{
show:true,
text:'生鲜销量统计',//主标题
subtext:'1月份销量',//副标题
left:140,// 数字就是距离左边的像素值 也可以是 center 或者 left
borderColor:'orange',//边框颜色
borderWidth:2, //边框宽度
backgroundColor:'rgba(128,128,127,0.3)',
textStyle:{
fontSize:15,
fontStyle:'italic'
}
工具栏组件
点击数据视图
数据视图
可以切换为折线图
也可以切换回柱状图
//工具栏组件
toolbox:{
show:true, //是否显示
feature:{ //要显示的具体功能
dataView:{ //数据视图
show:true
},
restore:{ //还原
show:true
},
magicType:{ //动态类型切换
type:['line','bar']
},
saveAsImage:{ //保存图片
show:true
},
dataZoom:{ //缩放视图
show:true
}
}
}
弹窗组件
//弹窗组件
tooltip:{
show:true,//默认为true
trigger:'axis', //触发类型，item-数据项触发，主要在散点图,饼图等无类目的图表中使用；
// axis-坐标轴触发，主要在柱状图、折线图等会使用类目的图表中使用
backgroundColor:'blue',//背景色，
textStyle:{
fontStyle:'oblique',//oblique italic normal
fontWeight:'bold'//100|200|300|400... normal bold bolder lighter
}
}
标记线和标记点
默认样式
默认样式
改变后的样式
切换折线图查看
symbol为标记的图形有'circle','rect','roundRect','triangle','diamod','pin','arrow'
注意只有当tooltip的trigger属性为item的时候，才会有下图的效果
//弹窗组件
tooltip:{
show:true,//默认为true
trigger:'item', //触发类型，item-数据项触发，主要在散点图,饼图等无类目的图表中使用；
// axis-坐标轴触发，主要在柱状图、折线图等会使用类目的图表中使用
backgroundColor:'blue',//背景色，
textStyle:{
fontStyle:'oblique',//oblique italic normal
fontWeight:'bold'//100|200|300|400... normal bold bolder lighter
}
}
markPoint:{//标记点
data:[
{type:'max',name:'最大值',symbol:'circle',symbolSize:[60,40]},
{type:'average',name:'平均值',symbol:'roundRect',symbolSize:[40,40]},
{type:'min',name:'最小值',symbol:'diamond',symbolSize:[40,60]}
]
},
markLine:{
data:[
{type:'average',name:'平均值'}
]
}
注意这个组件要在series内
series:[{
name:'销量',
type:'bar',
data:[40,20,35,60,55,10],
markPoint:{//标记点
data:[
{type:'max',name:'最大值',symbol:'circle',symbolSize:[60,40]},
{type:'average',name:'平均值',symbol:'rect',symbolSize:[40,40]},
{type:'min',name:'最小值',symbol:'diamond',symbolSize:[40,60]}
]
},
markLine:{
data:[
{type:'average',name:'平均值'}
]
}
}]
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>柱状图</title>
<script src="script/echarts.min.js"></script>
</head>
<body>
<!--为echarts准备一个容器，画图就画在里面-->
<div id="box" style="width: 600px;height: 600px;"></div>
<script>
//初始化ehcharts实例
var myChart=echarts.init(document.getElementById("box"));
//指定图表的配置项和数据
var option={
//标题
title:{
show:true,
text:'生鲜销量统计',//主标题
subtext:'1月份销量',//副标题
left:140,// 数字就是距离左边的像素值 也可以是 center 或者 left
borderColor:'orange',//边框颜色
borderWidth:2, //边框宽度
backgroundColor:'rgba(128,128,127,0.3)',
textStyle:{
fontSize:15,
fontStyle:'italic'
}
},
//工具栏组件
toolbox:{
show:true, //是否显示
feature:{ //要显示的具体功能
dataView:{ //数据视图
show:true
},
restore:{ //还原
show:true
},
magicType:{ //动态类型切换
type:['line','bar']
},
saveAsImage:{ //保存图片
show:true
},
dataZoom:{ //缩放视图
show:true
}
}
},
//弹窗组件
tooltip:{
show:true,//默认为true
trigger:'item', //触发类型，item-数据项触发，主要在散点图,饼图等无类目的图表中使用；
// axis-坐标轴触发，主要在柱状图、折线图等会使用类目的图表中使用
backgroundColor:'blue',//背景色，
textStyle:{
fontStyle:'oblique',//oblique italic normal
fontWeight:'bold'//100|200|300|400... normal bold bolder lighter
}
},
//图例-每一条数据的名字叫销量
legend:{
data:['销量']
},
//x轴
xAxis:{
data:["苹果","橘子","橙子","香蕉","菠萝","榴莲"]
},
//y轴没有显式设置，根据值自动生成y轴
yAxis:{},
//数据-data是最终要显示的数据
series:[{
name:'销量',
type:'bar',
data:[40,20,35,60,55,10],
markPoint:{//标记点
data:[
{type:'max',name:'最大值',symbol:'circle',symbolSize:[60,40]},
{type:'average',name:'平均值',symbol:'roundRect',symbolSize:[40,40]},
{type:'min',name:'最小值',symbol:'diamond',symbolSize:[40,60]}
]
},
markLine:{
data:[
{type:'average',name:'平均值'}
]
}
}]
};
//使用刚刚指定的配置项和数据项显示图表
myChart.setOption(option);
</script>
</body>
</html>
