使用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))
			//构建填充option
			this.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, //数据模型id
    modelXField: "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]
      }
    ]
  }]`,
};

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值