highcharts实现饼形图和柱状图

highcharts实现饼形图和柱状图

1、后端

具体代码就不展示了，就一个查询所有的方法，注意实体类字段名最好取name、y，前端获取数据能直接对应上

2、前端

一，highchars的导入与搭建

npm install highcharts 

二，components下的commons公共目录下新建一个chart.vue文件，用于搭建chart组件的架子

<template>
  <div class="x-bar">
    <div :id="id" :option="option"></div>
  </div>
</template>
<script>
  import HighCharts from 'highcharts'
  export default {
    // 验证类型
    props: {
      id: {
        type: String
      },
      option: {
        type: Object
      }
    },
    mounted() {
      // 静态数据，随页面打开自动创建
      // HighCharts.chart(this.id,this.option)
    },
    methods: {
      // 动态数据，当数据加载完毕再执行创建
      me(){
        HighCharts.chart(this.id,this.option)
      }
    }
  }
</script>

三，chart架子搭好后，开始创建chart-options目录，里面创建options.js用来存放模拟的chart数据

1、饼形图

let Options = function () {
  this.pie = {
    chart: {
      type: 'pie',
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false
    },
    title: {
      text: ''
    },
    tooltip: {
      headerFormat: '{series.name}<br>',
      pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
        },
        showInLegend: true,
        events: {
          click: function (e) {
            // alert($back.val())
            // alert(e.point.url);
            // window.open(e.point.url);
            // location.href = e.point.url;
          }
        }
      },
    },
    series: [{
      name: '',
      colorByPoint: true,
      // 动态接收数据
      data: []
    }]
  }
}

Options.prototype.funcc = function (op) {
  if (op.pie != null) {
    // 复制对象
    this.pie = Object.assign(this.pie, op.pie)
  }
}

export default new Options()

2、柱状图

let Options = function () {
  this.chart = {
    chart: {
      type: 'column'
    },
    title: {
      text: '全球各大城市人口排行'
    },
    subtitle: {
      text: 'Wikipedia'
    },
    xAxis: {
      type: 'category',
      labels: {
        rotation: -45
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: ''
      }
    },
    legend: {
      enabled: false
    },
    tooltip: {
      pointFormat: '人口总量: <b>{point.y:.1f} 百万</b>'
    },
    series: [{
      name: '',
      data: [],
      dataLabels: {
        enabled: true,
        rotation: -90,
        color: '#FFFFFF',
        align: 'right',
        format: '{point.y:.1f}', // :.1f 为保留 1 位小数
        y: 10
      }
    }]
  }
}

Options.prototype.funcc = function (op) {
  if (op.chart != null) {
    // 复制对象
    this.chart = Object.assign(this.chart, op.chart)
    console.log(this.chart)
  }
}

export default new Options()

四，引用chart组件

<template>
  <div class="pie">
    <div id="pie1">
      <x-chart ref="XChart1" :id="id1" :option="option1"></x-chart>
    </div>
    <div id="pie2">
      <x-chart ref="XChart2" :id="id2" :option="option2"></x-chart>
    </div>
  </div>
</template>

<script>
  // 导入chart组件
  import XChart from './chart.vue'
  // 导入定义好的chart模型
  import options from './chart-options/options'
  import options1 from './chart-options/options1'
  const axios = require('axios')
  export default {
    data () {
      let option = options.bar
      return {
        id1: 'pie1',
        option1: null,
        id2: 'pie2',
        option2: null,
      }
    },
    components: {XChart},
    created(){
      //this.findAll()
      this.chartPie1()
      this.chartPie2()
    },
    methods: {
      // 饼图1
      chartPie1 () {
        return new Promise((resolve, reject) => {
          options.funcc({
            pie: {
              title: {
                text: '饼图1name'
              },
              series: [{
                name: '情况占比',
                // p1,p2,p3,p4,p5为百分占比
                data: []
              }]
            }
          })

          axios.get("highchartsapi/highcharts").then(({data}) => {
            options.pie.series[0].data = data;
            console.log("ww"+options.pie.series[0].data)
          })
            .catch(error => {
              console.log(error);
            });
          this.option1 = options.pie
          // console.log(this.option1)
          resolve()
        }).then(resp => {
          // 执行创建饼图
          setTimeout(() => {
            console.info('饼图模板');
            this.$refs.XChart1.me();
          }, 500);
        })
      },
      // 柱状图
      chartPie2(){
        return new Promise((resolve, reject) => {
          options1.funcc({
            chart: {
              title: {
                text: '人口 (百万)'
              },
              series: [{
                name: '总人口',
                data: [
                ]
              }]
            }
          })
          axios.get("highchartsapi/highcharts").then(({data}) => {
            options1.chart.series[0].data = data;
            console.log("ww"+options1.chart.series[0].data )
          })
            .catch(error => {
              console.log(error);
            });
          this.option2 = options1.chart
          console.log(this.option2)
          resolve()
        }).then(resp => {
          // 执行创建饼图
          setTimeout(() => {
            console.info('柱状图模板');
            this.$refs.XChart2.me()
          }, 500);
        }).catch(resp =>{
          // console.log("2222"+resp)
        })
      }
    }
  }
</script>