在Vue中使用Highcharts【10bet】

来源:http://www.chinese-glasses.com 作者:Web前端 人气:106 发布时间:2020-03-31
摘要:1.首先安装highcharts 在template中设置容器的位置 2.代码引入 div /div 3.设置容器 Highcharts 是一个用纯JavaScript编写的一个图表库,能够很简单便捷的在web网站或是web应用程序添加有交互性的图

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】

关键词:

最火资讯