echarts category图+dataZoom组件
官方文档滑动条地址 *https://echarts.apache.org/zh/option.html#dataZoom*
记录一下，方便以后复用
DrainageFlow () {
let option = {
grid: {
// 直角坐标系内绘图网格
left: "20", //grid 组件离容器左侧的距离,
top: "20",
right: "40",
bottom: "20",
containLabel: true //gid区域是否包含坐标轴的刻度标签。为true的时候，
// left/right/top/bottom/width/height决定的是图表位置
},
//进度条
xAxis: {
//有
type: "value", //坐标轴类型,分别有：
splitLine: { show: false }, //坐标轴在 grid 区域中的分隔线
axisLabel: { show: false }, //坐标轴刻度标签
axisTick: { show: false }, //坐标轴刻度
axisLine: { show: false } //坐标轴轴线
},
yAxis: {
type: "category",
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
color: "#fff",
fontSize: 16,
show: true,
position: "left",
offset: [150, 150]
},
data: [
"一建",
"二建",
"Ⅲ建",
"水泥厂",
"建材",
"中建二局",
"水泥厂",
"建材",
"中建二局",
"水泥厂",
] //类目数据，在类目轴（type: 'category'）中有效。
//如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
},
series: [
{
name: "%", //系列名称
type: "bar", //柱状、条形图
barWidth: 12, //柱条的宽度,默认自适应
data: [20, 40, 30, 50, 70, 60, 40, 30, 50, 70], //系列中数据内容数组
color: "#04abd1",
label: {
//图形上的文本标签
show: true,
position: "right", //标签的位置
offset: [0, 0], //标签文字的偏移，此处表示向上偏移40
formatter: "{c}{a}", //标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
color: "#fff", //标签字体颜色
fontSize: 12 //标签字 号
},
itemStyle: {
//图形样式
normal: {
//normal 图形在默认状态下的样式;
// barBorderRadius: 10 //柱条圆角半径,单位px.
//按照顺时针左上、右上、右下、左下
color: echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#203e85" //柱图渐变色起点颜色
},
{
offset: 1,
color: "#06faa3" //柱图渐变色终点颜色
}
])
}
},
zlevel: 1 //柱状图所有图形的 zlevel 值,
//zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
},
//进度条背景
{
name: "进度条背景",
type: "bar",
barGap: "-100%", //不同系列的柱间距离，为百分比。
// 在同一坐标系上，此属性会被多个 'bar' 系列共享。
// 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
//并且是对此坐标系中所有 'bar' 系列生效。
barWidth: 12,
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
color: "#073067", //柱条颜色
itemStyle: {
normal: {
// barBorderRadius: 10//圆角
}
}
}
],
dataZoom: {
show: true, // 为true 滚动条出现
// realtime: true,
fillerColor: 'rgba(86,107,134,0.9)',
borderColor: '#2a3547',//边框背景颜色，与背景色相同来假装背景色
handleStyle: {//两侧缩放手柄的样式配置。
borderWidth: 1,//描边线宽。为 0 时无描边。
opacity: 0,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
// borderCap: 'round',//线段末端以圆形结束。v5.0开始才支持
},
left: '95%',
yAxisIndex: [0],//滑动条为竖
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //关闭：拖拽时候显示详细数值信息。
type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
height: '80%', // 表示滚动条的高度，也就是粗细
start: 50, // 表示默认展示20%～80%这一段。
end: 100,
zoomLock: true,//是否锁定选择区域（或叫做数据窗口）的大小。
brushSelect: false,
width: '20',
}
};
this.myChart = echarts.init(document.getElementById("DrainageFlow"));
this.myChart.setOption(option);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
this.myChart.resize();
});
},
推荐阅读
您阅读本篇文章共花了：
发表评论