在实际的项目中,用到Echart的时候,除了一些数据显示,经常还会有一些,别的显示,比如,百分比,水印,或者其他图标。
我这里介绍一个属性: graphic 。
- 如果给echart添加水印,观望有案例,不在赘述。
- 如下图,需要达到如图,给某个位置添加一些元素。
我这里通过使用graphic, 爸想要添加的元素,定位到各自相应的位置, 既然说是定位, 那就需要知道坐标,就需要用到Echart一个方法 convertToPixel : 转换坐标系上的点到像素坐标值。 - 第一个柱状图花了一个虚线, 首先我们可以获取到图标的数据data是一个数组,里面的值是每一个柱状图的y轴的值,通过遍历这个数组结合convertToPixel方法,得到每一个柱状图值的坐标值。
` const [Grifics, setGrifics] = useState<{x: number, y : number}[]>([]);
useEffect(() => {
const arr: {x: number, y : number}[] = [];
data?.map((item: number, index: number) => {
const chartInit = chartRef.current?.getEchartsInstance();
const x = chartInit.convertToPixel({xAxisIndex: 0}, index ?? 0)
const y = chartInit.convertToPixel({yAxisIndex: 0}, item)
arr.push({x: x, y: y})
})
setGrifics(arr)
},[data]);`
上述代码得到的Grifics 值就是途中每一个值的坐标位置。
4. 图中的第一个柱状图画了一个虚线, 官网中有一些属性,位移,旋转, 样式等可以根据需求来用,它的代码是
{
type: "group",
height: 200,
position: [0, 0],
children: [
{
type: 'line',
z: 100,
shape: {
x1: Grifics?.[0]?.x, //起始点的x坐标
y1: Grifics?.[0]?.y, //起始点的y坐标
x2: Grifics?.[0]?.x + 100, //终点的x坐标
y2: Grifics?.[0]?.y, //终点点的y坐标
},
style: {
stroke: '#f21',
lineDash: [3, 5],
lineWidth: 2,
},
}
],
},
- 图标的代码
{
type: "image",
id: 1,
z: 120,
left: Grifics?.[1]?.x,
top: Grifics?.[1]?.y,
style: {
image: `${Warn}`,
width: 20,
height: 20
},
onclick: warnClick
},
- 最后一个组合的圆形和文字
{
type: "group",
children: [{
type: "circle",
z: 120,
shape: {
cx: Grifics?.[3]?.x,
cy: Grifics?.[3]?.y - 30,
r: 20
},
style: {
stroke: '#f21',
fill: '#fff'
}
}, {
type: "text",
z: 120,
style: {
x: Grifics?.[3]?.x - 10,
y: Grifics?.[3]?.y - 30,
text: 'info'
}
}]}