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

Question

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

有什么需要注意的点吗？

Answer 1

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/#/