Vue 中使用 Highcharts 饼状图

版权声明：本文为博主原创文章，转载请注明作者和出处，如有错误，望不吝赐教。 https://blog.csdn.net/weixin_41888813/article/details/88013445

Highcharts 和 Echarts 就像是 Office 和 WPS 的关系。

不过这也是暂时的，相信Echarts会做得更好，谁说国产的东西比不过外国。

重点是：Echarts免费，Highcharts用于商业用途时还需要授权，个人用时虽然免费，但会在图表上显示logo，有洁癖的话就只能绕道了。

---

一，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数据

let $back = $("#myBack");
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();

四，引用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 'components/chart.vue'
// 导入定义好的chart模型
import options from './chart-options/options'
export default {
  data() {
    let option = options.bar
    return {
      id1: 'pie1',
      option1: null,
      id2: 'pie2',
      option2: null,
    }
  },
  components: {XChart}，
  methods: {
    // 饼图1
    chartPie1(){
        return new Promise((resolve, reject) => {
           options.funcc({
              pie: {
                 title: {
                  text: '饼图1name'
              },
              series: [{
                  name: '情况占比',
                  // p1,p2,p3,p4,p5为百分占比
                  data: [
                      ['A', p1],
                      ['B',   p2],
                      ['C',   p3],
                      {
                         name: 'D',
                         y: p4,
                         url:'',
                         sliced: true, // 突出显示这个点（扇区），用于强调。
                         selected: true
                     },
                     ['E',    p5],
                  ]
               }]
             }});
          let option1 = options.pie;
          this.option1 = option1;
          resolve();
       }).then(resp => {
          // 执行创建饼图
          this.$refs.XChart1.me();
       })
    }, 
  }
}
</script>