echarts series设置标准线markLIne

原创已于 2023-12-06 09:23:01 修改 · 1.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2023-11-22 11:06:31 首次发布

文章描述了如何在ECharts中的柱状图中实现自定义标准线，当数据值超出预设值时改变颜色，并提供了两种方法：一是通过映射数据动态改变颜色，二是直接设置单一颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提：写在series里面

自定义标准线文字样式
超出标准线的柱状图颜色变色

 series: [
	{
		name: '数据',
        type: 'bar',
        barMaxWidth: 10,
		markLine: {
		 // name:'标准值',
		  silent: true,//禁止鼠标悬浮时的鼠标样式
		  lineStyle: {  //标准线的样式
		    type: 'solid', //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
		    color: colors3[0]，
		     width:2  //线的宽度
		  },
		  label: {
		    position: 'end',
		    padding: [-13, -20, 15, -85],
		    formatter: function (val) {
		      return '标准值' + val.value
		    }//自定义标准线文字样式
		  },
		  data: [{ name: '标准值', yAxis: bzzZd }]//给标准线赋值
		},
		 data: r.data.szlbList.map((item) => {//1、自定义，当柱状图某一列大于value时显示另一种颜色
           if (item > value) {
             let temp = item
             item = {
               value: item,
               itemStyle: {
                 color: '#f16262'
               }
             }
           }
           return item
         })
         data:[1,4,5,6,3,5,6,4]//2、也可以直接赋值，只显示一种颜色
	 }
 ]