首页 前端知识 给echarts图表线条、数据点和区域设置颜色

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

2024-08-18 22:08:32 前端知识 前端哥 707 883 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16119.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!