vue中使用echarts做一个雷达图

在vue中使用echarts做一个雷达图
效果如图

首先

1、安装echarts

npm install echarts -S

2、使用

全局使用

在main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在页面中使用

在template里面写入

<div id="leiDaTu" class="echart" style="width: 300px;height: 300px;"></div>

在script中

export default {mounted() {this.loadLeida()},methods: {loadLeida() {let option = {// title: {//   text: '基础雷达图'// },tooltip: {},legend: {right: 10,data: ['当前部门', '集团大盘']},radar: {// shape: 'circle',name: {textStyle: {color: '#fff',backgroundColor: '#999',borderRadius: 3,padding: [3, 5]}},axisLine: {lineStyle: {color: 'rgba(131,141,158,.1)',},},indicator: [{name: '健身教练',max: 30},{name: '工商',max: 30},{name: '网球',max: 30},{name: '篮球教练',max: 30},{name: '田径',max: 30},{name: '体操教练',max: 30},{name: '网球',max: 30},{name: '健美操教练',max: 30},{name: '游泳教练',max: 30},{name: '田径',max: 30},],splitArea: {show: false,areaStyle: {color: 'rgba(255,0,0,0)', // 图表背景的颜色},},splitLine: {show: true,lineStyle: {width: 1,color: 'rgba(131,141,158,.1)', // 设置网格的颜色},},},series: [{name: '雷达图',type: 'radar',// areaStyle: {normal: {}},data: [{value: [28, 22, 25, 23, 30, 21, 17, 11, 29, 25],name: '当前部门',itemStyle: {normal: {color: '#5B8FF9',lineStyle: {color: '#5AD8A6',},},},},{value: [30, 19, 28, 26, 22, 26, 17, 21, 28, 24],name: '集团大盘',itemStyle: {normal: {color: '#5AD8A6',lineStyle: {width: 1,color: 'rgba(60,135,213,.3)',},},},}]}]};this.myChartOne = echarts.init(document.getElementById('myChart3'))this.myChartOne.setOption(option)},format(percentage) {return percentage === 100 ? '满' : `${percentage}%`;}}}

一定要在mounted生命周期里调用一下，确保dom元素已经挂载到页面中

vue中使用echarts做一个雷达图相关推荐

vue中使用Echarts绘制K线图
一.需求问题在开发项目中,我们可能会遇到这样的需求.在vue中使用Echarts绘制K线图,进行数据分析.下面是一个简单的K线图绘制,数据是伪造的,虽然不多,但是能够实现大致的K线图效果. 二.需求 ...
Vue 中使用 Echarts 实现项目进度甘特图
Vue 中使用 Echarts 实现项目进度甘特图参考:echarts实现甘特图(项目进度/任务进度) 简易版 1. 项目中安装 echarts npm i echarts 2. 实现甘特图 < ...
vue中使用echarts绘柱形图+折线图
一.完成后效果图二..vue文件完整代码 <template><divid="myMaxbar":style ...
使用ECharts 绘制一个雷达图对完成的雷达图需要的配置详解
为 ECharts 准备一个定义了宽高的 DOM <div :id="'container' + attrs.id" :class='["widget", ...
vue中利用echarts写一个飞机行径图
先写一个盒子盛放地图后面改进的图 <div class="com-container"><div class="com-chart" id ...
vue 中使用echarts 画对比折线图
第一步:npm install echarts -S 安装第二步:在main.js 全局引入 import echarts from 'echarts' Vue.prototype.$echarts ...
在vue中使用d3做一个动态加载的树形图
树形图数据量可能会很大,一次性全部加载可能会有延迟,所以一开始只加载一层节点的数据,当我们点击节点去展开的子节点的时候,再通过请求去加载子节点的数据,并更新到树上本demo中还添加了放大缩小.点击节 ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
vue+axios+echarts实现一个折线图
前端可视化是一个前端最基本的技能,要想做的好看,还是得借助一下百度家的echarts,那要怎么在Vue中使用echarts?这个官网没有给出实例,实例基本都是在jquery里面使用,引入的例子. Ec ...

vue中使用echarts做一个雷达图

1、安装echarts

2、使用

全局使用

vue中使用echarts做一个雷达图相关推荐

最新文章

热门文章