介绍 & lt; template>
& lt;才能div 类=癱hart", id=癿yChart",在
,,,& lt; div 类=癳mcs_charts",: id=癷d",祝辞& lt;/div>
& lt;才能/div>
& lt;/template>
& lt; script>//,引入highCharts模块
import HighCharts 得到& # 39;highcharts& # 39;//,引入这个图表的外部资源数据
import data 得到& # 39;. ./echarts_data chart.js& # 39;
export default {
,数据(){//,才能将引入的数据写在自己的组件中
let 才能;dataObj =data.bar
返回{才能
,,,id: & # 39;图表# 39;
,,dataObj: dataObj
,,}
},
,安装(){//钩子函数挂载时实例化这个图表//才能,图表(参数1,参数2);第一个参数挂载组件的容器,第二个参数为图表所需要的数据对象
HighCharts.chart才能(this.id this.dataObj)
,}
}
& lt;/script>
& lt; style scoped lang=& # 39;针# 39;比;
.chart {
,float left ;
,background-color # fff;
,padding 10 px 0;
,margin-top 20 px;
border-radius 6 px
,width 49.5%;
,.emcs_charts {
min-width 才能;890 px;
height 才能;280 px;
,}
}
& lt;/style> module.exports =, {
,,酒吧:{
,,,图:,{//图表样式
,,,,,类型:& # 39;区域# 39;//指定图表的类型,这里是面积图
,,,},
,,,//是否启用Labels.x, y轴默认值都是正确的,如果想禁用(或不显示)标签,设置该属性为假即可
,,,学分:,{
,,,,启用:假的
,,,},
,,,标题:,{//指定图表标题
,,,,,:,& # 39;,设备监控& # 39;,,
,,,,,:对齐,& # 39;左# 39;
,,,,,风格:{
,,,,,,,颜色:,& # 39;# 666 & # 39;
,,,,,,,字形大小:& # 39;16 px # 39;
,,,,,}
,,,},
,,,颜色:,(& # 39;rgba (86199、99、1) & # 39;, & # 39; rgba(226188年,37岁,1)& # 39;,& # 39;rgba (255133133 1) & # 39;],
,,,xAxis:,{//图表的横坐标,一个轴为{,}
,,,,,标题:{//横坐标标题
,,,,,,,文字:& # 39;& # 39;
,,,,,},
,,,,,//x坐标轴的刻度值
,,,,,类别:,(& # 39;4 # 39;& # 39;4:41& # 39;,& # 39;各自# 39;,& # 39;43 # 39;,& # 39;44 # 39;,,& # 39;45 # 39;,,& # 39;46 # 39;,,& # 39;47 # 39;,,& # 39;48 # 39;,,& # 39;4:49& # 39;,,& # 39;4 # 39;,& # 39;4:51& # 39;,& # 39;52 # 39;,& # 39;4 # 39;,& # 39;4:54& # 39;,,& # 39;4:55 # 39;,,& # 39;4:56& # 39;,,& # 39;结束# 39;,,& # 39;4点58准时醒来,,,& # 39;4:59& # 39;,,& # 39;5 # 39;,,& # 39;分零一秒# 39;,,& # 39;5:02& # 39;,,& # 39;5:03& # 39;,,& # 39;5:04& # 39;,,& # 39;于5:05 # 39;,,& # 39;5:06& # 39;,,& # 39;5:07& # 39;,,& # 39;比赛# 39;,,& # 39;5:09& # 39;,,& # 39;5:10 # 39;,,& # 39;11 # 39;,,& # 39;12 # 39;,,& # 39;13 # 39;,,& # 39;习用# 39;,,& # 39;5:15 # 39;,,& # 39;5:16 # 39;,,& # 39;17 # 39;,,& # 39;5:18要# 39;,,& # 39;5:19 # 39;,,& # 39;5 # 39;,,& # 39;21 # 39;,,& # 39;5:22 # 39;,,& # 39;23 # 39;,,& # 39;24 # 39;,,& # 39;25 # 39;,,& # 39;26 # 39;,,& # 39;27 # 39;,,& # 39;28 # 39;,,& # 39;29 # 39;,,& # 39;5:30 # 39;,,& # 39;31 # 39;,,& # 39;32 # 39;,,& # 39;33 # 39;,,& # 39;5:34 # 39;,,& # 39;5:35 # 39;,,& # 39;36 # 39;,,& # 39;37 # 39;,,& # 39;38 # 39;,,& # 39;第五章39节# 39;,,& # 39;40 # 39;],,//指定x轴分组
,,,,,标签:,{//坐标轴上的刻度值(显示间隔,样式,单位)
,,,,,,风格:,{
,,,,,,,,颜色:,& # 39;# 999999 & # 39;
,,,,,,},
,,,,,,格式:& # 39;{value}点# 39;,//刻度值的单位
,,,,,,:对齐,& # 39;中心# 39;
,,,,,},
,,,,,lineColor:, & # 39; # dfdfdf # 39;//坐标轴的颜色
,,,,,tickColor:, & # 39; # dfdfdf # 39;//坐标轴上的刻度线的颜色
,,,,,tickLength:, 5//坐标轴上刻度线的长度
,,,,,gridLineWidth: 1//网格线宽度。x轴默认为0,y轴默认为1 px。
,,,,,gridLineColor: & # 39; # f2f2f2& # 39;//网格线颜色。默认为:# C0C0C0。
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
本篇文章为大家展示了如何在vue项目中引入highcharts图表,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
<强> npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了
<代码> npm安装highcharts——保存
<强> 1,组件目录下新建一个图表。vue组件
<强> 2,图组件建好后,开始创建图选项目录,里面创建一个图表。js用来存放模拟的图数据
如下图我写的一个面积图的数据
