如何在Vue 中使用图表库，如VChart？

Question

如何在Vue 中实现 （https://www.visactor.io/vchart/demo/bar-chart/basic-column）这样的柱状图，

有什么需要注意的点吗？

Answer 1

解决方案 Solution

在Vue 3.x 中使用VChart，分两种情况

1. 组合式API，具体可以参考在线demo
2. 选项式API，具体可以参考在线demo
   不同的图表，封装方式都是类似的

代码示例 Code Example

• 组合式API

<script setup lang="ts">
import { onMounted, onBeforeUnmount, onUpdated } from "vue";
import { VChart, IChart, ILineChartSpec } from "@visactor/vchart";

interface LineChartProps {
  colors?: string[];
}

const props = defineProps<LineChartProps>();

let chart: IChart;

function parseSpec(chartProps: LineChartProps) {
  const colors = chartProps.colors ?? [
    "#6690F2",
    "#70D6A3",
    "#B4E6E2",
    "#63B5FC",
    "#FF8F62",
    "#FFDC83",
    "#BCC5FD",
    "#A29BFE",
    "#63C4C7",
    "#F68484",
  ];
  return {
    type: "line",
    data: {
      values: [
        { type: "Nail polish", country: "Africa", value: 4229 },
        { type: "Nail polish", country: "EU", value: 4376 },
        { type: "Nail polish", country: "China", value: 3054 },
        { type: "Nail polish", country: "USA", value: 12814 },
        { type: "Eyebrow pencil", country: "Africa", value: 3932 },
        { type: "Eyebrow pencil", country: "EU", value: 3987 },
        { type: "Eyebrow pencil", country: "China", value: 5067 },
        { type: "Eyebrow pencil", country: "USA", value: 13012 },
        { type: "Rouge", country: "Africa", value: 5221 },
        { type: "Rouge", country: "EU", value: 3574 },
        { type: "Rouge", country: "China", value: 7004 },
        { type: "Rouge", country: "USA", value: 11624 },
        { type: "Lipstick", country: "Africa", value: 9256 },
        { type: "Lipstick", country: "EU", value: 4376 },
        { type: "Lipstick", country: "China", value: 9054 },
        { type: "Lipstick", country: "USA", value: 8814 },
        { type: "Eyeshadows", country: "Africa", value: 3308 },
        { type: "Eyeshadows", country: "EU", value: 4572 },
        { type: "Eyeshadows", country: "China", value: 12043 },
        { type: "Eyeshadows", country: "USA", value: 12998 },
        { type: "Eyeliner", country: "Africa", value: 5432 },
        { type: "Eyeliner", country: "EU", value: 3417 },
        { type: "Eyeliner", country: "China", value: 15067 },
        { type: "Eyeliner", country: "USA", value: 12321 },
        { type: "Foundation", country: "Africa", value: 13701 },
        { type: "Foundation", country: "EU", value: 5231 },
        { type: "Foundation", country: "China", value: 10119 },
        { type: "Foundation", country: "USA", value: 10342 },
        { type: "Lip gloss", country: "Africa", value: 4008 },
        { type: "Lip gloss", country: "EU", value: 4572 },
        { type: "Lip gloss", country: "China", value: 12043 },
        { type: "Lip gloss", country: "USA", value: 22998 },
        { type: "Mascara", country: "Africa", value: 18712 },
        { type: "Mascara", country: "EU", value: 6134 },
        { type: "Mascara", country: "China", value: 10419 },
        { type: "Mascara", country: "USA", value: 11261 },
      ],
    },
    color: {
      type: "ordinal",
      domain: [],
      range: colors,
    },
    title: {
      visible: true,
      text: "Stacked line chart",
    },
    stack: true,
    xField: "type",
    yField: "value",
    seriesField: "country",
    legends: [{ visible: true, position: "middle", orient: "bottom" }],
  } as ILineChartSpec;
}

function createOrUpdateChart(chartProps: LineChartProps) {
  const container = document.getElementById("treemap-container");
  if (container && !chart) {
    chart = new VChart(parseSpec(chartProps), {
      dom: container,
    });

    chart.renderAsync();
    return true;
  } else if (chart) {
    chart.updateSpec(parseSpec(chartProps));
    chart.renderAsync();

    return true;
  }
  return false;
}

onMounted(() => {
  createOrUpdateChart(props);
});

onUpdated(() => {
  createOrUpdateChart(props);
});

onBeforeUnmount(() => {
  if (chart) {
    chart.release();
  }
});
</script>

<template>
  <h1>this is a demo of LineChart</h1>

  <div class="treemap-container" id="treemap-container"></div>
</template>

<style scoped>
.treemap-container {
  width: 100%;
  height: 400px;
}
</style>

• 选项式API：

<script lang="ts">
import { defineComponent } from "vue";
import { VChart, IBarChartSpec, IChart } from "@visactor/vchart";
import type { PropType } from "vue";

interface BarChartProps {
  colors?: string[];
  data?: any[];
}

export default defineComponent({
  props: {
    colors: Object as PropType<BarChartProps["colors"]>,
    data: Object as PropType<BarChartProps["data"]>,
  },

  setup() {
    let chart: IChart | null = null;
    const parseSpec = (chartProps: BarChartProps) => {
      const colors = chartProps.colors;

      return {
        type: "bar",
        data: [
          {
            id: "barData",
            values: chartProps.data,
          },
        ],
        xField: "name",
        yField: "value",
        color: {
          type: "ordinal",
          domain: [],
          range: colors,
        },
      } as IBarChartSpec;
    };

    const createOrUpdateChart = (chartProps: BarChartProps) => {
      const container = document.getElementById("barchart-container");
      if (container && !chart) {
        chart = new VChart(parseSpec(chartProps), {
          dom: container,
        });

        chart.renderAsync();
        return true;
      } else if (chart) {
        chart.updateSpec(parseSpec(chartProps));
        chart.renderAsync();

        return true;
      }
      return false;
    };

    const releaseChart = () => {
      if (chart) {
        chart.release();
        chart = null;
      }
    };

    return {
      createOrUpdateChart,
      releaseChart,
    };
  },

  mounted() {
    this.createOrUpdateChart({ colors: this.colors, data: this.data });
  },

  updated() {
    this.createOrUpdateChart({ colors: this.colors, data: this.data });
  },

  beforeUnmount() {
    this.releaseChart();
  },
});
</script>

<template>
  <h1>this is a demo of barchart</h1>

  <div class="barchart-container" id="barchart-container"></div>
</template>

<style scoped>
.barchart-container {
  width: 100%;
  height: 400px;
}
</style>

结果展示 Results

在线效果参考：https://codesandbox.io/s/viscator-vchart-vue-demo-gmcpq6

相关文档 Related Documentation

github：https://github.com/VisActor/VChart

Answer 2

echart举例

使用如下命令通过 npm 安装 ECharts

npm install echarts --save

安装完成以后，可以将echarts全部引入，这样一来，我们可以在该页面使用echarts所有组件；引入代码如下：

import * as echarts from "echarts";

柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。

设置柱状图的方式，是将配置项中 series 的 type 设为 'bar'，该

最简单的柱状图可以这样设置：

option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};

上图vue完整代码如下：

<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

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

export default {
  data() {
    return {
      xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
      yData: [23, 24, 18, 25, 27, 28, 25], //数据
      myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          data: this.xData
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

其他比如折线图或其他组件库都是类似的

echarts:

https://echarts.apache.org/handbook/zh/basics/import

vChart:

https://v-charts.js.org/#/