给echarts图表线条、数据点和区域设置颜色

阿 尭 2024-08-20 10:03:03 阅读 63

<code> let myChart = echarts.init(document.getElementById("chartmainCop"));

// 获取当前干部的各项评分

const allIndicators = Object.keys(this.dialogEacherTable[0])

.filter(key => key !== "CadreID" && key !== "xm")

.map(key => ({

name: key,

max: 100

}));

const colors = ["#D1351B", "#7DA5F0", "#90C66C"]; //边框色

const areaColors = [

"rgba(241,176,166,0.5)",

"rgba(229,243,253,0.5)",

"rgba(234,245,226,0.5)"

]; //覆盖色

const seriesData = this.dialogEacherTable.map((item, index) => {

const color = colors[index % colors.length];

const areaColor = areaColors[index % areaColors.length];

return {

value: Object.keys(item)

.filter(key => key !== "CadreID" && key !== "xm")

.map(key => item[key]),

name: item.xm,

lineStyle: {

color: color

},

itemStyle: {

color: color

},

areaStyle: {

color: areaColor

}

};

});

const option = {

tooltip: { },

legend: {

data: seriesData.map(item => item.name),

bottom: 10

},

radar: {

name: {

textStyle: {

color: "#000",

borderRadius: 1,

padding: [1, 1]

}

},

indicator: allIndicators,

radius: "60%",

fontSize: 14

},

series: [

{

name: "各项能力",

type: "radar",

data: seriesData

}

]

};

myChart.setOption(option);

配置项解析:

tooltip:原本有自定义格式化函数,但被注释掉了,用于显示鼠标悬停时的提示信息。legend:定义了图例的位置和数据,数据来源于seriesData的干部名字。radar:配置雷达图的指标、半径比例和字体大小。series:定义了数据系列,包括系列的名字、类型(雷达图)和数据来源。

这里主要使用到了3个边框色和三个覆盖色,因为我的业务里面最多只需要三种颜色就可以。并把颜色值赋值给lineStyle、itemStyle、areaStyle

 

lineStyle

lineStyle用于配置线条的样式,它通常用在折线图、雷达图等图表中。主要属性包括:

color:线条的颜色。width:线条的宽度。type:线条的类型,如'solid'(实线)、'dashed'(虚线)或'dotted'(点线)。shadowBlurshadowColorshadowOffsetXshadowOffsetY:阴影效果的配置。

例如:

lineStyle: {

color: '#ff0000',

width: 2,

type: 'dashed'

}

itemStyle

itemStyle用于配置图表中单个数据项的样式,适用于多种图表类型,如折线图的数据点、柱状图的柱子、饼图的扇区等。主要属性包括:

color:数据项的颜色。borderColor:边框颜色。borderWidth:边框宽度。borderType:边框类型。shadowBlurshadowColorshadowOffsetXshadowOffsetY:阴影效果的配置。

itemStyle: {

color: '#00ff00',

borderColor: '#000000',

borderWidth: 1

}

areaStyle

areaStyle用于配置图表中区域填充的样式,常用于折线图的区域填充。主要属性包括:

color:填充颜色,可以是纯色,也可以是渐变色。opacity:透明度,取值范围是0~1。

areaStyle: {

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

{offset: 0, color: 'rgba(0,0,255,0.3)'},

{offset: 1, color: 'rgba(0,0,255,0)'}

])

}

lineStyleitemStyleareaStyle分别被用来配置线条颜色、数据点颜色和区域填充颜色。这样可以使得图表的视觉效果更加丰富和美观。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。