使用ECharts 绘制一个雷达图对完成的雷达图需要的配置详解

为 ECharts 准备一个定义了宽高的 DOM

 <div :id="'container' + attrs.id" :class='["widget", attrs.active == true ? "active" : ""]' :style="'width:' + (attrs.width) + 'px;'+ 'height:' + (attrs.height) + 'px;'+ 'display:' + attrs.display + ';'+ 'transform:rotate(' + attrs.style.rotate + 'deg);'+ 'opacity:' + (attrs.style.opacity / 100) + ';'"></div>

实例化填充option

async initEcharts() {this.chart = echarts.init(document.getElementById('container' + this.attrs.id))//构建填充optionthis.buildOption()this.chart.setOption(this.option)},

设置echarts所需的配置项

     buildOption() {// console.log('buildOption', this.showData)let style = this.attrs.style;let data = JSON.parse(this.attrs.data)// 雷达图配置this.option.radar = [{// 雷达图的指示器indicator: data[0].indicator,center: [style.centerX + "%", style.centerY + "%"], // 圆心坐标点radius: style.radius, // 外半径值startAngle: style.startAngle, //坐标系起始角度  第一个轴的位置splitNumber: style.splitNumber, // 指示器轴的分割段数shape: style.shapeType, // 雷达图绘制类型，支持 'polygon' 和 'circle'// symbolSize: 12,// 雷达图每个指示器名称的配置项。// axisName 无法使用 用 name代替name: {show: style.axisNameShow,formatter: "{value}",color: style.axisNameColor,fontSize: style.axisNameFontSize,fontWeight: style.axisNameFontWeight,fontFamily: style.axisNameFontFamily,backgroundColor: style.axisNameBackgroundColor,padding: [style.axisNamePaddingTop, style.axisNamePaddingRight, style.axisNamePaddingBottom, style.axisNamePaddingLeft],borderRadius: style.axisNameBorderRadius,},nameGap: style.nameGap, // 指示器名称和指示器轴的距离。// 坐标轴轴线相关设置axisLine: {show: style.axisLineShow, // 显示坐标轴轴线symbol: [style.axisLineSymbolIn, style.axisLineSymbolOutside], // 轴线两端图形symbolSize: [style.axisLineSymbolSizeW, style.axisLineSymbolSizeH], // 图形大小lineStyle: {color: style.axisLineLineStyleColor, // 轴线的颜色width: style.axisLineLineStyleWidth, // 轴线的宽度type: style.axisLineLineStyleType, // 轴线的类型 'solid' 'dashed' 'dotted'},},// 分隔区域  splitArea: {show: style.splitAreaShow,areaStyle: {color: style.splitAreaColorList.split(","),},},// 分隔线splitLine: {show: style.splitLineShow,lineStyle: {color: style.splitLineLineStyleColor,width: style.splitLineLineStyleWidth,type: style.splitLineLineStyleType, // 轴线的类型 'solid' 'dashed' 'dotted'},},},]this.option.series = [{type: "radar",  // 设置雷达类型symbol: style.shapeShow ? style.customShape : style.shape,  // 设置图形 是否为自定义还是系统给的图形symbolSize: [style.dataLineSymbolSizeW, style.dataLineSymbolSizeH], // 图形大小lineStyle: {width: style.dataLineStyleWidth,},emphasis: {lineStyle: {width: style.dataEmphasisWidth,},},// 有面积图 去掉没有面积areaStyle: {},data: data[0].data,},]this.option.color = this.attrs.style.legendColorList.split(","); //色系this.setPadding() //内边距this.setTitle() //标题this.setLabel() //值标签this.setTooltip() //提示框this.setToolbox() //工具箱this.option.series[0].label.position = 'center'},

默认数据

var eRadarAttr = {id: 310,pid: 0,dataVisualizationId: 0,label: "雷达图",name: "eRadar",active: false,draggable: true,resizable: true,width: 410,height: 260,x: 100,y: 100,px: 0,py: 0,zindex: 1,showZIndex: 1,display: "block",style: {//基本rotate: 0, //旋转角度opacity: 100, //透明度// 图形样式centerX: 50, //圆心坐标点centerY: 50,radius: 120, // 雷达图大小startAngle: 0, //坐标系起始角度  第一个轴的位置splitNumber: 5, // 指示器轴的分割段数shapeType: "circle", // 雷达图绘制类型，支持 'polygon' 和 'circle'// 指示器名称的配置项axisNameShow: true,axisNameColor: "#fff",axisNameFontSize: 16,axisNameFontWeight: 400,axisNameFontFamily: "Microsoft YaHei",axisNameBackgroundColor: "",axisNamePaddingTop: 0,axisNamePaddingBottom: 0,axisNamePaddingLeft: 0,axisNamePaddingRight: 0,axisNameBorderRadius: 0,nameGap: 10, // 指示器名称和指示器轴的距离// 内边距paddingTop: 30,paddingBottom: 30,paddingLeft: 80,paddingRight: 30,maxLoadNum: 2000, //最大加载量clearInter: false, // 开启动画animationTime: 3, // 动画时间//标题titleText: "",titleFontFamily: "Microsoft YaHei",titleFontWeight: 400,titleFontSize: 16,titleColor: "#fff",subTitleText: "",subTitleFontFamily: "Microsoft YaHei",subTitleFontWeight: 400,subTitleFontSize: 12,subTitleColor: "#fff",titleTop: "top", // 垂直位置titleLeft: "left", //水平位置// 坐标轴轴线相关设置axisLineShow: false, // 显示坐标轴轴线axisLineSymbolIn: "arrow", //["none", "arrow"], // 轴线两端图形axisLineSymbolOutside: "arrow", //["none", "arrow"], // 轴线两端图形axisLineSymbolSizeW: 5, // 图形大小axisLineSymbolSizeH: 5, // 图形大小axisLineLineStyleColor: "yellow", // 轴线的颜色axisLineLineStyleWidth: 1, // 轴线的宽度axisLineLineStyleType: "solid", // 轴线的类型 'solid' 'dashed' 'dotted'// 分割样式splitAreaShow: true, // 显示分割区域splitAreaColorList: "#4671C6,#7CCE7A,#FFC655,#FF5C5C,#4BC2DF", // 分割区域色系splitLineShow: true,splitLineLineStyleColor: "#fff",splitLineLineStyleWidth: 1,splitLineLineStyleType: "solid",// 雷达数据线条样式shapeShow: false, // 使用系统颜色shape: "circle", // 形状customShape:'path://"M61.3,2c6.2,0,12.1,1.1,17.5,3.4C84.3,7.7,89,10.8,93,14.6c4.1,4,7.3,8.6,9.7,13.8c2.4,5.2,3.5,10.9,3.5,16.9c0,8.1-2.4,16.9-7.1,26.4c-4.7,9.4-9.9,18.2-15.5,26.2c-5.6,8-13.1,17.4-22.4,28.1c-9.3-10.7-16.8-20-22.4-28.1c-5.6-8-10.8-16.8-15.5-26.2c-4.7-9.4-7.1-18.2-7.1-26.4c0-6,1.2-11.6,3.5-16.9c2.4-5.2,5.6-9.8,9.7-13.8c4-3.9,8.8-7,14.2-9.2C49.2,3.1,55,2,61.3,2L61.3,2z"',dataLineSymbolSizeW: 5, // 数据图形大小dataLineSymbolSizeH: 5,dataLineStyleWidth: 1, // 数据线条样式dataEmphasisWidth: 3,//图例legendShow: true,legendFontFamily: "Microsoft YaHei",legendFontWeight: 400,legendFontSize: 16,legendColor1: "#fff",legendPosition: "left-top",legendColorList: "#4671C6,#7CCE7A,#FFC655,#FF5C5C,#4BC2DF", //图例色系legendPageMarkerColor: "#fff", //分页器：箭头legendPageMarkerSize: 12, //分页器：箭头legendPageTextColor: "#fff", //分页器：文本legendPageTextSize: 12, //分页器：文本legendItemWidth: 25, // 图例宽legendItemHeight: 14, // 图例高// 波纹样式legendShapeShow: false, // 使用系统颜色legendShape: "roundRect", // 形状legendCustomShape:'path://"M61.3,2c6.2,0,12.1,1.1,17.5,3.4C84.3,7.7,89,10.8,93,14.6c4.1,4,7.3,8.6,9.7,13.8c2.4,5.2,3.5,10.9,3.5,16.9c0,8.1-2.4,16.9-7.1,26.4c-4.7,9.4-9.9,18.2-15.5,26.2c-5.6,8-13.1,17.4-22.4,28.1c-9.3-10.7-16.8-20-22.4-28.1c-5.6-8-10.8-16.8-15.5-26.2c-4.7-9.4-7.1-18.2-7.1-26.4c0-6,1.2-11.6,3.5-16.9c2.4-5.2,5.6-9.8,9.7-13.8c4-3.9,8.8-7,14.2-9.2C49.2,3.1,55,2,61.3,2L61.3,2z"',//值标签labelShow: true,labelUnit: "",labelFontSize: 16,labelFontFamily: "Microsoft YaHei",labelFontWeight: 400,labelColor: "#fff",//提示框tooltipShow: true,tooltipColor: "#ffffff", //文字颜色tooltipFontFamily: "Microsoft YaHei",tooltipFontWeight: 400,tooltipFontSize: 12,tooltipBg: "#000000", //背景色tooltipBgOpacity: 50, //背景透明度tooltipBgRGBA: "rgba(00, 00, 00,0.5)", //背景RGBA形式的值tooltipBoxShadowColor: "#000000", //阴影颜色tooltipBoxShadowSize: 5, //阴影大小tooltipFormatterName: true,tooltipFormatterNameText: "名字:",tooltipFormatterValue: true,tooltipFormatterValueText: "值：",tooltipFormatterPercentage: true,tooltipFormatterPercentageText: "占比：",//工具箱showDataZoom: false, //区域缩放showDataView: false, //数据视图showMagicType: false, //图表类型showStacking: false, //是否堆叠showRestore: false, //还原showSaveAsImage: false, //保存图片//数据dataType: "static", //数据类型：静态数据【默认】、api接口、数据模型dataXField: "name", //X轴 数据字段dataYField: "value", //Y轴 数据字段dataFields: "name,value", //字段列表//api接口api: "", //api接口apiXField: "name", //X轴 数据字段apiYField: "value", //Y轴 数据字段apiTimeOut: config.apiTimeOut, //api刷新时间，默认 10秒，最低1秒//数据模型modelId: 0, //数据模型idmodelXField: "name", //X轴 数据字段modelYField: "value", //Y轴 数据字段modelFunc: "avg", //聚合函数 默认avg 平均值modelTimeOut: config.modelTimeOut, //模型数据刷新时间，默认 10秒，最低5秒//交互interactive: "", //交互组件id序列，默认没有绑定交互组件interactiveWhere: "", //交互组件条件序列，与interactive id的顺序是一致的，默认没有绑定交互组件时，是空的},data: `[{"indicator": [{ "name": "2010年" },{ "name": "2011年" },{ "name": "2012年" },{ "name": "2013年" },{ "name": "2014年" }],"data": [{"value": [100, 8, 0.4, -80, 2000]},{"value": [60, 5, 0.3, -100, 1500]}]}]`,
};

使用ECharts 绘制一个雷达图对完成的雷达图需要的配置详解相关推荐

HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）
HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 原文:HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 看到网上很多展示html5雪花飞动 ...
vue中使用ECharts实现中国地图配置详解（配官方配置地址）
前言: 1.实现自定义左下角的视觉映射组件(包括自定义颜色.文字.图元大小) 2.实现自定义悬浮提示框如下图所示: 实现步骤: 一.在vue中安装echarts 1.npm install echa ...
python可以画动态图吗_matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
学习python的道路是漫长的,今天又遇到一个问题,所以想写下来自己的理解方便以后查看. 在使用matplotlib的过程中,常常会需要画很多图,但是好像并不能同时展示许多图.这是因为python可视 ...
毫米波雷达系列 | 基于前后向空间平滑的MUSIC算法详解
毫米波雷达系列 | 基于前后向空间平滑的MUSIC算法详解文章目录毫米波雷达系列 | 基于前后向空间平滑的MUSIC算法详解 DOA阵列模型 MUSIC算法空间平滑算法整体流程仿真代码忙了 ...
鱼骨图分析法实际案例_【管理工具详解】鱼骨图分析法
第一部分鱼骨头分析法一.鱼骨图分析法的由来鱼骨图是由日本管理大师石川馨先生所发明出来的,故又名石川图.鱼骨图是一种发现问题"根本原因"的方法,它也可以称之为"Ish ...
计算机硬件图标准画法,机械制图培训中剖视图的画法详解
机械制图培训中剖视图的画法详解机械制图是机械工程语言,用图样表示机械产品的结构形状.尺寸大小.工作原理和技术要求,是机械设计与机械制造的基础学科,每一个从事机械行业的人员都应该懂机械制图. 机械CA ...
Ubuntu14.04下Neo4j图数据库官网安装部署步骤（图文详解）（博主推荐）
不多说,直接上干货! 说在前面的话首先,查看下你的操作系统的版本. root@zhouls-virtual-machine:~# cat /etc/issue Ubuntu 14.04.4 LTS ...
Ubuntu16.04下Neo4j图数据库官网安装部署步骤（图文详解）（博主推荐）
不多说,直接上干货! 说在前面的话首先,查看下你的操作系统的版本. root@zhouls-virtual-machine:~# cat /etc/issue Ubuntu 16.04.1 LTS ...
图形化管理工具Portaniner安以及 Docker镜像详解（三）
文章目录图形化管理工具Portaniner安装 Docker镜像详解 1 什么是镜像 2 Docker镜像加载原理 3 分层理解提交镜像常用容器部署 Nginx部署图形化管理工具Portani ...

使用ECharts 绘制一个雷达图对完成的雷达图需要的配置详解

使用ECharts 绘制一个雷达图对完成的雷达图需要的配置详解相关推荐

最新文章

热门文章

使用ECharts 绘制一个雷达图 对完成的雷达图需要的配置详解

使用ECharts 绘制一个雷达图 对完成的雷达图需要的配置详解相关推荐

最新文章

热门文章

使用ECharts 绘制一个雷达图对完成的雷达图需要的配置详解

使用ECharts 绘制一个雷达图对完成的雷达图需要的配置详解相关推荐