echarts图形标注

最新推荐文章于 2024-06-21 15:47:42 发布

_Nutra

最新推荐文章于 2024-06-21 15:47:42 发布

阅读量797

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/lling66/article/details/127423351

版权

本文介绍了Echarts中series-lines图表的标注方法，包括颜色配置、标记形状、阴影效果等。通过getMetricsListCoord函数生成标注数据，并在getSeriesBarPoint中设置标记图形的样式和位置，展示了如何自定义图表的视觉呈现。

摘要由CSDN通过智能技术生成

效果展示：

源码：


/**
 * series-lines图表标注
 * @param metricsList 指标数据
 * @param markPointColor 标记颜色
 */
const getMetricsListCoord = (metricsList,markPointColor)=>{
  let metricsListCoord:any = [];
  if(!metricsList.length){return }
  let curColor = '',curBackground = '',curBorderColor='';
  if(markPointColor.gradientControl){
    if(markPointColor.gradientDowntoUp){
      curColor = markPointColor.gradientStart; //下-上
      curBackground = markPointColor.gradientStart;
      curBorderColor = markPointColor.gradientStart;
    }else if(markPointColor.gradientUptoDown){
      curColor = markPointColor.aggreColor;
      curBackground = markPointColor.aggreColor;
      curBorderColor = markPointColor.aggreColor;
    }else{
      curColor = markPointColor.aggreColor;
      curBackground = markPointColor.aggreColor;
      curBorderColor = markPointColor.aggreColor;
    }
  }else{
    curColor = markPointColor.aggreColor;
    curBackground = markPointColor.aggreColor;
    curBorderColor = markPointColor.aggreColor;
  }
  for (let i =0;i<metricsList.length;i++){
    metricsListCoord.push({
      itemStyle: {
        borderWidth: 0 ,
        borderType: 'solid' ,
        borderDashOffset: 0 ,
        borderCap: 'butt' ,
        borderJoin: 'bevel' ,
        borderMiterLimit: 10 ,
        shadowColor: 'rgba(225, 225, 225, 1)',
        shadowBlur: 10,
        shadowOffsetX: 0 ,
        shadowOffsetY: 0 ,
        opacity: 1 ,
        color: curColor,
        background: curBackground,
        borderColor: curBorderColor,
        // filter: 'drop-shadow(0 0 3px #31adff)'
      },
      coord: [metricsList[i], i]
    })
  }
  return metricsListCoord;
}
export const getSeriesBarPoint=(metricsList,markPointColor)=>{
  let markPointData = getMetricsListCoord(metricsList,markPointColor);
  return{
  // 标记图形
    markPoint:{ 
      // 标记的图形
      symbol:'circle',
	// 表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
      symbolSize:[14,14],
      // 标注的样式
      itemStyle: {
        borderWidth: 1 ,
      },
      label:{
        color:'#fff',
      },
      // 标注的数据数组
      // 通过 x, y 属性指定相对容器的屏幕坐标，单位像素，支持百分比
      // 当多个属性同时存在时，优先级按上述的顺序
      data:markPointData
    }
  }
}