ECharts柱状图属性配置
因为是在vue中使⽤的，所以需要现在main.js中引⼊并注册
import echarts from'echarts'
Vue.prototype.$echarts = echarts
这些属性是在官⽹看配置项外加看视频，然后⼀点⼀点去整理的。
可能不多，不过基本够⽤了。
let myChart1 =this.$echarts.ElementById("box"));
myChart1.setOption({
title:{
text:"某地区蒸发量和降⽔量",
// 副标题
subtext:"纯属虚构",
// ⽔平⽅向位置
left:"center"
// title背景颜⾊
// backgroundColor:"#000000"
// 字体样式
/* textStyle:{
color:"#ffffff"
}, */
// 副标题样式
/* subtextStyle:{
color:"green"
} */
},
tooltip:{
// 可选值，如果是item的话只有⿏标移动到柱状图上才会有提⽰，如果是axis的话移动到当前刻度就会有提⽰        trigger:"axis"
},
legend:{
data:["蒸发量","降⽔量"],
left:"left"
},
// 右侧的切换模块可以切换展⽰⽅式
toolbox:{
show:true,
// ⼯具箱排列⽅式默认horizontal  可选vertical
orient:"horizontal",
//  ⼯具箱字体⼤⼩默认15
itemSize:16,
//  每项之间的间隔
itemGap:10,
//  在⿏标悬浮是是否显⽰标题默认true
showTitle:true,
feature:{
/
/ 直接以表格形式展⽰数据
dataView:{
lang:["数据视图","关闭","刷新"],
show:true,
// 是否只读
readOnly:false,
// ⽂本颜⾊
textColor:"",
// 按钮颜⾊
buttonColor:"",
// 按钮⽂本颜⾊
buttonTextColor:"",
iconStyle:{
// 边框颜⾊
// 边框颜⾊
borderColor:"red",
// 边框宽度
borderWidth:0,
// 边框类型
borderType:"solid",
// ⽂字相关配置
emphasis:{
iconStyle:{
// ⽂本位置
textPosition:"left",
// ⽂本颜⾊
textFill:"red",
// ⽂本对齐⽅式
textAlign:"center",
// ⽂本区域背景填充⾊
textBackgroundColor:"",
// ⽂本区域圆⾓⼤⼩
textBorderRadius:5,
/
/ ⽂本区域内边距
textPadding:0
}
}
}
},
// 区域缩放和区域缩放还原
dataZoom:{
show:true,
// 可选项，默认就是这些内容
title:{
dataZoom:"区域缩放",
dataZoomReset:"区域缩放还原"
}
},
//  显⽰位置
//  left:
magicType:{
show:true,
//  动态切换类型可选值 'line', 'bar', 'stack', 'tiled'            type:["line","bar"]
},
// 还原
restore:{
show:true,
iconStyle:{
// 整体图标颜⾊
// color:"red",
// 边框颜⾊
borderColor:"blue"
}
},
// 保存为图⽚
saveAsImage:{
show:true,
// 保存图⽚类型默认png
type:"png",
// 保存图⽚名称默认使⽤
name:"",
// 保存图⽚背景默认⽩⾊
backgroundColor:"auto",
// 保存图⽚忽略的组件列表默认⼯具栏
excludeComponents:"toolbox"
}
}
},
// 是否可拖拽饼图⽤的⽐较多
// 是否可拖拽饼图⽤的⽐较多
// calculable: true,
// 数据区域缩放
dataZoom:{
show:true,
// 缩放变化是否实时显⽰
realTime:true,
// 起始位置
start:0,
/
/ 结束位置
end:100
},
xAxis:[
{
//  图表两边是否留⽩
// boundaryGap: false,
// 坐标轴类型可选value category time log          type:"category",
// 坐标轴名称
name:"事件线",
// 坐标轴数据
data:[
"1⽉",
"2⽉",
"3⽉",
"4⽉",
"5⽉",
"6⽉",
"7⽉",
"8⽉",
"9⽉",
"10⽉",
"11⽉",
"12⽉"
]
}
],
yAxis:[
{
type:"value"
}
],
series:[
{
name:"蒸发量",
// 图表类型
type:"bar",
// 可视化数据
data:[
2.0,
4.9,
7.0,
23.2,
25.6,
76.7,
135.6,
162.2,
32.6,
20.0,
6.4,
3.3
],
markPoint:{
data:[
// 所有数据的最⼤最⼩值
{ type:"max", name:"最⼤值"},
{ type:"max", name:"最⼤值"},
{ type:"min", name:"最⼩值"}
]
},
markLine:{
data:[
// 平均值
{ type:"average", name:"平均值"}
]
}
},
textstyle{
name:"降⽔量",
type:"bar",
data:[
2.6,
5.9,
9.0,
26.4,
28.7,
70.7,
175.6,
182.2,
48.7,
18.8,
6.0,
2.3
],
markPoint:{
data:[
{ name:"年最⾼", value:182.2, xAxis:7, yAxis:183},
{ name:"年最低", value:2.3, xAxis:11, yAxis:3}
]
},
markLine:{
data:[{ type:"average", name:"平均值"}]
}
}
]
});
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。