Vue 中使用vue2-highcharts实现top功能的示例

使用vue2-highcharts实现top功能的完整攻略分为以下步骤：

步骤一：安装vue2-highcharts

在项目中需要使用到vue2-highcharts，所以首先需要安装它。可以使用npm安装，命令如下：

npm install --save highcharts@6.1.0 vue2-highcharts@0.11.3

安装完成后，在main.js中引入并注册：

import HighchartsVue from 'vue2-highcharts';
Vue.use(HighchartsVue);

步骤二：构建基本的图表组件

本例中需要展示top10的柱状图。用Highcharts构建一个基本的柱状图组件：

<template>
  <div>
    <highcharts :options="chartOptions"></highcharts>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chartOptions: {
        chart: {
          type: 'column'
        },
        title: {
          text: 'Top 10 Sales'
        },
        xAxis: {
          categories: []
        },
        yAxis: {
          title: {
            text: 'Total Sales'
          }
        },
        series: [{
          name: 'Total',
          data: []
        }]
      }
    }
  }
}
</script>

步骤三：获取数据

获取数据并通过Highcharts渲染图表。在钩子函数created中获取数据：

<template>
  <div>
    <highcharts :options="chartOptions"></highcharts>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data () {
    return {
      chartOptions: {
        chart: {
          type: 'column'
        },
        title: {
          text: 'Top 10 Sales'
        },
        xAxis: {
          categories: []
        },
        yAxis: {
          title: {
            text: 'Total Sales'
          }
        },
        series: [{
          name: 'Total',
          data: []
        }]
      }
    }
  },
  created () {
    axios.get('/api/sales/top10')
      .then(response => {
        const data = response.data;
        const categories = [];
        const salesData = [];
        data.forEach(item => {
          categories.push(item.name);
          salesData.push(item.total);
        });
        this.chartOptions.xAxis.categories = categories;
        this.chartOptions.series[0].data = salesData;
      });
  }
}
</script>

在本例中，使用axios来异步请求数据，将返回的结果拆分成categories和salesData，分别作为x轴和y轴数据插入到Highcharts配置中。

示例说明

示例一：轮播展示多组top数据

在使用vue2-highcharts实现top功能的过程中，可以展示每一天、每一周、每一个月的销售排行榜，这些数据可以通过轮播的形式展示出来。在vue中可以使用第三方组件如element-ui来实现这一功能。

在代码中，需要维护一个当前展示的排行榜数据的索引值currentIndex。组件中的数据应如下定义：

<template>
  <div>
    <div>Ranking of {{ rankings[currentIndex].title }}</div>
    <highcharts :options="chartOptions"></highcharts>
    <el-carousel :interval="3000" :loop="false" height="200px" arrow="never" @change="handleChange">
      <el-carousel-item v-for="(item, index) in rankings" :key="index">
        <div>{{ item.title }}</div>
        <highcharts :options="item.options"></highcharts>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentIndex: 0,
      rankings: [
        {
          title: 'Daily Top 10 Sales',
          options: {...}
        },
        {
          title: 'Weekly Top 10 Sales',
          options: {...}
        },
        {
          title: 'Monthly Top 10 Sales',
          options: {...}
        }
      ]
    }
  },
  methods: {
    handleChange (index) {
      this.currentIndex = index;
    }
  }
}
</script>

示例二：按照不同维度展示top值

在vue2-highcharts中可以通过对数据进行处理来达到按照不同维度展示top值的效果。例如，在下面的代码中，可通过传入params中的dimension参数的值来显示不同维度的top10数据：

<template>
  <div>
    <el-radio-group v-model="dimension" size="small" style="margin-bottom: 10px;">
      <el-radio-button label="all">All</el-radio-button>
      <el-radio-button label="province">By Province</el-radio-button>
      <el-radio-button label="category">By Category</el-radio-button>
      <el-radio-button label="product">By Product</el-radio-button>
    </el-radio-group>
    <highcharts :options="chartOptions"></highcharts>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dimension: 'all',
      chartOptions: {
          //...配置省略
      }
    }
  },
  created () {
    axios.get('/api/sales/top10')
      .then(response => {
        const data = response.data;
        const categories = [];
        const salesData = [];
        data.forEach(item => {
          if (this.dimension === 'all') {
            categories.push(item.name);
            salesData.push(item.total);
          } else if (this.dimension === 'province') {
            categories.push(item.province);
            salesData.push(item.total);
          } else if (this.dimension === 'category') {
            categories.push(item.category);
            salesData.push(item.total);
          } else if (this.dimension === 'product') {
            categories.push(item.product);
            salesData.push(item.total);
          }
        });
        this.chartOptions.xAxis.categories = categories;
        this.chartOptions.series[0].data = salesData;
      });
  }
}
</script>

在代码中，我们通过设定dimension的值来决定使用哪一个api来获取数据，然后根据dimension的值来调整数据的处理方式。最后生成的config对象会根据维度不同而分别不同。

以上是使用vue2-highcharts实现top功能的攻略，包括了安装vue2-highcharts、构建基本的图表组件和获取数据三个步骤，并且提供了两个具有实际应用价值的示例说明。