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

2. let myChart = echarts.init(document.getElementById("chartmainCop"));
3.         // 获取当前干部的各项评分
5.         const allIndicators = Object.keys(this.dialogEacherTable[0])
6.           .filter(key => key !== "CadreID" && key !== "xm")
7.           .map(key => ({
8.             name: key,
9.             max: 100
10.           }));
11.         const colors = ["#D1351B", "#7DA5F0", "#90C66C"]; //边框色
12.         const areaColors = [
13.           "rgba(241,176,166,0.5)",
14.           "rgba(229,243,253,0.5)",
15.           "rgba(234,245,226,0.5)"
16.         ]; //覆盖色
17.         const seriesData = this.dialogEacherTable.map((item, index) => {
18.           const color = colors[index % colors.length];
19.           const areaColor = areaColors[index % areaColors.length];
20.           return {
21.             value: Object.keys(item)
22.               .filter(key => key !== "CadreID" && key !== "xm")
23.               .map(key => item[key]),
24.             name: item.xm,
25.             lineStyle: {
26.               color: color
27.             },
28.             itemStyle: {
29.               color: color
30.             },
31.             areaStyle: {
32.               color: areaColor
33.             }
34.           };
35.         });
36.         const option = {
37.           tooltip: { },
38.           legend: {
39.             data: seriesData.map(item => item.name),
40.             bottom: 10
41.           },
42.           radar: {
43.             name: {
44.               textStyle: {
45.                 color: "#000",
46.                 borderRadius: 1,
47.                 padding: [1, 1]
48.               }
49.             },
50.             indicator: allIndicators,
51.             radius: "60%",
52.             fontSize: 14
53.           },
54.           series: [
55.             {
56.               name: "各项能力",
57.               type: "radar",
58.               data: seriesData
59.             }
60.           ]
61.         };
62.         myChart.setOption(option);

复制代码

设置项剖析：

• tooltip：本来有自界说格式化函数，但被表明掉了，用于表现鼠标悬停时的提示信息。
  
• legend：界说了图例的位置和数据，数据泉源于seriesData的干部名字。
  
• radar：设置雷达图的指标、半径比例和字体巨细。
  
• series：界说了数据系列，包罗系列的名字、范例（雷达图）和数据泉源。
  

这里重要利用到了3个边框色和三个覆盖色，由于我的业务内里最多只须要三种颜色就可以。并把颜色值赋值给lineStyle、itemStyle、areaStyle
 
lineStyle

lineStyle用于设置线条的样式，它通常用在折线图、雷达图等图表中。重要属性包罗：

• color：线条的颜色。
  
• width：线条的宽度。
  
• type：线条的范例，如'solid'（实线）、'dashed'（虚线）或'dotted'（点线）。
  
• shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY：阴影效果的设置。
  

比方：

2. lineStyle: {
3.   color: '#ff0000',
4.   width: 2,
5.   type: 'dashed'
6. }

复制代码

itemStyle

itemStyle用于设置图表中单个数据项的样式，实用于多种图表范例，如折线图的数据点、柱状图的柱子、饼图的扇区等。重要属性包罗：

• color：数据项的颜色。
  
• borderColor：边框颜色。
  
• borderWidth：边框宽度。
  
• borderType：边框范例。
  
• shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY：阴影效果的设置。
  

2. itemStyle: {
3.   color: '#00ff00',
4.   borderColor: '#000000',
5.   borderWidth: 1
6. }

复制代码

areaStyle

areaStyle用于设置图表中地区添补的样式，常用于折线图的地区添补。重要属性包罗：

• color：添补颜色，可以是纯色，也可以是渐变色。
  
• opacity：透明度，取值范围是0~1。
  

2. areaStyle: {
3.   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
4.     {offset: 0, color: 'rgba(0,0,255,0.3)'},
5.     {offset: 1, color: 'rgba(0,0,255,0)'}
6.   ])
7. }

复制代码

lineStyle、itemStyle和areaStyle分别被用来设置线条颜色、数据点颜色和地区添补颜色。如允许以使得图表的视觉效果更加丰富和雅观。