在vue项目中引入highcharts图表的方法

npm进行highchars的导入，导入完成后就可以进行highchars的可视化组件开发了

npm install highcharts --save

1、components目录下新建一个chart.vue组件

<template><div class="chart" id="myChart" ><div class="emcs_charts" :id="id"  ></div></div>
</template>
<script>
// 引入highCharts模块
import HighCharts from 'highcharts'
// 引入这个图表的外部资源数据
import data from '../echarts_data/chart.js'export default {data() {// 将引入的数据写在自己的组件中let dataObj = data.barreturn{id: 'chart',dataObj: dataObj}},mounted() {//钩子函数挂载时实例化这个图表// chart(参数1,参数2);第一个参数挂载组件的容器，第二个参数为图表所需要的数据对象HighCharts.chart(this.id,this.dataObj)}
}
</script><style scoped lang='stylus'>
.chart{float left ;background-color #fff;padding 10px 0;margin-top 20px;border-radius 6pxwidth 49.5%;.emcs_charts{min-width 890px;height 280px;}
}
</style>

2、chart组件建好后，开始创建chart-options目录，里面创建一个chart.js用来存放模拟的chart数据

如下图我写的一个面积图的数据

module.exports = {bar: {chart: {//图表样式type:'area',//指定图表的类型,这里是面积图},//是否启用Labels。x，y轴默认值都是true，如果想禁用（或不显示）Labels，设置该属性为false即可credits: {enabled:false},title: {//指定图表标题text: '  设备监控', align: 'left',style:{color: '#666',fontSize:'16px',}},colors: ['rgba(86,199,99,1)','rgba(226,188,37,1)','rgba(255,133,133,1)'],xAxis: {//图表的横坐标,一个轴为{ }title:{//横坐标标题text:''},//x坐标轴的刻度值categories: ['4:40','4:41','4:42','4:43','4:44', '4:45', '4:46', '4:47', '4:48', '4:49', '4:50','4:51','4:52','4:53','4:54', '4:55', '4:56', '4:57', '4:58', '4:59', '5:00', '5:01', '5:02', '5:03', '5:04', '5:05', '5:06', '5:07', '5:08', '5:09', '5:10', '5:11', '5:12', '5:13', '5:14', '5:15', '5:16', '5:17', '5:18', '5:19', '5:20', '5:21', '5:22', '5:23', '5:24', '5:25', '5:26', '5:27', '5:28', '5:29', '5:30', '5:31', '5:32', '5:33', '5:34', '5:35', '5:36', '5:37', '5:38', '5:39', '5:40'], //指定x轴分组labels: {//坐标轴上的刻度值（显示间隔、样式、单位）style: {color: '#999999'},format:'{value}pm',//刻度值的单位align: 'center'},lineColor: '#dfdfdf',//坐标轴的颜色tickColor: '#dfdfdf',//坐标轴上的刻度线的颜色tickLength: 5,//坐标轴上刻度线的长度gridLineWidth:1,//网格线宽度。x轴默认为0，y轴默认为1px。gridLineColor:'#f2f2f2',//网格线颜色。默认为：#C0C0C0。// gridLineDashStyle: 'Dash',//网格线线条样式。和Css border-style类似，常用的有：Solid、Dot、DashtickInterval: 5,//刻度间隔tickmarkPlacement: 'between',//刻度线对齐方式，有between和on可选，默认是betweenstyle: {color: '#999999',fontSize:10},crosshair:{//鼠标放上后显示纵轴的数据color:'#999',width:1}},yAxis: [{//图表的纵坐标，多个轴[{轴一},{轴二}]gridLineWidth: 1,gridLineColor:'#f2f2f2',tickPositions: [0, 25, 50, 75, 100],//y轴刻度值tickLength:0,title: {//纵坐标标题text: ' ',margin:0,style: {color: '#999999',fontSize:10}},labels:{//坐标轴上刻度的样式及单位style: {color: '#999999',fontSize:10},format:'{value}%',//坐标轴上的单位},offset:-10,//距离坐标轴的距离},{gridLineWidth: 1,gridLineColor:'#f2f2f2',tickColor: '#fff',tickInterval:25,tickLength:0,title: {text: '',margin:0,style: {color: '#999999',fontSize:10}},labels:{style: {color: '#999999',fontSize:10},format:'{value}℃'},opposite:true,//设置opposite: true表示该轴位置反转，即为y轴时显示在右侧offset:-10}],tooltip: {//数据提示框headerFormat: '<small>{point.key}</small><br/>',//标题格式pointFormat: '<span style="color:{series.color};">{series.name}</span>：{point.y}<br/>',shared: true,followPointer:true,//跟随鼠标followPointerMove:true,//是否跟随手指移动// footerFormat: 'muzi',//尾部格式化字符串style:{fontSize:10,fontFamily:'微软雅黑',fontWeight:'normal',color:'#666'}},//标示线总是垂直于它属于的轴。它可单独定义在x轴或y轴，也可以同时定义在x轴和y轴plotOptions: {area: {//pointStart: 1940,marker: {enabled: false,symbol: 'circle',radius: 2,states: {hover: {enabled: true}}},fillOpacity:0.2,lineWidth:1}},legend: {//图例居中显示在图表下方align: 'center',symbolRadius:5,//图标圆角symbolWidth:10,//图标宽度symbolHeight:10,//图标高度itemStyle: {color: '#999999',fontWeight:'normal',fontSize:12},itemMarginBottom: -14,//图例项底部外边距},series: [{//数据列是一组数据集合name: 'CPU',//name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中data: [5, 6, 10, 20, 50, 45, 30, 20, 10, 15,16, 17, 18, 18, 30, 26, 25, 24, 20, 26,36, 46, 50, 51, 52, 40, 30, 20, 19, 18,30, 50, 55, 56, 70, 72, 73, 60, 55, 54,53, 40, 39, 35, 32, 30, 20, 18, 3, 5,10, 12, 13, 23, 34, 56, 60, 70, 80, 90, 80],tooltip: {valueSuffix:'%'}}, {name: 'RAM',data:[16, 17, 18, 18, 30, 26, 25, 24, 20, 26,36, 46, 50, 51, 52, 40, 30, 20, 19, 18,30, 50, 55, 56, 70, 72, 73, 60, 55, 54,53, 40, 39, 35, 32, 30, 20, 18, 3, 5,10, 12, 13, 23, 34, 56, 60, 70, 80, 90,5, 6, 10, 20, 50, 45, 30, 20, 10, 15, 20],tooltip: {valueSuffix:'%'}}, {name: '温度',data:[10, 11, 11, 12, 12, 13, 14, 15, 16, 16,16, 16, 16, 16, 16, 16, 16, 16, 16, 16,16, 16, 16, 16, 16, 16, 16, 16, 16, 16,16, 16, 16, 16, 16, 16, 16, 16, 16, 16,16, 16, 16, 16, 16, 16, 16, 16, 16, 16,16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16],tooltip: {valueSuffix:'℃'//值的前缀、后缀及小数点},yAxis:1}]}}

3、父组件引用chart.vue子组件

<template><div class="charts" id="myChart" ><x-chart ></x-chart></div>
</template>
<script>
// 导入chart.vue子组件
import XChart from './chart.vue'export default {components: {XChart}
}
</script><style scoped lang='stylus'></style>

效果如下图所示

若有不足请多多指教！希望给您带来帮助！

在vue项目中引入highcharts图表的方法相关推荐

vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...
vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
【EasyExcel】在SpringBoot+VUE项目中引入EasyExcel实现对数据的导出（封装工具类）
在SpringBoot+VUE项目中引入EasyExcel实现导入导出一.引入EasyExcel 通过maven引入,坐标如下: <dependency><groupId>c ...
vue项目中引入字体包
问题: 项目开发过程中,因UI的显示要求,需要引入一些字体,那如何引入外部字体呢?很简单,只需要以下3步一下载对应的字体包文件,放置到我们的项目中比如我需要PingFangSC的系列字体,我 ...
vue项目中引入monaco editor
monaco-editor概述 monaco-editor 是微软开源的一款web代码编辑器,vscode就是集成monaco-editor来实现的. 官方示例官方文档使用安装 npm安装 np ...
vue项目中引入Luckysheet
Luckysheet 介绍 Luckysheet ,一款纯前端类似excel的在线表格,功能强大.配置简单.完全开源. 实现功能格式设置样式 (修改字体样式,字号,颜色或者其他通用的样式) 条件格 ...
Vue项目中使用Highcharts
记录以下工作中遇到的问题 1. 项目安装Highcharts依赖 npm install highcharts --save 2. 组件内部引入需要的可视化图表:需要timeline就在modules ...

在vue项目中引入highcharts图表的方法

在vue项目中引入highcharts图表的方法相关推荐

最新文章

热门文章