echarts——折线图

需求

• 下拉切换显示不同商品的销量趋势图
• 根据屏幕大小适配标题和图例的大小
• 折线图颜色填充

源码

<template>
  <div class="w100 h100">
    <div class="title">
      <select
        name=""
        id=""
        @change="onChange"
        :style="`fontSize:${size}px;height:${size + 4}px`"
      >
        <option v-for="(v, k) in lineData" :key="k" :value="k">
          {{ v.title }}
        </option>
      </select>
    </div>
    <div ref="line" class="w100 h100"></div>
  </div>
</template>

<script>
import { ququ } from "../../public/static/theme/ququ";
export default {
  props: {
    msg: String,
  },
  data() {
    return {
      size: null, //基准字体大小——控制标题和图例的大小
      lineChart: null,
      lineData: {
        goods1: {
          title: "商品1销量趋势",
          data: [
            {
              name: "上海",
              data: [23, 33, 44, 22, 15, 27, 38, 42, 55, 10, 20, 38],
            },
            {
              name: "北京",
              data: [51, 11, 54, 55, 35, 57, 18, 45, 25, 20, 50, 18],
            },
          ],
        },
        goods2: {
          title: "商品2销量趋势",
          data: [
            {
              name: "南京",
              data: [23, 33, 66, 22, 15, 27, 38, 62, 55, 10, 20, 38],
            },
            {
              name: "杭州",
              data: [21, 11, 44, 22, 12, 27, 18, 42, 22, 10, 20, 18],
            },
          ],
        },
      },
      month: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
    };
  },
  mounted() {
    /**
     * 需求：下拉切换显示不同商品的销量趋势图
     */
    this.init();
    this.getData();
    // 监听屏幕大小变化
    window.addEventListener("resize", this.screenResize);
    // 一进来主动调取屏幕适配
    this.screenResize();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.screenResize);
  },
  methods: {
    // 初始化图表
    init() {
      this.$echarts.registerTheme("ququ", ququ);
      this.lineChart = this.$echarts.init(this.$refs.line, "ququ");

      // 拆分option：1、静态配置在初始化的时候先注册，每一次setOption是合并关系
      let initOption = {
        // 坐标轴
        grid: {
          top: "20%",
          left: "5%",
          right: "3%",
          bottom: "5%",
          containLabel: true, //是否包含坐标轴的文字
        },
        // X轴 type设置为category
        xAxis: {
          type: "category",
          boundaryGap: false, // 与坐标轴之间是否需要间距
        },
        // Y轴 type设置为value
        yAxis: {
          type: "value",
        },
        // 图例
        legend: {
          show: true,
          top: 120,
          left: 50,
          icon: "circle", // 图例的形状
          textStyle: {
            color: "#fff",
          },
        },
        // 提示框设置
        tooltip: {
          trigger: "axis",
          show: true,
        },
      };
      this.lineChart.setOption(initOption);
    },
    // 切换商品类型
    onChange(e) {
      this.getData(e.target.value);
    },
    // 获取并处理数据，然后渲染图表
    getData(type) {
      if (!type) {
        type = Object.keys(this.lineData)[0];
      }
      // 定义一组颜色，用于渐变色
      let color1 = ["#fc97af", "#87f7cf", "#f7f494", "#72ccff", "#f7c5a0"];
      //   当前商品的折线图数据
      let data = this.lineData[type].data;
      //   生成series数据
      let seriesArr = data.map((item, index) => {
        return {
          name: item.name, //根据name自动生成图例
          type: "line",
          stack: "Total", // 堆叠图效果，每条折线图stack值相同
          data: item.data,
          smooth: true, // 光滑的弧线
          // 区域填充颜色 —— 渐变色
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: color1[index] },
              { offset: 1, color: "rgba(255, 255, 255, 0.1)" },
            ]),
          },
        };
      });
      // 拆分option：2、data配置在获取导数据的时候注册，每一次setOption是合并关系
      let dataOption = {
        // x轴数据
        xAxis: {
          data: this.month,
        },
        // 折现数据
        series: seriesArr,
      };
      // 生成图表
      this.lineChart.setOption(dataOption);
    },

    // 监听屏幕变化
    screenResize() {
      this.$nextTick(() => {
        // 获取图表区域的宽度，作为基准值来设置其他需要动态改变的尺寸
        let width = this.$refs.line.offsetWidth;
        this.size = (width / 100) * 3.6; // 定义一个基准尺寸

        // 拆分option：3、受屏幕大小影响的配置在屏幕改变的时候set
        let screenOption = {
          // 图例大小
          //   标题大小通过动态style来控制
          legend: {
            itemWidth: this.size / 1.5,
            itemHeight: this.size / 1.5,
          },
        };
        this.lineChart.setOption(screenOption);
        // 更新图表
        this.lineChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="less">
.title {
  position: absolute;
  left: 20px;
  top: 20px;
  color: #fff;
  z-index: 999;

  select {
    height: 40px;
    background: transparent;
    border: none;
    color: white;
    font-weight: 700;
    padding-left: 20px;
    border-left: 8px solid #fff;
    line-height: 30px;
    option {
      background: #333;
    }
  }
}
</style>