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.bar return{ 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 6px width 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、Dash tickInterval: 5,//刻度间隔 tickmarkPlacement: 'between',//刻度线对齐方式,有between和on可选,默认是between style: { 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>
效果如下图所示
若有不足请多多指教!希望给您带来帮助!
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 周深《反深代词》[先听版][320K/MP3][72.71MB]
- 李佳薇.2024-会发光的【黑籁音乐】【FLAC分轨】
- 后弦.2012-很有爱【天浩盛世】【WAV+CUE】
- 林俊吉.2012-将你惜命命【美华】【WAV+CUE】
- 晓雅《分享》DTS-WAV
- 黑鸭子2008-飞歌[首版][WAV+CUE]
- 黄乙玲1989-水泼落地难收回[日本天龙版][WAV+CUE]
- 周深《反深代词》[先听版][FLAC/分轨][310.97MB]
- 姜育恒1984《什么时候·串起又散落》台湾复刻版[WAV+CUE][1G]
- 那英《如今》引进版[WAV+CUE][1G]
- 蔡幸娟.1991-真的让我爱你吗【飞碟】【WAV+CUE】
- 群星.2024-好团圆电视剧原声带【TME】【FLAC分轨】
- 陈思安.1990-国语钢琴酒吧5CD【欣代唱片】【WAV+CUE】
- 莫文蔚《莫后年代20周年世纪典藏》3CD[WAV+CUE][2G]
- 张惠妹《我要快乐》华纳[WAV+CUE][1G]