给echarts series 自定义参数

MENU

• 属性

• 设置饼图或环形图的标签线(引导线、指示先)
• 设置(胡须)显示内容
• 鼠标悬浮禁止图表高亮和放大效果
• 图表高亮(鼠标悬浮)状态的配置
• 鼠标悬浮禁止显示图例文本
• 鼠标悬浮禁止显示值
• 设置图例文本颜色
• 图例的排列方向
• 设置折线和折现点颜色
• 设置柱状图背景
• 设置圆环正副标题
• 设置环形图的渐变背景
• 设置环形图的鼠标悬浮工具提示
• 设置横向柱状图的单位
• 设置柱状图X轴文字方向
• 设置柱状图的图例显示与隐藏
• 取消坐标刻度线

• 案例

• 圆角环形图
• 圆环

• 其他

---

属性

设置饼图或环形图的标签线(引导线、指示先)

option = {
    series: [
	    {
	        type: 'pie',
	        labelLine: {
	        	// 显示标签线
	            show: true,
	            // 标签线长度
	            length: 20,
	            // 标签线末端到文本的距离
	            length2: 15,
	            lineStyle: {
	            	// 标签线颜色
	                color: '#ff0000',
	                // 标签线宽度
	                width: 2,
	                // 标签线类型
	                type: 'solid'
	            }
	        },
	    }
    ]
};

---

设置(胡须)显示内容

label: {
	show: true,
	position: 'outside',
	formatter(para) {
		return '占比: ' + para.value + '\n' + '人数: ' + para.value;
	}
},

---

鼠标悬浮禁止图表高亮和放大效果

在ECharts中，emphasis属性用于定义图表元素在高亮状态下的样式。
focus: 'none'属性指定了高亮状态下的行为。none表示禁用高亮状态，也就是说当鼠标悬停在图表元素上时，不会触发任何高亮效果。
scale: false属性用于指定是否在高亮状态下放大图表元素。设置为false表示禁用放大效果，也就是说图表元素不会在高亮状态下放大。
这些设置可以用于控制图表元素的交互行为。

emphasis: { focus: 'none', scale: false }

---

图表高亮(鼠标悬浮)状态的配置

此操作会显示图例标题，与图表的值无关，这会在图表上显示图例标题。
emphasis: 表示当图表元素处于高亮状态时的配置。
label: 表示图表元素的标签配置。
show: true: 表示在高亮状态下显示标签。
fontSize: 28: 设置标签文本的字体大小为28。
fontWeight: 'bold': 设置标签文本的字体粗细为粗体。

emphasis: { label: { show: true, fontSize: 28, fontWeight: 'bold' } }

---

鼠标悬浮禁止显示图例文本

在ECharts中，可以通过配置legend选项中的tooltip属性来禁止鼠标悬浮时显示图例的提示框。具体来说，可以将tooltip设置为{ show: false }。

legend: { tooltip: { show: false } },

---

鼠标悬浮禁止显示值

在ECharts中，可以通过设置tooltip配置项来禁用鼠标悬浮时显示的提示框。具体来说，可以将tooltip的show属性设置为 false。

tooltip: { show: false },

---

设置图例文本颜色

在ECharts中，通过legend配置项来设置图例的文本颜色。

legend: { textStyle: { color: '#ff0000' } },

---

图例的排列方向

在ECharts中，legend配置项中的orient属性用于设置图例的排列方向。它可以取两个值horizontal和vertical，orient: 'horizontal'时图例水平排列；orient: 'vertical'时图例垂直排列。通过设置orient属性，可以控制图例项在图表中的排列方式。

legend: { orient: 'horizontal' },

---

设置折线和折现点颜色

