echarts折线图的 线条的样式怎么控制

折线图的 线条的样式怎么控制

option = {title: {text: 'Stacked Line'},tooltip: {trigger: 'axis'},legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name: 'Email',type: 'line',stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'line',stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'line',stack: 'Total',data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Direct',type: 'line',stack: 'Total',data: [320, 332, 301, 334, 390, 330, 320]},{name: 'Search Engine',type: 'line',stack: 'Total',data: [820, 932, 901, 934, 1290, 1330, 1320]}]
};

1. 基础线条样式控制
   在 series 的每个系列中添加 lineStyle 配置：

series: [{name: 'Email',type: 'line',data: [120, 132, 101, 134, 90, 230, 210],// 线条样式配置lineStyle: {color: '#FF0000',    // 线条颜色（支持十六进制/RGB/渐变色）width: 3,            // 线条宽度（像素）type: 'solid',       // 线型（solid实线/dashed虚线/dotted点线）opacity: 0.8,        // 透明度（0~1）shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色shadowBlur: 10,      // 阴影模糊度shadowOffsetY: 5     // 阴影垂直偏移}}
]

2. 数据点样式控制
   通过 itemStyle 配置折线上数据点的样式：

series: [{name: 'Email',type: 'line',data: [120, 132, 101, 134, 90, 230, 210],// 数据点样式itemStyle: {color: '#36A2EF',    // 点颜色borderColor: '#FFF', // 点边框颜色borderWidth: 2,      // 点边框宽度borderType: 'solid', // 边框类型opacity: 1,shadowBlur: 5},symbol: 'circle',      // 点形状（circle/diamond/arrow等）symbolSize: 8          // 点大小}
]

3. 平滑曲线与区域填充

series: [{name: 'Email',type: 'line',smooth: true,          // 开启平滑曲线areaStyle: {           // 区域填充color: {type: 'linear',    // 线性渐变x: 0, y: 0, x2: 0, y2: 1,colorStops: [{ offset: 0, color: 'rgba(58, 77, 233, 0.8)' },{ offset: 1, color: 'rgba(58, 77, 233, 0.1)' }]}}}
]

4. 动态效果配置

series: [{name: 'Email',type: 'line',// 动画效果animation: true,animationDuration: 2000,  // 动画时长（ms）animationEasing: 'elasticOut', // 缓动效果// 高亮样式（鼠标悬停时）emphasis: {lineStyle: {width: 5},itemStyle: {color: '#FF0000',symbolSize: 12}}}
]

5. 完整示例

option = {series: [{name: 'Email',type: 'line',data: [120, 132, 101, 134, 90, 230, 210],lineStyle: {color: '#EE6666',width: 3,type: 'dashed'},itemStyle: {color: '#EE6666',borderColor: '#FFF',borderWidth: 2},symbol: 'diamond',symbolSize: 10,smooth: true,areaStyle: {opacity: 0.1}}]
};