vue：使用echarts

原创已于 2022-03-24 18:10:00 修改 · 420 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #开发语言

于 2022-03-03 14:37:24 首次发布

vue 专栏收录该内容

36 篇文章

订阅专栏

本文展示了如何利用ECharts库创建一个以Y轴为数据的柱状图，包括多个数据系列。当数据过多导致显示不全时，通过设置axisLabel属性，可以调整坐标轴标签的显示，确保最小值和最大值始终可见。示例代码中详细地配置了图表的各个组件，如网格、X轴、Y轴和数据系列，并提供了标签选项以增强图表的可读性。

需求：使用echarts绘制一个以y轴为数据的柱状图

<template>
  <div class="mt-6">
    <div id="myChart" style="width: 100%; height: calc(100vh - 300px);"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

const labelOption = {
  show: true,
  // rotate: -1,
  // align: "left",
  verticalAlign: "middle",
  // position: "insideBottom",
  // distance: 15,
  formatter: "{a}",
  // fontSize: 16,
  // color:'#fff'
};
export default {
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: [
            "2022/2/2",
            "2022/2/10",
            "2022/2/15",
            "2022/2/20",
            "2022/2/25",
          ],
        },
        series: [
          {
            name: "鱼眼",
            type: "bar",
            data: [100, 23, 233, 455, 322, 566],
            label: labelOption,
            
          },
          {
            name: "吃饭",
            type: "bar",
            data: [183, 289, 134, 170, 144, 230],
            label: labelOption,
          },
          {
            name: "睡觉",
            type: "bar",
            data: [125, 238, 310, 194, 141, 87],
            label: labelOption,
          },
          {
            name: "学习",
            type: "bar",
            data: [125, 238, 310, 194, 141, 607],
            label: labelOption,
          },
          {
            name: "娱乐",
            type: "bar",
            data: [195, 238, 310, 124, 141, 607],
            label: labelOption,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

当数据过多，显示不全的时候，在相应的轴上加上axisLabel属性

axisLabel: {
            interval:0,
            show: true,
            textStyle: {
              // color: "#a9a9a9", //更改坐标轴文字颜色
              fontSize: 10 //更改坐标轴文字大小
            },
            rotate: 40,
            
            showMinLabel: true,//显示最小值
            showMaxLabel: true,//显示最大值
          },