vue2 安装使用Hightcharts

Cooperb

已于 2022-06-17 16:03:22 修改

阅读量1k

点赞数

文章标签： vue.js npm javascript

于 2022-06-17 14:14:16 首次发布

本文链接：https://blog.csdn.net/Cooperb/article/details/125332577

版权

1.npm 安装
npm install highcharts --save

2.main.js 引入
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);

3.页面使用,根据官网文档调整样式

  var Highcharts = require('highcharts/highstock');
  var chart = Highcharts.chart('c1', {
    count: 0,
    chart: {
      type: 'pie',
      backgroundColor: 'rgba(255, 255, 255, 0)',
      labels: {
        enabled: false
      },
      options3d: {
        enabled: true,
        alpha: 70
      }
    },
    legend: {
      itemStyle: {
        color: "#fff"
      }
    },
    credits: {
      enabled: false
    },
    colors: ["#61B7D9", "#829ADB", "#E0CB7D","#5CBF8C","#5CBF8C"],
    title: {
      text: ""
    },
    plotOptions: {
      pie: {
        size: "100%",
        innerSize: "60%",
        depth: 25,
        allowPointSelect: false,
        cursor: 'pointer',
        dataLabels: {
          distance: -10,//控制饼图外面的线的长短,为负数时文本内容在饼图内部
          enabled: false,}
      }
    },
    tooltip: {
      pointFormat: '{point.name}: <div>{point.y}人</div>',
      backgroundColor: "rgba(0,0,0,.5)",
      borderWidth: 0,
      style: {
        color: "#fff",
        fontSize: 16
      },
    },
    series: [{
      name: '',
      showInLegend: false,
      //
      // dataLabels: {
      //   enabled: true,
      //   alignTo: 'plotEdges',
      //   style: {
      //     fontSize: 14,
      //     color: '#03bff2',
      //     textOutline: 'none'        //去掉文字白边
      //   }
      // },
      data: [
        ['a', 5],
        ['b', 30],
        ['c', 15],
        ['d', 5],
        ['e', 5],
      ]
    }]
  })