3d饼图

 

一：

highcharts在vue中的使用和配置方法

npm install vue-highcharts --save

由于vue-highcharts依赖于highcharts，我们还需要安装后者

npm install highcharts --save

 

二：

安装完成后，进入项目main.js进行配置：

import highcharts from 'highcharts'

import VueHighCharts from 'vue-highcharts'

import highcharts3d from 'highcharts/highcharts-3d'

highcharts3d(highcharts)

OK，到此为止已经在vue中配置好highcharts,接下来根据API绘制一份3d饼图

 

新建一个饼图的组件：

<template>
  <div class="container">
    <div id="yeartest" />
  </div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
  props: {
    // id: {
    //   type: String
    // },
    // option: {
    //   type: Object
    // }
  },
  data() {
    return {

    }
  },
  mounted() {
    this.pieChart()
  },
  methods: {
    pieChart() {
      const yeartest = document.getElementById('yeartest')
      var option1 = {
        credits: { enabled: false },
        chart: {
          type: 'pie', // 饼图
          options3d: {
            enabled: true, // 使用3d功能
            alpha: 60, // 延y轴向内的倾斜角度
            beta: 0
          }
        },
        // colors: ['#096fd3', '#fd7523'], // 饼图颜色设置
        title: {
          text: '年度完成进度'// 图表的标题文字
        },
        subtitle: {
          text: ''// 副标题文字
        },
        // tooltip: {
        //   pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        // },
        plotOptions: {
          pie: {
            allowPointSelect: true, // 每个扇块能否选中
            cursor: 'pointer', // 鼠标指针
            depth: 30, // 饼图的厚度
            dataLabels: {
              enabled: true,// 是否显示饼图的线形tip
              format: '{point.name}{point.percentage:.2f} %',
            }
          },
        },
        series: [
          {
            type: 'pie',
            name: '进度', // 统一的前置词,非必须
            data: [
              ['已经完成电量', 12], // 模块名和所占比，也可以{name: '测试1',y: 12}
              ['未完成电量', 23]
            ]
          }
        ]
      }
      HighCharts.chart(yeartest, option1)
    }
  }
}
</script>

<style scoped>
  /* 容器 */
  .container {
    width: 500px;
    height: 500px;
  }
</style>

 

 

<template>
  <div class="container">
    <div id="mothtest" />
  </div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
  props: {
    // id: {s
    //   type: String
    // },
    // option: {
    //   type: Object
    // }
  },
  data() {
    return {

    }
  },
  mounted() {
    this.pieChart()
  },
  methods: {
    pieChart() {
      const mothtest = document.getElementById('mothtest')
      var option1 = {
        credits: { enabled: false },
        chart: {
          backgroundColor: 'rgba(255, 255, 255, 0)',  //图例背景颜色
          type: 'pie', // 饼图
          options3d: {
            enabled: true, // 使用3d功能
            alpha: 60, // 延y轴向内的倾斜角度
            beta: 0
          }
        },
        // colors: ['#096fd3', '#fd7523'], // 饼图颜色设置
        title: {
          text: '本月完成进度',// 图表的标题文字
          align: 'center', //水平方向位置
          verticalAlign: 'top', //垂直方向位置
          x: 0, //距离x轴的距离
          y: 100, //距离Y轴的距离
          style: {
            // color: '#000',      //字体颜色
            fontSize: "14px",   //字体大小
            fontWeight: 'bold'
          }
        },
        subtitle: {
          text: ''// 副标题文字
        },
        // tooltip: {
        //   pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        // },
        plotOptions: {
          pie: {
            allowPointSelect: true, // 每个扇块能否选中
            cursor: 'pointer', // 鼠标指针
            depth: 30, // 饼图的厚度
            dataLabels: {
              enabled: true, // 是否显示饼图的线形tip
              distance: 0,
              format: '{point.name}<br/>{point.percentage:.2f} %'
            }
          }
        },
        series: [
          {
            type: 'pie',
            name: '进度', // 统一的前置词,非必须
            data: [
              ['已经完成电量', 12], // 模块名和所占比，也可以{name: '测试1',y: 12}
              ['未完成电量', 23]
            ]
          }
        ]
      }
      HighCharts.chart(mothtest, option1)
    }
  }
}
</script>

<style scoped>
  /* 容器 */
  .container {
    width: 550px;
    height: 550px;
  }
</style>

 

 

 

 

 

 

<html>
<head>
    <meta charset="UTF-8" />
    <title>3d饼图</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script type="text/javaScript">

    var pieColors = (function () {     // 此处是基础着色，如果设置好颜色，此处就没有看的必要了
        var colors =[],
            base = Highcharts.getOptions().colors[0],
            i;

        for (i = 0; i < 10; i += 1) {
            // Start out with a darkened base color (negative brighten), and end
            // up with a much brighter color
            colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
        }
        return colors;
    }());
    $(document).ready(function() {
        var chart = {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        };
        var title = {
            text: '测试占有率'
        };
        var tooltip = {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        };
        var colors=['#FF0000','#00FF00','#0000FF','#FFFF00','#00FFFF','#FF00FF'];    //设置饼图颜色
        var credits =  {
            enabled: false    //禁用版权url    此处不设置，  会显示highecharts.com
        };
        var plotOptions = {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 25, //饼图厚度
                // color:pieColors,
                dataLabels: {
                    distance: 20,//设置引导线的长度
                    // color:'red',//全局设置字体颜色
                    enabled: true,
                    // format: '{point.name}',
                    formatter: function() {     //设置字体与引导线和饼图颜色一致
                        if(this.point.name == '中国'){
                            return '<span style="color:#FF0000">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
                        }else if(this.point.name == '美国'){
                            return '<span style="color:#00FF00">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
                        }else if(this.point.name == '俄罗斯'){
                            return '<span style="color:#0000FF">['+ this.point.name +' '+Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
                        }else if(this.point.name == '英国'){
                            return '<span style="color:#FFFF00">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
                        }else if(this.point.name == '朝鲜'){
                            return '<span style="color:#00FFFF">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
                        }else if(this.point.name == '日本'){
                            return '<span style="color:#FF00FF">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
                        }
                    }
                    /* style: {
                         fontSize: '10px',//设置字体大小
                         fontFamily: 'Verdana, sans-serif'
                     }*/
                }
            }

        };
        var series= [{
            type: 'pie',
            name: 'Browser share',
            startAngle: 180,//调整饼图的角度   方向：顺时针
            data: [
                ['中国',   45.0],
                ['美国',       16.8],
                {
                    name: '俄罗斯',
                    y: 22.8,
                    sliced: true,
                    selected: true
                },
                ['英国',    8.5],
                ['朝鲜',     6.2],
                ['日本',   0.1]
            ]
        }];

        var json = {};
        json.chart = chart;
        json.title = title;
        json.tooltip = tooltip;
        json.colors = colors;   // 设置饼图颜色
        json.credits = credits;
        json.plotOptions = plotOptions;
        json.series = series;
        $('#container').highcharts(json);
    });
</script>
</body>
</html>