在Vue中使用Highcharts

前端  /  管理员 发布于 6年前   387

Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。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();  },

 

运行结果如下：

完整代码：

<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>