为 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]
}
]
}]`,
};
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
