highcharts 画饼图，柱状图

import HighCharts from 'highcharts'; // highCharts图表

import highstock from 'highcharts/modules/stock';

highstock(HighCharts);

HighCharts.setOptions({
  lang: {
    thousandsSep: '', // 这里也可以写','，页面会显示为1,433
  },
});

画柱状图

// 柱状图
    summaryHighColumnEcharts() {
      const that = this;
      let maxNum = 7; // 默认可视区域的x点个数
      // console.log(9999, that.summaryRightColumnArr);
      if (that.summaryRightColumnArr && that.summaryRightColumnArr.length < maxNum) {
        // 判断xList长度来解决上述问题2
        maxNum = that.summaryRightColumnArr.length - 1;
      }
      // 同样道理解决问题1
      let flag = false; // 设置一个滚动条的开关,默认情况下关闭
      if (maxNum >= 7) {
        flag = true;
      }
      HighCharts.chart('dateStatistics', {
        title: {
          text: '',
        },
        // 禁用右下角版权信息
        credits: {
          enabled: false,
        },
        xAxis: {
          categories: that.summaryRightColumnDayArr,
          crosshair: true,
          min: 0,
          max: maxNum, // x轴多于30个出现滚动条
          //   labels: {
          //     autoRotationLimit: 100, // 设置倾斜的点
          //     // autoRotation: [45], // 向右倾斜45度，默认为[-45]
          //   },
        },
        scrollbar: {
          // 设置滚动条样式
          enabled: flag,
          height: 5,
          // 滚动条颜色
          barBackgroundColor: '#39414d',
          barBorderColor: '#39414d',
          rifleColor: '#39414d',
          barBorderRadius: 5,
          buttonBorderWidth: 0,
          // 背景颜色
          buttonArrowColor: '#12181F',
          buttonBackgroundColor: '#12181F',
          buttonBorderRadius: 7,
          trackBackgroundColor: '#12181F',
          trackBorderWidth: 1,
          trackBorderRadius: 8,
          trackBorderColor: '#12181F',
        },
        yAxis: {
          //   min: 1,
          max: Math.max(...that.summaryRightColumnArr), // 数据的最大值
          gridLineDashStyle: 'longdash', // 虚线
          gridLineColor: '#333D4D',
          title: {
            text: null, // 不显示y轴的标题
          },
        },
        legend: {
          enabled: false, // 隐藏图例
        },
        chart: {
          // 放置图表的div的id
          renderTo: 'dateStatistics',
          type: 'column',
          backgroundColor: 'transparent',
          // width: 432,
          // height: 180, // 设置高度
          panning: true, // 允许在图表中平移
          marginBottom: 70, // 底边距
          minPointLength: 2, // 柱子的最小高
        },
        plotOptions: {
          column: {
            borderWidth: 0,
            pointWidth: 16, // 16px 宽的列，无论图表宽度或数据点数量如何
          },
          series: {
            minPointLength: 3, // 两个数值相差较大时或值为零时显示默认像素高度的柱
            color: {
              linearGradient: {
                x1: 0, x2: 0, y1: 1, y2: 0,
              },
              stops: [
                [0, '#00BAFF'],
                [1, '#9DE2FC'],
              ],
            },
          },
        },
        // colors: ["#9DE2FC"],
        series: [
          {
            name: '数量',
            data: this.data,
          },
        ],
      });
    },

3d饼状图

// 3d饼状图
    summaryHighPieEcharts() {
      HighCharts.chart('diseaseStatistics', {
        title: {
          text: '',
        },
        // 禁用右下角版权信息
        credits: {
          enabled: false,
        },
        chart: {
          // 放置图表的div的id
          renderTo: 'diseaseStatistics',
          type: 'pie',
          backgroundColor: 'transparent',
          options3d: {
            enabled: true,
            alpha: 48, // 内旋转角度
            // beta: 0, // 外旋转角度
          },
        //   height: 190, // 设置高度
        },
        plotOptions: {
          pie: {
            // 是否允许被点击，为true时点击饼图的一块
            // allowPointSelect: true,
            // 鼠标样式为小手
            cursor: 'pointer',
            // 环的大小
            innerSize: that.innerSize,
            // 饼图的厚度
            depth: 35,
            dataLabels: {
              enabled: true,
              color: '#fff',
              // userHtml: true, // 是否使用formatter内的标签样式
              // formatter: function() {
              //   // console.log('===', this);
              //   return `<div>${this.point.name}</div><br/><div>${this.y}, ${this.percentage.toFixed(1)}%</div>`
              // },
              format: '<b>{point.name}</b><br/> {point.y}处, {point.percentage:.1f} %',
              style: {
                fontSize: '14px',
              },
              distance: 10,
            },
          },
        },
        colors: ['#61D2C3', '#F2657D', '#8B83EB', '#f8d135',
          '#51BAFC', '#ED8F5B', '#4782E6', '#ff3c2a',
          '#5adb62', '#9504fc', '#f29df5', '#faf8f8',
        ],
        series: [
          {
            name: '',
            type: 'pie',
            data: this.data2,
          },
        ],
      });
    },