在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 相关文章推荐
javascript document.referrer 用法
Apr 30 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 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 allow_url_include的应用和解释
2010/04/22 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
js JSON.stringify()基础详解
2019/06/19 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python处理图片之PIL模块简单使用方法
2015/05/11 Python
python实现数组插入新元素的方法
2015/05/22 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
python实现杨辉三角思路
2017/07/14 Python
python Celery定时任务的示例
2018/03/13 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
python实现朴素贝叶斯算法
2018/11/19 Python
python爬取内容存入Excel实例
2019/02/20 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
vue+django实现下载文件的示例
2021/03/24 Vue.js
先进工作者获奖感言
2014/02/08 职场文书
海飞丝的广告词
2014/03/20 职场文书
党员思想汇报材料
2014/12/19 职场文书
安全教育的主题班会
2015/08/13 职场文书
责任书格式
2019/04/18 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python