echarts雷达图示例

最近做可视化比较多，就常用的图表类型做了一下总结。

因为做可视化的图表代码量非常大，所以会把echarts图表单独抽离出来，封装成一个组件，也可以复用，所以这里我直接把封装的组件直接放在这里，是可以直接拿来用的，根据所需稍作修改即可。

这里都是用的vue3，其实和vue2差不多，各式各样的花里胡哨的图表无非就是option配置不同，如果使用的是vue2，在写法上稍作修改即可。

上篇博客有写 echarts 图表组件封装模板，vue2、vue3都有可以参考echarts图表组件封装模板

示例1

<template><div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { fontChart } from '@/utils/echartPxToRem'
import * as echarts from "echarts";
import { onMounted, watch, onUnmounted } from "vue";const props = defineProps({id: {type: String,required: true,},nameArray: {type: Array,default: () => ([{name: "轻度脂肪堆积",max: 1000,},{name: "健康",max: 1000,},{name: "严重脂肪堆积",max: 1000,},{name: "偏瘦",max: 1000,}])},radarData: {type: Array,default: () => [182, 321.2, 222.1, 425.3]}
});watch(() => props.yValue,(newValue) => {drawBar()},{deep: true}
)let charts = "";  // 这里不要让它成为响应式onMounted(() => {drawBar();
});onUnmounted(() => {window.removeEventListener('resize', selfAdaption)
})
//  初始化echarts
const drawBar = () => {charts = echarts.init(document.getElementById(props.id));let option = {radar: {center: ["50%", "50%"],radius: "75%",name: {formatter: function (name, indicator) {let arr;arr = ["{a|" + name + "}"];return arr.join("\n");},textStyle: {rich: {//根据文字的组设置格式a: {color: "#fff",fontSize: fontChart(14),// fontWeight: 600,fontFamily: "Source Han Sans CN",},// b:{//     fontSize:14,//     verticalAlign:'top',//     width:57,//     color:'blue',//     fontWeight:600,//     align:'center'// },},},},nameGap: 0,indicator: props.nameArray,splitLine: {show: false,},splitArea: {show: false,},axisLine: {show: false,},},series: [{// name: '家庭融合包',type: "radar",data: [props.radarData],// value:14,label: {show: true,formatter: function (params) {// console.log(params);return (( params.value / 800 ) * 100).toFixed(2)+ "%";},color: "#fdd55f",// position:[-20,-10,-10,-10],align: "center",distance: 0,fontSize: fontChart(12),align: "center",},symbolSize: [6, 6],lineStyle: {//边缘颜色width: 0,},itemStyle: {borderWidth: fontChart(1),color: "#fff",borderColor: "#F2F063",},areaStyle: {color: "#04d3de",opacity: 0.9,},},{type: "radar",data: [[1000, 1000, 1000, 1000, 1000, 1000]],symbol: "none",lineStyle: {width: 0.1,color: '#04d8e3',type: 'dashed'},itemStyle: {color: "#04d8e3",},areaStyle: {color: "#04d8e3",opacity: 0.06,},},{type: "radar",data: [[900, 900, 900, 900, 900, 900]],symbol: "none",lineStyle: {width: 0.1,color: '#04d8e3',type: 'dashed'},itemStyle: {color: "#04d8e3",},areaStyle: {color: "#04d8e3",opacity: 0.06,},},{type: "radar",data: [[800, 800, 800, 800, 800, 800]],symbol: "none",lineStyle: {width: 0,},itemStyle: {color: "#04d8e3",},areaStyle: {color: "#04d8e3",opacity: 0.10,},},{type: "radar",data: [[700, 700, 700, 700, 700, 700]],symbol: "none",lineStyle: {width: 0,},itemStyle: {color: "#04d8e3",},areaStyle: {color: "#04d8e3",opacity: 0.10,},},{type: "radar",data: [[600, 600, 600, 600, 600, 600]],symbol: "none",lineStyle: {width: 0,},itemStyle: {color: "#04d8e3",},areaStyle: {color: "#04d8e3",opacity: 0.17,},},{type: "radar",data: [[500, 500, 500, 500, 500, 500]],symbol: "none",lineStyle: {width: 0,},itemStyle: {color: "#04d8e3",},areaStyle: {color: "#04d8e3",opacity: 0.17,},},{type: "radar",data: [[400, 400, 400, 400, 400, 400]],symbol: "none",lineStyle: {width: 0,},itemStyle: {color: "#04d8e3",},areaStyle: {color: "#04d8e3",opacity: 0.13,},},],};charts.setOption(option)window.addEventListener('resize', selfAdaption)
};//  自适应
function selfAdaption() {if(!charts) returncharts.resize()drawBar()
}
</script>

示例2

<template><div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { fontChart } from '@/utils/echartPxToRem'
import * as echarts from "echarts";
import { onMounted, watch, onUnmounted } from "vue";const props = defineProps({id: {type: String,required: true,},nameArray: {type: Array,default: () => ([{name: "轻度脂肪堆积",max: 1000,},{name: "健康",max: 1000,},{name: "严重脂肪堆积",max: 1000,},{name: "偏瘦",max: 1000,}])},radarData1: {type: Array,default: () => [582, 421.2, 422.1, 325.3]},radarData2: {type: Array,default: () => [142, 281.2, 182.1, 385.3]}
});watch(() => props.yValue,(newValue) => {drawBar()},{deep: true}
)let charts = "";  // 这里不要让它成为响应式onMounted(() => {drawBar();
});onUnmounted(() => {window.removeEventListener('resize', selfAdaption)
})
//  初始化echarts
const drawBar = () => {charts = echarts.init(document.getElementById(props.id));let option = {color: ['#fa0145', '#02f8f9'],tooltip: {show: true},grid: {// top: '25%',// bottom: '17%',left: '7%',right: '7%'},radar: {nameGap: fontChart(7),axisLine: {lineStyle: {color: '#0781c0',type: 'dashed'}},name: {color: '#fff',fontSize:fontChart(11)},splitLine: {lineStyle: {color: '#0781c0',type: 'dashed'}},splitArea: {show: false,areaStyle: {color: 'rgba(255,0,0,0)', // 图表背景的颜色},},indicator: props.nameArray},series: [{type: 'radar',data: [{value: props.radarData1,name: '风险统计',areaStyle: {color: '#fa0145',opacity: fontChart(0.1),},// lineStyle: {  // 线的颜色//   width: 1,//   color: 'yellow',//   type: 'dashed'// },itemStyle: { // 折线拐点标志的样式。normal: { // 普通状态时的样式lineStyle: {width: fontChart(1)},opacity: fontChart(0.2)},emphasis: { // 高亮时的样式lineStyle: {width: fontChart(5)},opacity: fontChart(1)}},},{value: props.radarData2,name: '年度',areaStyle: {color: '#02f8f9',opacity: fontChart(0.1),},// lineStyle: {  // 线的颜色//   width: 1,//   color: 'yellow',//   type: 'dashed'// },itemStyle: { // 折线拐点标志的样式。normal: { // 普通状态时的样式lineStyle: {width: fontChart(1)},opacity: fontChart(0.2)},emphasis: { // 高亮时的样式lineStyle: {width: fontChart(5)},opacity: fontChart(1)}},}]}]};charts.setOption(option)window.addEventListener('resize', selfAdaption)
};//  自适应
function selfAdaption() {if(!charts) returncharts.resize()drawBar()
}
</script>

echarts雷达图示例相关推荐

在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
echarts雷达图详细参数配置说明
应项目需求需要实现以下效果(当然也是最终的实现): 接下来主要关于下面的几个参数进行设置雷达图的圈数雷达图支持绘制的类型:圆形和多角形雷达图在容器中的位置:center决定也就是雷达图中心在容器 ...
h5页面的雷达图五边形_konva canvas插件写雷达图示例
最近,做了一个HTML5的项目,里面涉及到了雷达图效果,这里,我将react实战项目中,用到的雷达图单拎出来写一篇博客,供大家学习. 以下内容涉及的代码在我的gitlab仓库中: Konva canv ...
echarts 雷达图一些自我总结
最近在使用echarts雷达图的时候有一些新得想分享一下,话不多说直接看代码 var option={//title: { text:null }, // 隐藏图表标题legend: {show: t ...
echarts 雷达图_如何把Echarts用成在线数据可视化工具
今天虎哥给大家介绍个新工具,用于数据可视化,它是一个开源的插件,由JavaScript编写并实现的.可以流畅的运行在PC端和移动端,兼容绝大部分浏览器.Echarts具有强大的交互性,官网: http ...
echarts 雷达图_【带着canvas去流浪】绘制雷达图
使用原生canvasAPI绘制雷达图.(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示雷达图绘制的看起来并不复杂,无非就是一些路径点的连线,其中的难点都在于一些细 ...
echarts 雷达图
1.配置数据(1)配置各个边角极限值var dataMax=[{name:'名称',max:最大值, color:'标签颜色'}](2)配置展示数据var radaData=[{name:'数据名称' ...
echarts雷达图自定义射线颜色、边框效果和背景样式
目录 1.在官网找样例 2.初步改造示例,有个雏形 3.细节改造和优化 4.全部代码 5.原始效果和完成效果对比 1.在官网找样例样例地址:Examples - Apache ECharts 2.初 ...
ECharts雷达图拐点表示数值大小
最近接到一个需求,要求用雷达图的拐点表示占比,雷达图表示性格值. 在ECharts社区没有找到现成的例子,只找到拐点用不同颜色表.而折线图的拐点是可以表示数值大小的.经过对比.研究折线图数据和示例中的 ...

echarts雷达图示例

示例1

示例2

echarts雷达图示例相关推荐

最新文章

热门文章