vue+echarts实现柱状图自动轮播功能
<template>
<div class="bar-echrats" :style="{ width: '500px', height: '400px' }">
<div id="barEchrats" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import echarts from "echarts";
import dataArray from "../../../utils/data.js";
// data.js 数据就是 ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
export default {
data() {
return {
fanFun: null,
time: null,
};
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
this.setIntervalAuploy();
},
myChartCurrentIndex(myChart) {
// 核心代码
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: 0,
});
// 高亮当前图形
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0,
});
// 显示 tooltip
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: 0,
});
},
setIntervalAuploy() {
let myChart = echarts.init(document.getElementById("barEchrats"));
let that = this;
let x = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
let num = 6;
let arr = x.slice(0, num); // 页面一次性只显示个
let app = {
currentIndex: -1,
};
this.time = setInterval(function () {
that.myChartCurrentIndex(myChart);
app.currentIndex++;
// 这是一值都显示个 不能下小于等于5个否则页面会有好几次显示5个
if (arr.length <= 6) {
arr = x.concat(dataArray).slice(app.currentIndex, num++);
}
that.setOptionRnder(myChart, arr);
}, 1000);
that.setOptionRnder(myChart, arr);
myChart.on("mouseover", function (params) {
clearInterval(that.time);
that.myChartCurrentIndex(myChart);
});
myChart.on("mouseout", function (params) {
clearInterval(that.time);
that.time = setInterval(function () {
that.myChartCurrentIndex(myChart);
app.currentIndex++;
if (arr.length <= 6) {
arr = x.concat(dataArray).slice(app.currentIndex, num++);
}
that.setOptionRnder(myChart, arr);
}, 1000);
});
},
setOptionRnder(myChart, arr) {
this.fanFun= [
{
name: "vvvvvvvv",
type: "bar",
barWidth: "15%",
stack: "total",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: "#666",
},
]),
// barBorderRadius: 11,
},
},
data: [140, 180, 215, 320, 396, 420, 140, 180, 140, 180, 215, 320],
},
{
name: "aaaaaaaaa",
type: "bar",
barWidth: "15%",
stack: "total",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#983A3A",
},
{
offset: 1,
color: "#ff00ff",
},
]),
},
},
data: [140, 180, 215, 320, 396, 420, 140, 180, 140, 180, 215, 320],
},
{
name: "bbbbbbbbbbb",
type: "bar",
barWidth: "15%",
stack: "total",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#FF69B4",
},
{
offset: 1,
color: "#BA55D3",
},
]),
},
},
data: [140, 180, 215, 320, 396, 420, 140, 180, 140, 180, 215, 320],
},
{
name: "ccccccccc",
type: "bar",
barWidth: "15%",
stack: "total", // 将多个柱子合成一个柱子
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#0000FF",
},
{
offset: 1,
color: "#B0E0E6",
},
]),
},
},
data: [140, 180, 215, 320, 396, 420, 140, 180, 140, 180, 215, 320],
},
];
let options = {
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
},
grid: {
left: "2%",
right: "4%",
bottom: "14%",
top: "16%",
containLabel: true,
},
legend: {//显示标题
data: ["vvvvvvvv", "aaaaaaaaa", "bbbbbbbbbbb", "ccccccccc"],
right: 10,
top: 12,
textStyle: {
color: "#000",
},
itemWidth: 12,
itemHeight: 10,
// itemGap: 35
},
xAxis: {
type: "category",
data: arr,
nameGap: 50, // 坐标轴名称与轴线之间的距离
position: "bottom", // x轴的位置
offset: 0, // x轴相对于默认位置的偏移
axisLine: {
lineStyle: {
color: "#000",
width: 0.3,
type: "solid",
},
},
axisLabel: {
interval: 0,
rotate: 40,
textStyle: { },
},
},
yAxis: {
type: "value",
axisLine: {
show: true,
lineStyle: {
color: "#000",
width: 0.3,
type: "solid",
},
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.3)",
width: 1,
type: "solid",
},
},
axisLabel: {},
},
series: this.fanFun,
};
myChart.setOption(options);
window.onresize = myChart.resize;
},
},
};
</script>
<style lang="less" scoped>
.bar-echrats {
height: 90%;
}
</style>