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


Posted in Javascript onJanuary 21, 2019

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>

效果如下图所示

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

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
使用正则替换变量
May 05 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
js实现网页收藏功能
Dec 17 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
js的对象与函数详解
Jan 21 #Javascript
JS实现求5的阶乘示例
Jan 21 #Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 #Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 #Javascript
Vue 表情包输入组件的实现代码
Jan 21 #Javascript
JS实现将对象转化为数组的方法分析
Jan 21 #Javascript
vue中过滤器filter的讲解
Jan 21 #Javascript
You might like
PHP遍历数组的几种方法
2012/03/22 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
php判断目录存在的简单方法
2019/09/26 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
python选择排序算法的实现代码
2013/11/21 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
django中使用POST方法获取POST数据
2019/08/20 Python
pytorch 修改预训练model实例
2020/01/18 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
岗位说明书标准范本
2014/07/30 职场文书
优秀教师单行材料
2014/12/16 职场文书
阿凡达观后感
2015/06/10 职场文书
六一活动主持词
2015/06/30 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL