柱状图详情配置
作者：互联网
标准柱状图
var option = {
title: { //设置标题
text: '主标题',
subtext: '副标题',
},
legend: {//设置图例
type:'',//scroll设置为滚动图例，默认为plain
orient: 'horizontal',//图例对齐方式为水平对齐，垂直对其：'vertical'
data: []
},
tooltip: {//提示框组件
trigger: 'axis',//设置提示框触发方式。'item',移动到数值上才会触发。'axis',移动到数值附近后自动提示并且有条贯穿数值的竖线
formatter: "{a}<br/>{b}:{c}"//提示框显示内容
},
toolbox: {//工具箱
feature: {
saveAsImage: {},//保存图片
restore: {},//配置还原
dataView: {},//数据视图
magicType: {//数据类型切换
type: ['line', 'bar', 'stack']
}
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [150, 120, 250, 100, 70, 110, 130],
}
]
};
绘制堆积柱状图
使用stack配置项把数值设置成一样的内容让'谷歌','必应','其他'三个柱状图堆积起来
var option = {
tooltip:{
trigger:"axis",
// axisPointer:{
// type:'shadow'
// },
},
legend:{
data:['直接访问','搜索引擎','百度','谷歌','必应','其他']
},
toolbox:{
show:true,
orient:'vertical',
x:'right',
y:'center',
feature:{
mark:{show:true},
dataView:{show:true,readOnly:false},
magicType:{
show:true,
type:["bar","line","stack",'tiled']
},
restore:{show:true},
saveAsImage:{show:true},
}
},
calculable:true,
xAxis:[
{
type:"category",
data:['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis:[
{
type:"value"
}
],
series:[
{
name:'直接访问',
type:'bar',
data:[320,332,301,334,390,330,320]
},
{
name:'搜索引擎',
type:'bar',
data:[862,1018,964,1026,1679,1600,1570],
markLine:{ //从最小值到最大值用线连接起来
itemStyle:{
normal:{
lineStyle:{
type:'dashed'
}
}
},
data:[
[
{type:'min'},
{type:'max'}
]
]
},
},
{
name:'百度',
type:'bar',
data:[620,732,701,734,1090,1130,1120]
},
{
name:'谷歌',
type:'bar',
stack:'搜索引擎',
data:[120,132,101,134,290,230,220]
},
{
name:'必应',
type:'bar',
stack:'搜索引擎',
data:[60,72,71,74,190,130,110]
},
{
name:'其他',
type:'bar',
stack:'搜索引擎',
data:[62,82,91,84,109,110,120]
},
]
}
绘制条形图
条形图和柱状图一样的配置只不过xAxis和yAxis里面的内容相互互换了一下
var mychart = echarts.init(document.getElementById("main"))
var option = {
title:{
text:'世界人口总量',
subtext:'数据来自网络',
},
tooltip:{
trigger:"axis",
},
legend:{
data:['2011年','2012年'],
},
toolbox:{
show:true,
feature:{
mark:{show:true},
dataView:{show:true,readOnly:false},
magicType:{
show:true,
type:["line","bar"]
},
restore:{show:true},
saveAsImage:{show:true},
},
},
calculable:true,
xAxis:[
{
type:"value",
boundaryGap:[0,0.01],
},
],
yAxis:[
{
type:"category",
data:['A国','B国','C国','D国','E国','世界人口（万）'],
},
],
series:[
{
name:'2011年',
type:'bar',
data:[18203,23489,29034,104970,131744,630230],
},
{
name:'2012年',
type:'bar',
data:[19325,23438,31000,121594,134141,681807],
},
]
};
绘制瀑布图
要想形成瀑布效果需要用到stack配置项，通过堆叠数值实现从上往下的瀑布效果，再把设置数值的柱子给透明化这样效果就出来了
var option = {
title:{
text:'深圳月底最低生活费组成（单位：元）',
subtext:'数据来自ExcelHome ',
},
tooltip:{
trigger:"axis",
axisPointer:{
typr:'shadow'
},
formatter:function(params){
var tar = params[0];
return tar.name + '<br/>' +tar.seriesName+':'+tar.value;
}
},
toolbox:{
show:true,
feature:{
mark:{show:true},
dataView:{show:true,readOnly:false},
restore:{show:true},
saveAsImage:{show:true},
},
},
xAxis:[
{
type:'category',
splitLine:{show:false},
data:['总费用','房租','水电费','交通费','伙食费','日用品费用'],
},
],
yAxis:[
{
type:"value",
},
],
series:[
{
name:'辅助',
type:'bar',
stack:'总量',
itemStyle:{
normal:{//设置柱子的样式
barBorderColor:'rgba(0,0,0,0)',//设置柱子边框颜色
//barBorderColor:'rgba(20,20,0,0.5)',
barBorederWidth:5,//设置柱子边框宽度
color:'rgba(0,0,0,0)',//设置柱子颜色
//color:'rgba(0,220,0,0.8)',
},
emphasis:{//设置鼠标划过时柱子的样式
barBorderColor:'rgba(0,0,0,0)',
barBorderWidth:25,
color:'rgba(0,0,0,0)'
}
},
data:[0,1700,1400,1200,300,0],
},
{
name:'生活费',
type:'bar',
stack:'总量',
itemStyle:{
normal:{
label:{
show:true,
position:'inside'
}
}
},
data:[2900,1200,300,200,900,300],
},
]
};
标签：bar,name,show,type,配置,data,柱状图,详情,true 来源： https://www.cnblogs.com/lixianhui/p/16284995.html