Highcharts使用

最新推荐文章于 2024-03-16 15:03:38 发布

GJF_blog

最新推荐文章于 2024-03-16 15:03:38 发布

阅读量445

点赞数

分类专栏：图表

本文链接：https://blog.csdn.net/GJF_blog/article/details/115179949

版权

图表专栏收录该内容

2 篇文章 0 订阅

订阅专栏

快速运用Highcharts实现一个饼状图

1.npm进行highchars的导入，导入完成后就可以进行highchars的可视化组件开发了

npm install highcharts --save

2.引入HighCharts

import HighCharts from 'highcharts/highcharts'

3.页面


 getInit() {
      var chart = {
            type: 'pie',
            // spacing : [20, 0 , 20, 0],
            backgroundColor: 'rgba(0,0,0,0)',
            options3d: {
                  enabled: true,
                  alpha: 45,
                  beta: 0
            }
      };
      var title = {
            text: ''
      };
      var tooltip = {
            // pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      };
      var colors = ['#0091FF', '#10DDE9', '#F3D200', '#EC3DAF',];    //设置饼图颜色
      var credits = {
            enabled: false    //禁用版权url    此处不设置，  会显示highecharts.com
      };
      var legend = {
            align: 'center',
            verticalAlign: 'top',
            x: 0,
            y: 0,
            itemStyle: {
                  color: "#99D9E8",
                  fontSize:14
            }
      };
      var plotOptions = {
            pie: {
                  allowPointSelect: true,
                  cursor: 'pointer',
                  depth: 25, //饼图厚度
                  // color:pieColors,
                  dataLabels: {
                        distance: 10,//设置引导线的长度
                        color: '#fff',//全局设置字体颜色
                        enabled: true,
                        format: '{y}%',
                  },
                  showInLegend: true  //显示legend
            }

      };
      var series = [{
            type: 'pie',
            name: 'Browser share',
            startAngle: 180,//调整饼图的角度   方向：顺时针
            data: [
                  ['gjf-1', 35],
                  ['gjf-2', 23],
                  {
                        name: 'gjf-3',
                        y: 40,
                        sliced: true,
                        selected: true
                  },
                  ['gjf-4', 12],
            ]
      }];

      var json = {};
      json.title = title;
      json.chart = chart;
      json.tooltip = tooltip;
      json.legend = legend;
      json.colors = colors;   // 设置饼图颜色
      json.credits = credits;
      json.plotOptions = plotOptions;
      json.series = series;
      HighCharts.chart('pieTest', json)
},