需求
- 1、对数据进行从大到小排序
- 2、不同区间的数值的柱展示不同的渐变色
- 3、每隔1S图表向左平移一个柱,同时右边新增一个柱
- 4、当鼠标移入图表停止切换,鼠标移出开启切换
<template>
<div class="w100 h100">
<div ref="bar" class="w100 h100"></div>
</div>
</template>
<script>
import { ququ } from "../../public/static/theme/ququ";
export default {
props: {
msg: String,
},
data() {
return {
barChart: null,
barData: [
{
name: "商家1",
value: 12,
},
{
name: "商家2",
value: 22,
},
{
name: "商家3",
value: 10,
},
{
name: "商家4",
value: 32,
},
{
name: "商家5",
value: 25,
},
{
name: "商家6",
value: 16,
},
{
name: "商家7",
value: 52,
},
{
name: "商家8",
value: 33,
},
{
name: "商家9",
value: 19,
},
{
name: "商家10",
value: 36,
},
{
name: "商家11",
value: 24,
},
{
name: "商家12",
value: 42,
},
{
name: "商家13",
value: 29,
},
{
name: "商家14",
value: 33,
},
],
timerId: null, // 定时器
// 默认显示前 9 条,然后定时向左平移
start: 0, //默认区域缩放的起始值为0
end: 8, //默认区域缩放的结束值为8
};
},
mounted() {
/**
* 需求:
* 1、对数据进行从大到小排序
* 2、不同区间的数值的柱展示不同的渐变色
* 3、每隔1S图表向左平移一个柱,同时右边新增一个柱
* 4、当鼠标移入图表停止切换,鼠标移出开启切换
*/
this.init();
this.getData();
this.openTimer();
// 监听屏幕大小变化
window.addEventListener("resize", this.screenResize);
// 一进来主动调取屏幕适配
this.screenResize();
},
beforeDestroy() {
clearInterval(this.timerId);
window.removeEventListener("resize", this.screenResize);
},
methods: {
// 初始化图表
init() {
this.$echarts.registerTheme("ququ", ququ);
this.barChart = this.$echarts.init(this.$refs.bar, "ququ");
let initOption = {
// 标题
title: {
text: "▍纵向柱状图", // ▍ 任意打一个字,调出搜狗输入法卡片,右键单击——表情符号——符号大全
left: 40,
top: 40,
textStyle: {
color: "#fff",
},
},
// 坐标轴
grid: {
top: "15%",
left: "5%",
right: "3%",
bottom: "5%",
containLabel: true, //是否包含坐标轴的文字
},
// X轴
xAxis: {
type: "category",
},
// Y轴
yAxis: {
type: "value",
},
// 图表内容
series: [
{
type: "bar", // 图表类型
// 柱上面的数值配置
label: {
show: true, // 显示值
position: "top", // 显示位置
color: "white",
},
// 每一个条目的样式配置
itemStyle: {
// 不同的柱呈现不同的渐变色 1、指明颜色渐变的方向 2、指明不同百分比之下颜色的值
color: (arg) => {
if (arg.value > 30) {
return new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: "#5050ee" },
{ offset: 1, color: "#ab6ee5" },
]);
} else {
return new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: "green" },
{ offset: 1, color: "yellow" },
]);
}
},
},
},
],
// 提示框设置
tooltip: {
trigger: "axis", //触发类型——坐标轴
// 鼠标移入条目下面的背景
axisPointer: {
type: "line",
z: 0,
lineStyle: {
color: "rgba(225,225,225,.3)",
},
},
},
};
this.barChart.setOption(initOption);
// 监听鼠标移入移出事件
this.barChart.on("mouseover", (params) => {
console.log(params);
clearInterval(this.timerId);
});
this.barChart.on("mouseout", () => {
this.openTimer();
});
},
// 获取并处理数据,然后渲染图表
getData() {
// 排序
let list = this.barData.sort((a, b) => b.value - a.value);
// 当前X、Y轴数据
let barDataX = list.map((item) => item.name);
let barDataY = list.map((item) => item.value);
let dataOption = {
xAxis: {
data: barDataX,
},
// 图表内容
series: [
{
data: barDataY, // 数据
},
],
/**
* 需求:柱状图每秒向左平移一个
* 1、利用区域缩放功能,利用定时器自动模拟手动拉取
* 2、通过改变startValue和endValue当前控制柱状图显示
*/
// 区域缩放
dataZoom: {
show: false, // 隐藏下方的拉动条,利用定时器自动模拟手动拉取
startValue: this.start,
endValue: this.end,
},
};
// 生成图表
this.barChart.setOption(dataOption);
},
// 定时切换当前显示的柱的索引
openTimer() {
if (this.timerId) {
clearInterval(this.timerId);
}
this.timerId = setInterval(() => {
this.start++;
this.end++;
if (this.end > this.barData.length - 1) {
this.start = 0;
this.end = 8;
}
this.getData();
}, 1000);
},
// 监听屏幕变化
screenResize() {
this.$nextTick(() => {
// 获取图表区域的宽度,作为基准值来设置其他需要动态改变的尺寸
let width = this.$refs.bar.offsetWidth;
let size = (width / 100) * 3.6; // 定义一个基准尺寸
let screenOption = {
// 标题
title: {
textStyle: {
fontSize: size, //标题大小
},
},
// 图表内容
series: [
{
barWidth: size, // 柱的宽度
// 每一个条目的样式配置
itemStyle: {
barBorderRadius: [size / 2, size / 2, 0, 0], // 圆角
},
},
],
// 提示框设置
tooltip: {
// 鼠标移入条目下面的背景
axisPointer: {
lineStyle: {
width: size,
},
},
},
};
this.barChart.setOption(screenOption);
// 更新图表
this.barChart.resize();
});
},
},
};
</script>
<style scoped lang="less"></style>