Vue.js 重新在Vuejs应用上绘制Highcharts

在本文中，我们将介绍如何在Vuejs应用上重新绘制Highcharts。Highcharts是一个功能强大且易于使用的JavaScript图表库，提供了丰富的图表类型和交互功能。Vue.js是一个流行的JavaScript框架，用于构建用户界面。结合Vue.js和Highcharts，我们可以轻松地在Vuejs应用程序中创建和管理交互式图表。

阅读更多：Vue.js 教程

1. 创建Vuejs项目

首先，我们需要创建一个基本的Vuejs项目。可以使用Vue CLI来快速设置一个新的Vue项目。

运行以下命令来安装Vue CLI：

npm install -g @vue/cli

然后，通过运行以下命令创建一个新的Vue项目：

vue create my-vue-app

安装完成后，进入项目目录：

cd my-vue-app

2. 安装Highcharts

接下来，我们需要安装Highcharts。运行以下命令来安装Highcharts：

npm install highcharts --save

安装完成后，我们可以在Vue组件中引入Highcharts，并使用它来创建图表。

3. 创建Highcharts图表组件

在Vue项目中，可以使用单文件组件来组织代码。我们来创建一个名为”Chart”的组件。

在src/components目录下创建一个名为”Chart.vue”的文件，并添加以下内容：

<template>
  <div id="chart-container"></div>
</template>

<script>
import Highcharts from 'highcharts';

export default {
  mounted() {
    Highcharts.chart('chart-container', {
      // Highcharts配置选项
      chart: {
        // 图表类型
        type: 'bar'
      },
      title: {
        text: '示例图表'
      },
      series: [{
        // 数据系列
        name: '数据系列',
        data: [4, 8, 15, 16, 23, 42]
      }]
    });
  }
}
</script>

<style scoped>
#chart-container {
  height: 400px;
}
</style>

在上面的代码中，我们首先引入了Highcharts库。然后，在组件的mounted钩子中，我们创建了一个Highcharts图表，并将其渲染到id为”chart-container”的元素中。

接下来，我们需要在父组件中使用Chart组件来绘制图表。

4. 使用Chart组件

在父组件中，我们可以像使用普通的Vue组件一样使用Chart组件。

在src/App.vue文件中，添加以下内容：

<template>
  <div id="app">
    <h1>Vue.js Redraw Highcharts on Vuejs app</h1>
    <Chart />
  </div>
</template>

<script>
import Chart from './components/Chart.vue';

export default {
  components: {
    Chart
  }
}
</script>

<style>
#app {
  text-align: center;
}
h1 {
  font-size: 24px;
  margin-bottom: 20px;
}
</style>

在上面的代码中，我们将Chart组件添加到App组件中，并在页面上显示一个标题。

运行以下命令来启动Vue开发服务器：

npm run serve

现在，你可以在浏览器中访问http://localhost:8080来查看你的Vuejs应用，并看到一个显示示例图表的页面。

5. 重新绘制Highcharts图表

在Vuejs应用中重新绘制Highcharts图表是相对简单的。我们可以在Vue组件中使用Highcharts的API来修改图表的选项，并使用chart.update()方法来重新绘制图表。

下面是一个示例，展示如何在点击按钮时重新绘制Highcharts图表：

<template>
  <div>
    <div id="chart-container"></div>
    <button @click="redrawChart">重新绘制图表</button>
  </div>
</template>

<script>
import Highcharts from 'highcharts';

export default {
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.chart = Highcharts.chart('chart-container', {
      chart: {
        type: 'bar'
      },
      title: {
        text: '示例图表'
      },
      series: [{
        name: '数据系列',
        data: [4, 8, 15, 16, 23, 42]
      }]
    });
  },
  methods: {
    redrawChart() {
      this.chart.update({
        chart: {
          type: 'line'
        },
        title: {
          text: '新的图表类型'
        },
        series: [{
          name: '新的数据系列',
          data: [1, 2, 3, 4, 5]
        }]
      });
    }
  }
}
</script>

<style scoped>
#chart-container {
  height: 400px;
}
</style>

在上面的代码中，我们添加了一个按钮，并在点击按钮时调用redrawChart方法。在这个方法中，我们使用this.chart.update()方法来更新图表的选项，并重新绘制图表。

现在，当你点击按钮时，图表将会以新的图表类型和新的数据系列重新绘制。