Echarts-折线图-设置线条颜色以及线条以下区域显示渐变颜色
首先，先看折线图效果。
1.设置线条颜色：
在series中，数组项设置lineStyle属性。
lineStyle: { // 设置线条的style等
normal: {
color: 'red', // 折线线条颜色:红色
},
},2.设置线条上点的颜色（也是图例的颜色）
在series中，使用itemStyle属性。
itemStyle: {
// 设置线条上点的颜色（和图例的颜色）
normal: {
color: 'red',
},
},3.设置线条下，渐变颜色设置
在series中，使用areaStyle属性。
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ // 渐变颜色
{
offset: 0,
color: 'red',
},
{
offset: 1,
color: 'Orange',
},
],
global: false,
},
},上述是一些小点，以下是完整代码。
const showCodesChart = () => {
const chartDom = document.getElementById('burnedChart'); // 自己定义的容器id
if (chartDom) {
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(chartDom);
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis',
},
legend: {
orient: 'vertical',
data: ['预计工时'],
right: -5,
top: 15,
},
xAxis: {
type: 'category',
data: ['2021', '2023', '2025'] // 时间
},
yAxis: {
type: 'value',
},
series: [
{
name: '预计工时',
type: 'line',
data: [100, 50, 70],
lineStyle: {// 设置线条的style等
normal: {
color: 'red', // 折线线条颜色:红色
},
},
itemStyle: {
// 设置线条上点的颜色（和图例的颜色）
normal: {
color: 'red',
},
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ // 渐变颜色
{
offset: 0,
color: 'red',
},
{
offset: 1,
color: 'Orange',
},
],
global: false,
},
},
},
],
});
}
};