1.首先安装highcharts
在template中设置容器的位置
2.代码引入
div /div
3.设置容器
Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
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 div /div /div/templatescriptimport 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 scopedh3 { margin: 40px 0 0;}ul { list-style-type: none; padding: 0;}li { display: inline-block; margin: 0 10px;}a { color: #42b983;}/style
//可以根据实际需求来引入对应的包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);
在methods中封装一个moreChart方法。
运行结果如下：
时间: 2019-10-23阅读: 97标签: 图表
4.封装数据方法
npm install highcharts --save
完整代码：
本文由10bet发布于Web前端,转载请注明出处：在Vue中使用Highcharts【10bet】
关键词：