通过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 拼接成完整的 tableheaderFormat:'<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>

完毕！再见