echarts lineStyle 宽度(width)和颜色(color)动态处理

本文介绍: echarts lineSt yle 动态设置线条的宽度和高度

假如，我们想要在飞线图中根据后台返回数据的不同来动态显示飞线的颜色，我们该怎么设置呢？我们要控制颜色，自然就需要设置 color，另外根据ECha r ts的API介绍，color是支持Func t ion 函数的。下面，我们来看一个例子：

比如，我们想要根据后台返回的某个字段，使飞线显示不同的颜色：

series: [
         .....此处省略......
         lineStyle: {
               //❀这里用到color的function函数，根据数据的不同显示不同颜色线条
         	   color: function (value) {
                	if (value.data.coord[4] == 'Y') {
                  		return '#ff0000'
                	} else {
                 		 return '#2d9df1'
                	}
         	   },   //航线的颜色
         	   width: 1,
               opacity: 0.6,
               curveness: 0.2 
       }
]

那么，如果我们想要动态设置线条的粗细，该怎么操作呢？

我们有以下两种方案：

一种方法是使用ECha r ts的setOption 方法，在更新数据时动态修改线条样式的宽度。例如，假设您有一个名为 chart的ECha r ts 实例，您可以按以下方式更新线条样式的宽度：

// 获取当前的option
var option = chart.getOption();

// 修改线条样式的宽度
option.series[0].lineStyle.width = 2; // 设置宽度为2

// 更新图表
chart.setOption(option);

在上述示例中，option.series[0].lineStyle.width 表示第一个 series的线条样式的宽度。您可以根据自己的需求修改 series的索引和其他属性。然后，使用 chart.setOpti on(option)方法将新的选项应用到图表中，从而更新线条样式的宽度

另一种方法是直接在数据中设置线条样式的宽度。例如，如果您使用类似以下格式的数据：

var data = [
  { value: 10, lineStyle: { width: 1 } },
  { value: 20, lineStyle: { width: 2 } },
  { value: 30, lineStyle: { width: 3 } },
  // ...
];

在上述示例中，每个数据点都有一个 lineStyle属性，其中包含线条样式的宽度。您可以在数据更新时动态修改 lineStyle.width的值，然后将更新后的数据传递给ECha r ts 图表。

当使用第二种方法时，您可以通过数据中的lineStyle属性来设置每个数据点的线条样式，包括宽度。下面是一个更详细的示例，演示如何使用第二种方法动态处理ECha r ts线条样式的宽度：

// 假设您有一个名为data的数据数组，每个数据点都有起点和终点坐标以及线条样式的宽度
var data = [
  { coords: [[10, 20], [30, 40]], lineStyle: { width: 2 } },
  { coords: [[50, 60], [70, 80]], lineStyle: { width: 3 } },
  { coords: [[90, 100], [110, 120]], lineStyle: { width: 4 } },
  // ...
];

// 创建一个空的option对象
var option = {};

// 设置系列数据
option.series = [{
  type: 'lines',
  data: data, // 使用上面定义的数据数组
  lineStyle: {
    width: function (param) {
      return param.data.lineStyle.width; // 设置线条样式的宽度
    },
    // 其他线条样式属性...
  }
}];

// 创建ECharts实例
var chart = echarts.init(document.getElementById('chart-container'));

// 将option设置到图表中
chart.setOption(option);

在上述示例中，data 数组中的每个数据点都有一个co o rds 属性，其中包含线条的起点和终点坐标，以及一个lineStyle属性，其中包含线条样式的宽度。在option.series中，我们使用了type: ‘lines’来指定使用飞线图。然后，通过在lineStyle中使用wi dt h属性的回调函数，我们将线条样式的宽度设置为每个数据点的lineStyle.wi dt h的值。