vue中简易使用hightcharts环形图心得

highcharts环形图饼状图的一些常见操作

credits: {//版权信息
       enabled: false //不显示highCharts版权信息
        }, 
        
 title: {//标题
      floating: true, //让环形里的文字漂浮
      text: "", //      text: '圆心显示的标题'
      style: {//标题样式。 用来设置字体的样式，如颜色、字体、字号等，但是文字的  对齐则使用align、x和y。
        color: "white",
        fontSize: 14}
       },

legend: {//图例   此对象内部用来改变图例的位置;
      layout: "horizontal",//图例数据项的布局。布局类型： "horizontal" 或    	                "vertical" 即水平布局和垂直布局 默认是：horizontal.
      enabled: true,//图例开关
      align: "left",
      symbolHeight: 16,//设定图例标志（图例中的符号）高度
      symbolWidth: 16,//设定图例标志宽度。
      symbolRadius: 0,//图例标志的边框圆角
      itemStyle: {//设定图例项的CSS样式。只支持有关文本的CSS样式设定。 默认是：{ "color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "bold" }.
        lineHeight: "14px",
        fontSize: "12px",
        letterSpacing: 0,
        fontWeight: "normal",
        color: "white"
      },
      itemMarginTop: 8,//图例的每一项的顶部外边距，单位px。 默认是：0.
      width: 320,//设定图例容器的宽度。
      y: 20 //往下偏移 
  },
plotOptions: {//数据列配置是针对所有数据列及某种数据列有效的通用置。pie: {//饼图
        showInLegend: true,//Whether to display this particular series or      series type in the legend. Since 2.1, pies are not shown in the legend by default. 默认是：false
        colors: [
          //圆环颜色，如果数据多于颜色的个数，则颜色会重复出现
          "red","blue","#e9da59","#73d84b","#3adfd2","#20acff","#275caa", "#8d84f0"
        ],
        size: 188,//The diameter of the pie relative to the plot area
        allowPointSelect: true,//是否允许在点击数据点标记（markers）、柱子（柱形图）、扇区（饼图）时选中该点，选中的点可以通过 Chart.getSelectedPoints 来获取。 默认是：false.
        cursor: "pointer",
        dataLabels: {
          connectorWidth: 1, //连接数据标签到饼图切片的线的宽度。
          distance: 18, //数据标签距离
          connectorPadding: 0, //从数据标签到连接器的距离。
          enabled: true, //是否启用数据标签
          connectorColor: "white", // 连接线颜色，默认是扇区颜色
          color: "white", //标签颜色
          format: "{point.percentage:.1f}%",
          style: {
            fontWeight: "normal",
            fontSize: "12px"
          },
          useHTML: true
        },
  series: [{
      type: "pie",
      innerSize: "85%", //控制饼空心的大小
      name: "市场份额",
      data: this.dataXueduan,//数据输入地方
    }]
      }
    },

1.在项目中下载highcharts依赖

npm install highcharts --save

2.引入hightcharts

3.挂载在页面元素

4.在mouted生命周期里去使用

后台返回值再去改变这个值；

在使用过程中highcharts有个报错问题一直未打得到解决，就是 attribute d:Expected arc flag(“0” or “1”) 这个问题

后来找到原因是因为highcharts的版本问题，重新更新了下highcharts,使用命令 npm update highcharts --save