Highcharts在vue如何使用

通过npm指令安装Highcharts

npm install highcharts --save

import引入

import * as Highcharts from "highcharts";

然后就是按需拿代码

可以和想要的图源码对比看下就懂了

详情参考：

https://www.highcharts.com.cn/demo/highcharts

我拿的一个饼图和柱状图大家可以看一下

<template>
  <div>
    <div id="container"  style="min-width: 400px; height: 400px"></div>
    <div id="histograms" style="min-width: 400px; height: 400px"></div>
  </div>
</template>

<script>
import * as Highcharts from "highcharts";
export default {
  name: "Home",

  methods: {
    pieFn() {
      Highcharts.chart("container", {
        title: {
          text: "舆情关键词分布图",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              format: "<b>{point.name}</b>: {point.percentage:.1f} %",
              style: {
                color:
                  (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
                  "black",
              },
              connectorColor: "silver",
            },
          },
        },
        series: [
          {
            type: "pie",
            name: "浏览器占比",
            data: [
              {
                name: "天然气分公司",
                sliced: true,
                selected: true,
                y: 18.2,
              },
              ["中国石油", 27.0],
              ["延长石油", 22.6],
              ["大庆石油", 32.1],
            ],
          },
        ],
      });
    },
    columnFn() {
      Highcharts.chart("histograms", {
        chart: {
          type: "column",
        },
        title: {
          text: "舆情分布",
        },
        subtitle: {
          text: "数据来源: itying.com",
        },
        xAxis: {
          categories: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
          crosshair: true,
        },
        yAxis: {
          min: 0,
          title: {
            text: "舆情数",
          },
        },
        tooltip: {
          // head + 每个 point + footer 拼接成完整的 table
          headerFormat:
            '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat:
            '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} 条</b></td></tr>',
          footerFormat: "</table>",
          shared: true,
          useHTML: true,
        },
        plotOptions: {
          column: {
            borderWidth: 0,
          },
        },
        series: [
          {
            name: "正面舆情数",
            data: [
              49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4,
              194.1, 95.6, 54.4,
            ],
          },
          {
            name: "负面舆情数",
            data: [
              83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5,
              106.6, 92.3,
            ]
          }
        ],
      });
    },
  },
  mounted() {
    this.pieFn();
    this.columnFn();
  },
};
</script>

<style>
</style>

完毕！再见