Vue项目中使用Highcharts

记录以下工作中遇到的问题

1. 项目安装Highcharts依赖

npm  install highcharts  --save

2. 组件内部引入需要的可视化图表：需要timeline就在modules下引入

这里很关键 之前项目中使用老是报错找不到依赖原来引入依赖有问题
import Highcharts from 'highcharts'//必须引入
import timeline from 'highcharts/modules/timeline';需要什么用什么modules下 如：timeline，area，funnel3d等等
timeline(Highcharts);///实例化

3. 组件内完整示例

<template><figure class="highcharts-figure"><div id="container"></div></figure>
</template>
<style lang='scss'>
.highcharts-strong {font-weight: bold;
}.highcharts-figure,
.highcharts-data-table table {min-width: 320px;max-width: 600px;margin: 1em auto;
}.highcharts-data-table table {font-family: Verdana, sans-serif;border-collapse: collapse;border: 1px solid #ebebeb;margin: 10px auto;text-align: center;width: 100%;max-width: 500px;
}.highcharts-data-table caption {padding: 1em 0;font-size: 1.2em;color: #555;
}.highcharts-data-table th {font-weight: 600;padding: 0.5em;
}.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {padding: 0.5em;
}.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {background: #f8f8f8;
}.highcharts-data-table tr:hover {background: #f1f7ff;
}
</style>
<script>
// 导入chart组件
import Highcharts from "highcharts";
import timeline from "highcharts/modules/timeline"; 需要什么用什么modules/timeline
timeline(Highcharts);export default {mounted: function () {this.HighchartsData();},methods: {HighchartsData() {/Highcharts.chart("container", {chart: {type: "timeline",},accessibility: {screenReaderSection: {beforeChartFormat:"<h5>{chartTitle}</h5>" +"<div>{typeDescription}</div>" +"<div>{chartSubtitle}</div>" +"<div>{chartLongdesc}</div>" +"<div>{viewTableButton}</div>",},point: {valueDescriptionFormat:"{index}. {point.label}. {point.description}.",},},xAxis: {visible: false,},yAxis: {visible: false,},title: {text: "Timeline of Space Exploration",},subtitle: {text: 'Info source: <a href="https://en.wikipedia.org/wiki/Timeline_of_space_exploration">www.wikipedia.org</a>',},colors: ["#4185F3","#427CDD","#406AB2","#3E5A8E","#3B4A68","#363C46",],series: [{data: [{name: "First dogs",label: "1951: First dogs in space",description:"22 July 1951 First dogs in space (Dezik and Tsygan) ",},{name: "Sputnik 1",label: "1957: First artificial satellite",description:"4 October 1957 First artificial satellite. First signals from space.",},{name: "First human spaceflight",label: "1961: First human spaceflight (Yuri Gagarin)",description:"First human spaceflight (Yuri Gagarin), and the first human-crewed orbital flight",},{name: "First human on the Moon",label: "1969: First human on the Moon",description:"First human on the Moon, and first space launch from a celestial body other than the Earth. First sample return from the Moon",},{name: "First space station",label: "1971: First space station",description:"Salyut 1 was the first space station of any kind, launched into low Earth orbit by the Soviet Union on April 19, 1971.",},{name: "Apollo–Soyuz Test Project",label: "1975: First multinational manned mission",description:"The mission included both joint and separate scientific experiments, and provided useful engineering experience for future joint US–Russian space flights, such as the Shuttle–Mir Program and the International Space Station.",},],},],});},},
};
</script>

4. 页面展示

具体使用什么图表可以参照文档修改

中文文档：兼容 IE6+、完美支持移动端、图表类型丰富的 HTML5 交互图表 | Highcharts

英文文档：https://www.highcharts.com/demo （不建议，实在是卡）

Vue项目中使用Highcharts相关推荐

vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
在vue项目中使用echarts 阿星小栈
在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts, Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 安装echarts依赖 ...
如何在vue项目中使用Highmaps(vue+Highmaps)
如何在vue项目中使用Highmaps 功能需求思路分析实现第一步:引入第二步:介绍一下这个world是个啥. 第三步:调用注意点(十分重要) 写在最后功能需求近日我接到了这么一个需求 ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
在vue项目中：统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...

Vue项目中使用Highcharts

Vue项目中使用Highcharts相关推荐

最新文章

热门文章