在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 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
Vue常用API、高级API的相关总结
Feb 02 Vue.js
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/11/16 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
vue实现购物车选择功能
2020/01/10 Javascript
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
Python获取邮件地址的方法
2015/07/10 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
python3实现绘制二维点图
2019/12/04 Python
Python类中self参数用法详解
2020/02/13 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
征婚广告词
2014/03/17 职场文书
承诺书格式范文
2014/06/03 职场文书
2015年新学期寄语
2015/02/26 职场文书
个人思想政治总结
2015/03/05 职场文书
同学会演讲稿
2019/04/02 职场文书
工作报告范文
2019/06/20 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python