在Vue中使用Highcharts

1.首先安装highcharts

npm install highcharts --save

2.代码引入

//可以根据实际需求来引入对应的包 import Highcharts from 'highcharts/highstock'; import HighchartsMore from 'highcharts/highcharts-more'; import HighchartsDrilldown from 'highcharts/modules/drilldown'; import Highcharts3D from 'highcharts/highcharts-3d'; import Highmaps from 'highcharts/modules/map'; HighchartsMore(Highcharts) HighchartsDrilldown(Highcharts); Highcharts3D(Highcharts); Highmaps(Highcharts);

3.设置容器

在template中设置容器的位置

 <div id="container"></div>

4.封装数据方法

在methods中封装一个moreChart方法。

moreChart() {
      if (this.chart) { this.chart.destroy(); } // 初始化 Highcharts 图表 this.chart = new Highcharts.Chart("container", { title: { text: "2010 ~ 2016 年太阳能行业就业人员发展情况" }, subtitle: { text: "数据来源：thesolarfoundation.com" }, yAxis: { title: { text: "就业人数" } }, legend: { layout: "vertical", align: "right", verticalAlign: "middle" }, plotOptions: { series: { label: { connectorAllowed: false }, pointStart: 2010 } }, series: [ { name: "安装，实施人员", data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }, { name: "工人", data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] }, { name: "销售", data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387] }, { name: "项目开发", data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227] }, { name: "其他", data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111] } ], responsive: { rules: [ { condition: { maxWidth: 500 }, chartOptions: { legend: { layout: "horizontal", align: "center", verticalAlign: "bottom" } } } ] } }); }

5.在周期函数中加载方法

  mounted() {
    this.moreChart(); },

资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com

运行结果如下：

完整代码：

<template> <div class="hello"> <div id="container"></div> </div> </template> <script> 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); export default { name: "HelloWorld", props: { msg: String }, mounted() { this.moreChart(); }, methods: { moreChart() { if (this.chart) { this.chart.destroy(); } // 初始化 Highcharts 图表 this.chart = new Highcharts.Chart("container", { title: { text: "2010 ~ 2016 年太阳能行业就业人员发展情况" }, subtitle: { text: "数据来源：thesolarfoundation.com" }, yAxis: { title: { text: "就业人数" } }, legend: { layout: "vertical", align: "right", verticalAlign: "middle" }, plotOptions: { series: { label: { connectorAllowed: false }, pointStart: 2010 } }, series: [ { name: "安装，实施人员", data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }, { name: "工人", data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] }, { name: "销售", data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387] }, { name: "项目开发", data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227] }, { name: "其他", data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111] } ], responsive: { rules: [ { condition: { maxWidth: 500 }, chartOptions: { legend: { layout: "horizontal", align: "center", verticalAlign: "bottom" } } } ] } }); } } }; </script> <!-- Add "scoped" attribute to limit css to this component only --> <style scoped> h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>