echarts 柱状图

echarts 柱状图的基本使用

基本的逻辑思想就是 首先拿到请求返回的数据，根据数据进行数据的处理，分别展现在x 轴 y轴，以及series上面
第一步 基于准备好的dom 初始化 echarts 实例
第二步进行数据处理
第三步 使用刚指定的配置项和数据显示图表。
具体代码：

js

 // 柱状图
      // 第一步 初始化 使用echarts的init方法进行初始化
      const echarts2 = echarts.init(this.$refs.echarts2);

      // 第二步 进行数据的处理
      const ech2Options = {
        //   图例
        legend: {
          // 图例文字颜色
          textStyle: {
            color: "#333",
          },
        },
        // 配置grid组件，来调整图表在div容器里的位置，以及图表的背景样式；
        grid: {
          left: "20%",
        },
        // 提示框
        tooltip: {
          trigger: "axis",
        },
        // x 轴
        xAxis: {
          // 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。正常显示：
          type: "category",
          // 1 获取到当前的数据，进行遍历
          data: userData.map((item) => item.data),
          // axisLine表示轴线
          axisLine: {
            // 通过 lineStyle 进行一些样式的设置
            lineStyle: {
              color: "#17b3a3",
            },
          },
          /**  坐标轴刻度标签的显示间隔，在类目轴中有效。
           *    可以设置成 0 强制显示所有标签。
           */
          axisLabel: {
            interval: 0,
            color: "#333",
          },
        },
        // y轴
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#17b3a3",
              },
            },
          },
        ],
        color: ["#2ec7c9", "#b6a2de"],
        series: [
          {
            name: "新增用户",
            data: userData.map((item) => item.new),
            type: "bar",
          },
          {
            name: "活跃用户",
            data: userData.map((item) => item.active),
            type: "bar",
          },
        ],
      };

      // 第三步 进行添加
      echarts2.setOption(ech2Options);
    });
  },

html

<el-card style="height: 260px">
          <!-- 柱状图 ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例-->
          <!-- 注意 要给此div加上高度 要不然不能正常显示 -->
          <div ref="echarts2" style="height: 260px"></div>
        </el-card>