Vue中引入heighchars图表------蜘蛛图/雷达图

1、没有Vue安装Vue环境的请看这篇博客：
https://www.jianshu.com/p/02b12c600c7b
2、安装JetBrains WebStorm 11.0.3网上有资源，这里不在累赘。
3、WebStorm打开第一步创建的Vue项目

npm进行highchars的导入，导入完成后就可以进行highchars的可视化组件开发了
一、npm install highcharts --save（回车）

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

内容如下：

<template><div class="x-bar"><div :id="id":option="option"></div></div>
</template>
<script>import HighCharts from 'highcharts'import HighchartsMore from 'highcharts/highcharts-more';//不引入雷达图不显示HighchartsMore(HighCharts);//不引入雷达图不显示export default {// 验证类型props: {id: {type: String},option: {type: Object}},mounted() {HighCharts.chart(this.id,this.option)}}
</script>

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

内容如下：

module.exports = {bar: {chart: {polar: true,type: 'line'},title: {text: '预测与实际风险',x: -80},pane: {size: '80%'},xAxis: {categories: ['倒地', '碰撞', '厌食', '爬窗','焦躁', '冲突'],tickmarkPlacement: 'on',lineWidth: 0},yAxis: {gridLineInterpolation: 'polygon',lineWidth: 0,min: 0},tooltip: {shared: true,pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>'},legend: {align: 'right',verticalAlign: 'top',y: 70,layout: 'vertical'},series: [{name: '预测风险',data: [10, 32, 12, 43, 13, 64],pointPlacement: 'on'}, {name: '实际风险',data: [3, 20, 10, 33, 7, 50],pointPlacement: 'on'}]}
}

四、再App.vue中引用chart组件

内容如下：

<template><div id="app"><x-chart :id="id" :option="option"></x-chart></div>
</template><script>// 导入chart组件import XChart from './components/chart.vue'// 导入chart组件模拟数据import options from './chart-options/options'export default {
//    name: 'app',data() {let option = options.barreturn {id: 'test',option: option}},components: {XChart}}
</script><style>#test {width: 600px;height: 600px;margin: 40px auto;}
</style>

代码书写完毕！运行Vue项目！

npm run dev-------(回车)

访问：localhost:8080即可！

Vue中引入heighchars图表------蜘蛛图/雷达图相关推荐

Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
在vue中使用antV-G2展示半径饼状图
介绍在vue中使用antV-G2展示半径饼状图 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实 ...
Uniapp/Vue中引入使用阿里图标
一.uniapp中引入阿里图标将图标加入购物车部分省略 1.下载阿里图标到本地,uniapp不支持symbol格式 2. 打开下载的压缩包,只需要inconfont.css ,将其放到我们的项目 s ...
Vue中引入使用 D3.js
Vue中引入使用 D3.js 1. D3.js 学习文档 D3.js 中文网 D3.js 入门教程 D3.js v5版入门教程 d3.js API中文手册-[看云] d3.layout (布局)-[ ...
vue - vue中使用echart实现柱状图和折线图
vue中使用echart实现柱状图和折线图,所用到的数据会放到最后面,在costRate.js里面: 1,先看效果图一些重要注释我都写到代码里面了:第一个图柱状图,第二个是折线图 2,代码实现 &l ...
用户数据销售额分析动态大屏看板+大屏数据可视化图表组件（折线图+圆柱图+散点图+饼图+漏斗图+雷达图+水位图）+智能web端高保真大数据动态可视化大屏看板+中国动态地图+智慧电商实时动态数据大屏看板
作品内容:用户数据销售额分析动态大屏看板+大屏数据可视化图表组件(折线图+圆柱图+散点图+饼图+漏斗图+雷达图+水位图)+web端高保真大数据动态可视化大屏看板+中国动态地图+电商实时动态数据大屏看板 ...
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...

Vue中引入heighchars图表------蜘蛛图/雷达图

Vue中引入heighchars图表------蜘蛛图/雷达图相关推荐

最新文章

热门文章