vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)

npm进行highchars的导入，导入完成后就可以进行highchars的可视化组件开发了

npm install highcharts --save

1、components目录下新建一个chart.vue组件

:option="option">

import HighCharts from 'highcharts'

export default {

// 验证类型

props: {

id: {

type: String

option: {

type: Object

}

mounted() {

HighCharts.chart(this.id,this.option)

}

2、chart组件建好后，开始创建chart-options目录，里面创建一个options.js用来存放模拟的chart数据，如下图目录

如下图我写的一个柱状图的数据

module.exports = {

bar: {

chart: {

type:'column'//指定图表的类型，默认是折线图(line)

credits: {

enabled:false

},//去掉地址

title: {

text: '我的第一个图表' //指定图表标题

colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00',

'#24CBE5' ],

xAxis: {

categories: ['1号', '2号', '3号','3号','3号'] //指定x轴分组

yAxis: {

title: {

text: '最近七天', //指定y轴的标题

plotOptions: {

column: {

colorByPoint:true

series: [{ //指定数据列

name: '小明',

data: [{

y:1000,

color:"red"}, 5000, 4000,5000,2000] //数据

}]

}

3、引用chart组件

// 导入chart组件

import XChart from 'components/chart.vue'

// 导入chart组件模拟数据

import options from './chart-options/options'

export default {

name: 'app',

data() {

let option = options.bar

return {

id: 'test',

option: option

}

components: {

XChart

}

#test {

width: 400px;

height: 400px;

margin: 40px auto;

}

效果如下图所示

以上这篇在vue项目中引入highcharts图表的方法(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)相关推荐

vue设置html自动跳转路由器,vue2.0项目实现路由跳转的方法详解
一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入v ...
linux ipset 流量,linux中ipset命令的使用方法详解
linux中ipset命令的使用方法详解发布时间:2020-10-25 17:07:19 来源:脚本之家阅读:97 作者:lijiaocn 栏目:服务器 ipset介绍 iptables是在lin ...
Linux中history历史命令使用方法详解
在/etc/profile里添加如下:#History export HISTTIMEFORMAT="[%F %T]" HISTDIR=/home/common/.hist if ...
php中读取大文件实现方法详解
php中读取大文件实现方法详解来源: 时间:2013-09-05 19:27:01 阅读数:6186 分享到:0 [导读] 本文章来给各位同学介绍php中读取大文件实现方法详解吧,有需要了解 ...
python支持向量机回归_Python中支持向量机SVM的使用方法详解
除了在Matlab中使用PRTools工具箱中的svm算法,Python中一样可以使用支持向量机做分类.因为Python中的sklearn库也集成了SVM算法,本文的运行环境是Pycharm. 一.导 ...
python更新数据库表的时间字段_python更新数据库中某个字段的数据(方法详解)
连接数据库基本操作,我把每一步的操作是为什么给大家注释一下,老手自行快进. 请注意这是连接数据库操作,还不是更新. import pymysql #导包 #连接数据库 db = pymysql.con ...
python中验证码连通域分割的方法详解
python中验证码连通域分割的方法详解这篇文章主要给大家介绍了关于python中验证码连通域分割的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用python具有一定的参考学习价值,需 ...
python中update是啥意思_python中update的基本使用方法详解
前言 Python 字典 update()方法用于更新字典中的键/值对,可以修改存在的键对应的值,也可以添加新的键/值对到字典中. 语法格式 d.update(e) 参数说明将e中键-值对添加到字典 ...
python中search用法_Python中的python re.search方法详解
re.search扫描整个字符串并返回第一个成功的匹配,若string中包含pattern子串,则返回Match对象,否则返回None,注意,如果string中存在多个pattern子串,只返回第一个 ...

vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)

vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)相关推荐

最新文章

热门文章