1.调接口获取数据
function getProducChart() {
const HTMLElement = document.getElementById(`paiming_chart`) as HTMLElement;
const myChart = echarts.init(HTMLElement);
//虚拟数据
const x: any = [
"1 周一",
"2 周二",
"3 周三",
"4 周四",
"5 周五",
"6 周六",
"7 周七",
"8 周八",
"9 周一二三四五六七八",
];
const y: any = [10, 9, 8, 7, 6, 5, 4, 3, 2];
const option = paimingBar(x, y);// 图表的配置项
carouselFn(option, myChart, 2000, x, y);
}2.option配置项
重点代码在这：
a.利用滚动轴轮播，可拖拽：
b.固定Y轴刻度标签宽度
全部代码：
function paimingBar(x: any, y: any) {
return {
grid: {
top: 0,
left: 86, // 用于排名左对齐！！！
right: 5,
bottom: 10,
containLabel: true,
},
tooltip: {
show: false,
},
xAxis: {
type: "value",
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: { show: false },
},
yAxis: [
// 1.文字内容
{
type: "category",
nameLocation: "end",
position: "left",
axisLabel: {
color: "#fff",
interval: 0,
formatter: function (value: any) {
// 找到当前对应的序号
let curClickIndex = Number(value.match(/^[^\s]+/)[0]);
let res = value.split(" ")[1];
let formatValue = res.length > 5 ? res.slice(0, 5) + "..." : res; // 超过五个省略号
return formatValue;
},
// 以下用于y轴左对齐！！！
inside: true, // 标签刻度朝内
margin: 0, // 清除默认间距
padding: [0, 10, 0, 0], // 右边内边距10
textStyle: {
align: "right", // 文字右对齐
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
data: x,
inverse: true,
},
// 2.排名序号
{
type: "category",
nameLocation: "end",
position: "left",
offset: 86, // y轴位置的偏移量
axisLabel: {,
color: "#fff",
interval: 0,
formatter: function (value: any) {
// 找到当前对应的序号
let curClickIndex = Number(value.match(/^[^\s]+/)[0]);
if (curClickIndex === 1) {
// 给到对应样式
return `{a|${curClickIndex}}`;
} else if (curClickIndex === 2) {
return `{c|${curClickIndex}}`;
} else if (curClickIndex === 3) {
return `{d|${curClickIndex}}`;
} else {
return `{e|${curClickIndex}}`;
}
},
rich: {
a: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
borderColor: "black",
borderRadius: 10,
borderWidth: 1,
align: "center",
verticalAlign: "middle",
lineHeight: 20,
width: 18,
height: 18,
backgroundColor: "red",
color: "black",
},
c: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
borderColor: "black",
borderRadius: 10,
borderWidth: 1,
align: "center",
verticalAlign: "middle",
width: 18,
height: 18,
backgroundColor: "#f39a23",
color: "black",
lineHeight: 20,
},
d: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
borderColor: "black",
borderRadius: 10,
borderWidth: 1,
align: "center",
verticalAlign: "middle",
width: 18,
height: 18,
backgroundColor: "#95f204",
color: "black",
lineHeight: 20,
},
e: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
borderColor: "black",
borderRadius: 10,
align: "center",
verticalAlign: "middle",
width: 18,
height: 18,
lineHeight: 20,
},
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
data: x,
inverse: true,
},
// 3.右侧数据
{
type: "category",
position: "right",
data: y,
axisTick: "none",
axisLine: {
show: false,
},
axisLabel: {
show: true,
color: "#fff",
fontSize: 12,
interval: 0,
formatter: function (value: any) {
return `${value} 个`;
},
},
inverse: true,
},
],
// 关键代码-靠滚动轴滚动
dataZoom: [
{
yAxisIndex: [0, 1, 2], // 由于这里用到三个y轴
show: false,
type: "inside",
startValue: 0,
endValue: 4,
zoomOnMouseWheel: false,
moveOnMouseWheel: true,
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
},
],
series: [
{
name: "",
type: "bar",
barWidth: 12,
showBackground: true,
backgroundStyle: {
color: "rgba(21,136,209,0.1)",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1893FE", //渐变1
},
{
offset: 1,
color: "#1EE3E8", //渐变2
},
]),
},
data: y,
z: 2,
zlevel: 0,
barGap: "-100%",
label: {
show: false,
position: "right",
textStyle: {
color: "#ddd",
},
formatter: function (p: any) {
return p.value;
},
},
},
],
};
}3.自动滚动方法
function carouselFn(option: any, myChart: any, t: any, x: any, y: any) {
option && myChart.setOption(option);
let kk = setInterval(() => {
// 先放这两句避免卡顿，每次向后滚动一个
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
// 到底后添加新数据
if (option.dataZoom[0].endValue == option.yAxis[0].data.length) {
x = x.concat(x);
y = y.concat(y);
// 有三个轴
option.yAxis[0].data = x;
option.yAxis[1].data = x;
option.yAxis[2].data = y;
option.series[0].data = y;
}
option && myChart.setOption(option);
}, t);
myChart.on("mouseover", (params: any) => {
// 鼠标悬浮，停止自动轮播
if (kk) clearInterval(kk);
});
myChart.on("mouseout", (params: any) => {
// 鼠标移出，重新开始自动轮播
if (kk) clearInterval(kk);
kk = setInterval(() => {
// 先放这两句避免卡顿，每次向后滚动一个
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
// 到底后添加新数据
if (option.dataZoom[0].endValue == option.yAxis[0].data.length) {
x = x.concat(x);
y = y.concat(y);
// 有三个轴
option.yAxis[0].data = x;
option.yAxis[1].data = x;
option.yAxis[2].data = y;
option.series[0].data = y;
}
option && myChart.setOption(option);
}, t);
});
}
标签：滚动,轮播,show,color,柱状图,false,data,any,option From： https://blog.csdn.net/qq_48650094/article/details/143573061