Highcharts

Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。

Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。

饼图

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: LMJ
 * @Date: 2021-09-07 15:05:21
 * @LastEditors: LMJ
 * @LastEditTime: 2021-09-17 13:16:18
-->
<template>
  <div style="width: 100%; height: 100%">
    <highcharts :options="chartOptions" :callback="myCallback" style="min-width: 450px; min-height: 380px; "></highcharts>
	
  </div>
</template>

<script>

import { Chart } from "highcharts-vue";
import { color, reduce } from 'highcharts';
export default {
  components: {
    highcharts: Chart
  },
  data() {
    return {
      chartOptions: {
        chart: {
          backgroundColor: 'rgba(255,255,255,0)',
		type: 'pie',
		options3d: {
			enabled: true,
			alpha: 45,
			beta: 0
		}
	},
	title: {
		text: '标题',
          left: "center",
          top: "1.5%",
          style: {
            color: "#000000",

          },
	},
	tooltip: {
		pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			depth: 89,
			dataLabels: {
				enabled: true,
				format: '{point.percentage:.1f} %',
				style: {
					 textOutline: 'none' 
                   }
			}
		}
	},
  credits:{
     enabled: false // 禁用版权信息
},colors: [ '#7cb5ec','#7fb80e', '#ffc000' ,'#d48265'],
	series: [{
		size:'90%',
		type: 'pie',
		name: '占比',
		data: [
			['A.非常有信心',  10.0,],
			['B.比较有信心',   32.50],
			['C.有信心',   25.0],
			{
				name: 'D.当前无信心',
				y: 32.50,
				sliced: true,
				selected: true,
				// 'color': 'Highcharts.getOptions().colors[8]',
			},
			
		]
	}]
      }
    };
  },
  methods: {
    myCallback() {
    //   console.log("this is callback function");
    }
  }
};
</script>

<style scoped lang="scss">
.highcharts-container {
  width:100%;
  height: 100%;
  border: 1px solid #ddd;
  margin: auto;
}

</style>

有图例的

 

<template>
  <div id="mains">
    <div class="title">
      <dv-decoration-3
        :reverse="true"
        style="width: 36px; height: 30px"
      />标题    
<dv-decoration-3 style="width: 36px; height: 30px" />
    </div>
    <highcharts :options="chartOptions" :callback="myCallback" style="min-width: 350px; min-height: 320px; "></highcharts>
  </div>
</template>

<script>

import { Chart } from "highcharts-vue";
import { color } from 'highcharts';
export default {
  components: {
    highcharts: Chart
  },
  data() {
    return {
      chartOptions: {
         chart: {
          backgroundColor: 'rgba(255,255,255,0)',

                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                credits: {
                    enabled: false, //此处配置用来取消highcharts.com的链接
                },
                title: {
                    text: '',
                    
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '{point.percentage:.1f} %',
				style: {
					 textOutline: 'none' 
                   }
                        },
                        showInLegend: true//控制图例显示
                    }
                },
                legend: {
                    itemStyle:{
                        'color':'#5d5d5d'
                    },
                    layout: 'horizontal',
                    align: 'center',
                    x: -20,
                    verticalAlign: 'bottom',
                    y: 140,
                    verticalAlign: 'middle' //图例
                },
                series: [{
                    type: 'pie',
                    name: '',
                    colors: [ '#7cb5ec','#7fb80e', '#ffc000' ,'#d48265'], //图表颜色
                    data: [
                        ['A.视频案例', 55.00,],
                        ['B.文字案例', 7.50],
                        ['C.图片案例', 30.00],
                        ['D.音频案例', 7.50],
                    ]
                }]

      }
    };
  },
  methods: {
    myCallback() {
      console.log("this is callback function");
    }
  }
};
</script>

<style scoped lang="scss">
#mains {
  width: 520px;
  height: 100%;
}
  .title {
    color: #000000;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    white-space: nowrap;
  }


</style>