vue首先安装Highcharts相关依赖

npm install highcharts

柱状图展示组件代码如图所示： piechart.vue

<!--柱状图展示组件-->
<!--@author：Moses-->
<!--@since：2019-10-28-->
<template>
    <div>
<!--        <div width="800px" hight="800px"></div>-->
        <div id =:id class="highcharts-container" width="800px" hight="800px"></div>
    </div>
</template>
<script>
import Highcharts from 'highcharts/highstock'
import HighchartsMore from 'highcharts/highcharts-more'
import HighchartsDrilldown from 'highcharts/modules/drilldown'
import Highcharts3D from 'highcharts/highcharts-3d'
// 树状图中的点（矩形）的颜色是由和它同级的数据点的值来计算的。
// 如果需要 colorAxis 功能则需额外的引入http://cdn.hcharts.cn/highcharts/modules/heatmap.js 。
import HeatMap from 'highcharts/modules/heatmap'
import Exporting from 'highcharts/modules/exporting'
import TreeMap from 'highcharts/modules/treemap'
HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts)
Highcharts3D(Highcharts)
HeatMap(Highcharts)
Exporting(Highcharts)
TreeMap(Highcharts)
export default {
  // props: ['defOptions', 'styles'],
  name: 'highcharts',
  data () {
    return {
      chart: null,
      defOptions: [],
      styles: {},
      id: ''
    }
  },
  methods: {
    initChart () {
      // 根据传进来的style设置宽高
      this.$el.style.width = (this.styles.width || 800) + 'px'
      this.$el.style.height = (this.styles.height || 400) + 'px'
      // this.chart = new Highcharts.Chart(this.$el, this.defOptions)
      this.chart = new Highcharts.Chart(this.id, this.defOptions)
    }
  }
}
</script>
<style>
    .highcharts-container {
        width: 800px;
        height: 400px;
    }
</style>

组件在页面中的使用（“skyorder-serviceorder.vue”）

<!--顾问订单统计-->
<!--@author：Moses-->
<!--@since：2019-10-26-->
<template>
    <el-dialog :visible ="visible" width="66%"  @close="visible = false">
        <template slot="title">
            <div style="line-height: 24px;font-size: 18px;color: #303133">顾问订单统计</div>
            <br>
            <hr>
            <br>
            <!--多条件查询按钮弹出框-->
            <el-popover
                    v-model="visible2"
                    placement="bottom-start"
                    width="300"
                    trigger="click">
                <el-form>
                    <el-form-item label="开始时间" style="margin-bottom: 3px">
                        <el-date-picker v-model="startTime" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间" style="width: 200px"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间" style="margin-bottom: 3px">
                        <el-date-picker v-model="endTime" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间" style="width: 200px"></el-date-picker>
                    </el-form-item>
                    <el-form-item style="float: left">
                        <el-button @click="beforeQuerryAccessLog()" style="padding: 10px 15px">{{ $t('query') }}</el-button>
                        <el-button @click="clear" style="background: #f56c6c;color: #f5f7fa;margin: 0px 0px 0px 10px;padding: 10px 15px">清空</el-button>
                    </el-form-item>
                </el-form>
                <el-button style="background: #ffffff" slot="reference">多条件查询</el-button>
            </el-popover>
            <el-select v-model="selectType" placeholder="请选择" style="width: 120px;background-color: #f5f7fa">
                <el-option
                        v-for="item in selects"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled">
                </el-option>
            </el-select>
            <el-input v-model="select" placeholder="请输入" clearable style="width: 250px"></el-input>
            <el-button @click="beforeQuerryAccessLog()" icon="el-icon-search" type="primary"></el-button>
            <el-button icon="el-icon-refresh" style="background: #ffffff;float:right" @click="getInfo()"></el-button>
        </template>
        <div>
            <x-chart id="chart1" ref="chart"/>
        </div>
        <div>
            <el-table :data="accessInfo" border>
                <el-table-column label="排名" type="index" width="100" align="center"></el-table-column>
                <el-table-column width="300" prop="servicerName" align="center" label="顾问名称"></el-table-column>
                <el-table-column width="250" prop="zoid" align="center" label="订单数量"></el-table-column>
                <el-table-column width="260" prop="znum" align="center" label="产品数量"></el-table-column>
                <el-table-column width="310" prop="zprice" align="center" label="订单金额"></el-table-column>
            </el-table>
        </div>
    </el-dialog>
</template>
<script>
import xChart from './piechart'
export default {
  data () {
    return {
      mixinViewModuleOptions: {
        statisticalDataURL: '/membercenter/skyorder/statisticsserviceorder'
      },
      visible: false,
      id: '',
      startTime: '',
      endTime: '',
      select: '',
      selectType: 1,
      selects: [
        {
          value: 1,
          label: '顾问名称'
        }],
      visible2: false,
      accessInfo: [],
      // 图表参数
      sty: {
        width: 1200,
        height: 400
      },
      options: {
        title: {
          text: '业务时间统计图',
          x: -20 // center
        },
        chart: {
          type: 'column'
        },
        xAxis: {
          categories: []
        },
        yAxis: {
          title: {
            text: '业务时间统计图'
          },
          // 标示线
          plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
          }]
        },
        tooltip: {
          valueSuffix: '元' // 提示信息所带单位
        },
        legend: {
          enabled: false //  禁用图例
        },
        credits: {
          enabled: false // 禁用版权信息
        },
        series: [
          {
            name: '销量',
            data: []
          }
        ]
      }
    }
  },
  components: {
    xChart
  },
  methods: {
    clear () {
      this.startTime = ''
      this.endTime = ''
    },
    init () {
      this.visible = true
      this.getInfo()
    },
    beforeQuerryAccessLog () {
      this.visible2 = false
      this.getInfo()
    },
    // 获取访问记录数据
    getInfo () {
      this.options.xAxis.categories = []
      this.options.series[0].data = []
      this.$http.get(this.mixinViewModuleOptions.statisticalDataURL, {
        params: {
          select: this.select,
          startTime: this.startTime,
          endTime: this.endTime
        }
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          this.dataForm = []
          return this.$message.error(res.msg)
        }
        this.accessInfo = res.data
        this.clear()
        if (this.accessInfo.length >= 9) {
          for (let i = 0; i < 9; i++) {
            if (this.accessInfo[i].servicerName !== null) {
              this.options.xAxis.categories.push(this.accessInfo[i].servicerName)
            } else {
              this.options.xAxis.categories.push('')
            }
            this.options.series[0].data.push(this.accessInfo[i].zprice)
          }
        } else {
          for (let i = 0; i < this.accessInfo.length; i++) {
            if (this.accessInfo[i].servicerName !== null) {
              this.options.xAxis.categories.push(this.accessInfo[i].servicerName)
            } else {
              this.options.xAxis.categories.push('')
            }
            if (this.accessInfo[i].zprice !== null) {
              this.options.series[0].data.push(this.accessInfo[i].zprice)
            } else {
              this.options.series[0].data.push('')
            }
          }
        }
        this.$refs.chart.defOptions = this.options
        this.$refs.chart.styles = this.sty
        this.$refs.chart.id = 'chart1'
        this.$refs.chart.initChart()
        console.log(this.options.xAxis.categories)
        console.log(this.options.series[0].data)
      }).catch(() => {
      })
    }
  }
}
</script>

链接: https://fly63.com/article/detial/6151