在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 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
Angular2库初探
Mar 01 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
使用js画图之画切线
2015/01/12 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
Python网络爬虫实例讲解
2016/04/28 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
Python数据类型之List列表实例详解
2019/05/08 Python
django将数组传递给前台模板的方法
2019/08/06 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
机械专业应届生求职信
2013/09/21 职场文书
《乡愁》教学反思
2014/02/18 职场文书
预备党员的自我评价
2014/03/12 职场文书
求职信结尾怎么写
2014/05/26 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