itemStyle: { normal: { // 改变折线点的颜色 color: '#a80000', lineStyle: { // 改变折线颜色 color: '#a80000' } } }

2023-12-13已经不支持normal属性，可以把normal属性去掉。

---

设置柱状图背景

series: [
	{
		data: [],
		type: 'bar',
		// 是否设置背景
		showBackground: true,
		// 自定义背景色
		backgroundStyle: {
			color: 'rgba(180, 180, 180, 0.8)'
		}
	}
]

---

设置圆环正副标题

option = {
	title: {
		// 正标题
		text: '90%',
		// 正标题样式
		textStyle: {
			// 自定义正标题颜色
			color: "#66FFFF",
			// 自定义正标题文字大小
			fontSize: 18
		},
		// 副标题
		subtext: '免费/异常放行',
		// 副标题样式
		subtextStyle: { 
			// 自定义副标题颜色
			color: '#00D5E2',
			fontSize: 17,
			// 自定副标题字体粗细
			fontWeight: 400
		},
		// 水平居中
		left: "center",
		// 垂直居中
		top: "center",
		// 主、副标题水平居中显示
		// 2023-04-05 不起作用
		// textAlign: 'center'
	}
}

---

设置环形图的渐变背景

---

设置环形图的鼠标悬浮工具提示

方式一

属于与series字段同级。formatter: "{c}"显示值，formatter: "{d}%"显示百分比，formatter: "{c} {d}%"显示值和百分比，formatter: "{b}"显示名称，formatter: "{b}: {c} {d}%"显示名称、值和百分比，双引号相当于${ }，所以可以写任何值。

tooltip: { // 悬停指示 trigger: "item", formatter: "{b}: {c} {d}%" }

---

方式二

tooltip: {
  trigger: "axis",
  axisPointer: {
    type: "shadow",
  },
  formatter(params) {
    let res = `<div style="font-weight: 700;">${params[0].name}</div>`,
      sum = 0;

    for (let i = 0; i < params.length; i++) {
      let item = params[i],
        items = series[item.seriesIndex];

      if (items.name !== null) {
        sum += item.data;

        res += `<div><span class="tooltip" style="background: ${item.color};"></span>${item.seriesName}: ${item.data}</div>`;
      }
    }

    res += `<div><span class="tooltip" style="background: transparent;"></span>总计: ${sum}</div>`;

    return res;
  },
}

---

设置横向柱状图的单位

设置值所在位置的单位

yAxis: {
	type: "value",
	axisLabel: {
		formatter: "{value} 个",
	}
}

---

设置左右每项元素的单位

yAxis: [
	// 左侧值
	{
		data: [],
		axisLabel: {
			formatter: '{value}' + '个'
		},
	},
	// 右侧值
	{
		data: [],
		axisLabel: {
			formatter: "{value} 个",
		},
	},
]

---

设置总体单位

如果只需要一个单位，那么使用对象设置即可。如果是多个，那么使用数组即可。title属性与series同级。

title: { text: '单位/个', right: '0%', textStyle: { fontSize: 12, color: '#fff' } }

---

设置柱状图X轴文字方向

xAxis: {
	data: [],
	axisLabel: {
		show: true,
		textStyle: {
			fontSize: 12,
			color: '#fff'
		},
		// 文字间隔，即隔多少个柱状图显示一次
		// interval: 0,
		// 垂直文字
		// formatter: (value) => value.split("").join("\n"),
		// 文字倾斜
		// rotate: 20,
		// 超出隐藏并显示省略号
		formatter: (value) => {
			if (value.length > 3) return `${value.slice(0, 3)}...`;
			
			return value;
		},
	},
}

---

设置柱状图的图例显示与隐藏

legend: {
  // 设置show为false，即隐藏所有图例
  show: true,
  // 不需要显示的就不写
  data: ["示例1", "示例2", "示例3"],
}

---

取消坐标刻度线

axisTick: {
	show: false
}

---

案例

圆角环形图

let option = {
  title: { text: "86%",
    textStyle: {
      color: "#66FFFF",
      // 圆环中间文字大小设置
      fontSize: 18,
    },
    // 副标题
    subtext: "免费/异常放行",
    subtextStyle: {
      // 副标题样式
      color: "#00D5E2",
      fontSize: 17,
      fontWeight: 400,
    },
    left: "center",
    top: "center",
  },
  angleAxis: {
    // 满分
    max: 100,
    // 逆时针
    clockwise: true,
    // 隐藏刻度线
    axisLine: { show: false, },
    axisTick: { show: false, },
    axisLabel: { show: false, },
    splitLine: { show: false, },
  },
  radiusAxis: {
    type: "category",
    // 隐藏刻度线
    axisLine: { show: false, },
    axisTick: { show: false, },
    axisLabel: { show: false, },
    splitLine: { show: false, },
  },
  polar: {
    // 图形在画布中的位置
    center: ["50%", "50%"],
    // 图形大小
    radius: "100%",
  },
  series: [
    {
      type: "bar",
      // 有效的设置渐变背景
      itemStyle: {
          normal: {
               color: {
                   colorStops: [
                       {
                           // 0% 处的颜色
                           offset: 0, color: '#00FFF4'
                       },
                       {
                           // 100% 处的颜色
                           offset: 1, color: '#0086C1'
                       }
                   ]
               },
           }
       },
      data: [
        {
          value: 86,
          // 在项目中设置渐变背景无效
          // itemStyle: {
            // normal: {
              // color: {
                // colorStops: [
                  // {
                    // offset: 0,
                    // color: "#00FFF4", // 0% 处的颜色
                  // },
                  // {
                    // offset: 1,
                    // color: "#0086C1", // 100% 处的颜色
                  // },
                // ],
              // },
            // },
          // },
        },
      ],
      coordinateSystem: "polar",
      roundCap: true,
      // 环的宽度
      barWidth: 18,
      // 两环重叠
      barGap: "-100%",
      z: 2,
    },
    {
      // 灰色环
      type: "bar",
      data: [
        {
          value: 100,
          itemStyle: {
            color: "#E6ECF9",
            shadowColor: "rgba(13, 218, 254, .3)",
            shadowBlur: 2,
            shadowOffsetY: 2,
          },
        },
      ],
      coordinateSystem: "polar",
      roundCap: true,
      barWidth: 18,
      // 两环重叠
      barGap: "-100%",
      z: 1,
    },
  ],
};

---

---

圆环

option = {
  title: {
    show: true,
    text: '主标题',
    x: 'center',
    y: 'center',
    textStyle: {
      fontFamily: 'Arial, Verdana, sans...',
      fontSize: 12,
      fontStyle: 'normal',
      fontWeight: 'normal',
      color: '#ffffff'
    },
    zlevel: 0,
    z: 6
  },
  series: [
    {
      type: 'pie',
      radius: ['70%', '90%'],
      center: ['50%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: { borderRadius: 16 },
      label: {
        normal: {
          show: true,
          fontSize: 26
        }
      },
      labelLine: { show: true },
      color: ['#4CAFFE', '#F5C847'],
      silent: true,
      data: [
        {
          value: 686,
          name: '85%'
        },
        {
          value: 300,
          name: '15%'
        }
      ]
    }
  ]
};

---

---

其他

export const public_echarts = {
    title: {
        text: '72%',
        textStyle: {
            color: "#000000",
            // 圆环中间文字大小设置
            fontSize: 18
        },
        left: "center",
        top: "center"
    },
    angleAxis: {
        // 满分
        max: 100,
        // 逆时针
        clockwise: true,
        // 隐藏刻度线
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false
        }
    },
    radiusAxis: {
        type: "category",
        // 隐藏刻度线
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false
        }
    },
    polar: {
        // 图形在画布中的位置
        center: ["50%", "50%"],
        // 图形大小
        radius: "100%"
    },
    series: [
        {
            type: "bar",
            data: [],
            coordinateSystem: "polar",
            roundCap: true,
            // 环的宽度
            barWidth: 18,
            // 两环重叠
            barGap: "-100%",
            z: 2
        },
        {
            // 灰色环
            type: "bar",
            data: [],
            coordinateSystem: "polar",
            roundCap: true,
            barWidth: 18,
            // 两环重叠
            barGap: "-100%",
            z: 1
        }
    ]
};

this.$beInMotionEcharts("idOption", "public_echarts", {
  series: [
    {
      // 有颜色的环的颜色
      data: [
        {
          name: "占比",
          value: 702,
          itemStyle: {
            normal: {
              color: "#3CBE99",
            },
          },
        },
      ],
    },
    {
      // 背景环颜色及值
      data: [
        {
          value: 100,
          itemStyle: {
            color: "#E6ECF9",
            shadowColor: "rgba(0, 0, 0, 0.1)",
            shadowBlur: 2,
            shadowOffsetY: 2,
          },
        },
      ],
    },
  ],
});