echarts——纵向柱状图

需求

• 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>