This commit is contained in:
duanxiaohai
parent
5097119c70
commit
9a7703b2a1
|
|
@ -36,38 +36,38 @@ let option = {
|
|||
containLabel: true,
|
||||
color: "#ffffff",
|
||||
},
|
||||
// dataZoom: [
|
||||
// {
|
||||
// show: zoomShow,
|
||||
// type: "inside",
|
||||
// startValue: 0,
|
||||
// endValue: 2,
|
||||
// minValueSpan: 2,
|
||||
// maxValueSpan: 2,
|
||||
// yAxisIndex: [0],
|
||||
// zoomOnMouseWheel: false, // 关闭滚轮缩放
|
||||
// moveOnMouseWheel: true, // 开启滚轮平移
|
||||
// moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
|
||||
// },
|
||||
// {
|
||||
// show: zoomShow,
|
||||
// type: "slider",
|
||||
// realtime: true,
|
||||
// startValue: 0,
|
||||
// endValue: 2,
|
||||
// width: "3.5",
|
||||
// height: "80%",
|
||||
// yAxisIndex: [0], // 控制y轴滚动
|
||||
// fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
|
||||
// borderColor: "rgba(17, 100, 210, 0.12)",
|
||||
// backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
|
||||
// handleSize: 0, // 两边手柄尺寸
|
||||
// showDataShadow: false, //是否显示数据阴影 默认auto
|
||||
// showDetail: false, // 拖拽时是否展示滚动条两侧的文字
|
||||
// top: "1%",
|
||||
// right: "5",
|
||||
// },
|
||||
// ],
|
||||
dataZoom: [
|
||||
{
|
||||
show: zoomShow,
|
||||
type: "inside",
|
||||
startValue: 0,
|
||||
endValue: 2,
|
||||
minValueSpan: 2,
|
||||
maxValueSpan: 2,
|
||||
yAxisIndex: [0],
|
||||
zoomOnMouseWheel: false, // 关闭滚轮缩放
|
||||
moveOnMouseWheel: true, // 开启滚轮平移
|
||||
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
|
||||
},
|
||||
{
|
||||
show: zoomShow,
|
||||
type: "slider",
|
||||
realtime: true,
|
||||
startValue: 0,
|
||||
endValue: 2,
|
||||
width: "3.5",
|
||||
height: "80%",
|
||||
yAxisIndex: [0], // 控制y轴滚动
|
||||
fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
|
||||
borderColor: "rgba(17, 100, 210, 0.12)",
|
||||
backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
|
||||
handleSize: 0, // 两边手柄尺寸
|
||||
showDataShadow: false, //是否显示数据阴影 默认auto
|
||||
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
|
||||
top: "1%",
|
||||
right: "5",
|
||||
},
|
||||
],
|
||||
calculable: true,
|
||||
color: "rgba(0, 252, 255, 1)",
|
||||
// label: {
|
||||
|
|
@ -83,6 +83,7 @@ let option = {
|
|||
// }
|
||||
// },
|
||||
xAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
|
|
@ -99,19 +100,13 @@ let option = {
|
|||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
type: "category", //横向显示
|
||||
data: data,
|
||||
// max:10,
|
||||
splitLine: {
|
||||
//分割线配置
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//y轴文字的配置
|
||||
inside: false,
|
||||
// 设置固定的间隔
|
||||
bargap: 0.5,
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
|
|
@ -125,6 +120,22 @@ let option = {
|
|||
type: "solid",
|
||||
},
|
||||
},
|
||||
// 开启滚动
|
||||
scrollbar: {
|
||||
orient: "vertical",
|
||||
// 设置滚动区域的高度
|
||||
height: 100,
|
||||
},
|
||||
|
||||
// max:10,
|
||||
splitLine: {
|
||||
//分割线配置
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -134,29 +145,15 @@ let option = {
|
|||
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
|
||||
// barCategoryGap: "10" /*多个并排柱子设置柱子之间的间距*/,
|
||||
itemStyle: {
|
||||
// barBorderRadius: [0, 20, 20, 0],
|
||||
// color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ // color在这里
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: '#FFF1AD'
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: '#FC5090'
|
||||
// }
|
||||
// ]),
|
||||
// emphasis: {
|
||||
// barBorderRadius: 7
|
||||
// },
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(5, 213, 255, 1)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.98,
|
||||
color: "rgba(5, 213, 255, 0)", // 100% 处的颜色
|
||||
},
|
||||
]), //背景渐变
|
||||
borderRadius: [0, 0, 50, 0], //圆角边框
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "rgba(26, 255, 217, 0)" },
|
||||
{ offset: 1, color: "rgba(0, 183, 255, 1)" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -174,6 +171,18 @@ onMounted(() => {
|
|||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
|
||||
myChart.on("scroll", function (event) {
|
||||
// 根据滚动位置动态计算bargap
|
||||
var bargap = event.scrollData / 10000; // 假设滚动1%对应0.5个bargap
|
||||
myChart.setOption({
|
||||
yAxis: {
|
||||
axisLabel: {
|
||||
bargap: bargap,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// 单图表响应式: 跟随浏览器大小改变
|
||||
// window.addEventListener("resize", () => {
|
||||
// myChart.resize();
|
||||
|
|
|
|||
Loading…
Reference in New Issue