从入门到精通：让你的echarts折线图动态更换颜色

2023-09-21 20:45:58

一、echarts简介及折线图绘制

echarts是一个开源的JavaScript图表库，它可以帮助你轻松地创建各种类型的图表，包括折线图、柱状图、饼图等等。echarts有着丰富的功能，包括数据缩放、数据提示、图例、数据标签等。

要使用echarts创建折线图，你需要先创建一个echarts实例，然后使用setOption方法来设置折线图的选项。setOption方法可以设置折线图的各种属性，包括数据、标题、坐标轴、图例等。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '折线图'
    },
    xAxis: {
        type: 'category',
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line'
    }]
};

myChart.setOption(option);

这段代码创建了一个echarts实例，并使用setOption方法设置了折线图的选项。折线图的标题是“折线图”，x轴的类型是“category”，数据是星期一到星期日，y轴的类型是“value”。折线图中只有一条线，数据是[120, 200, 150, 80, 70, 110, 130]。

二、动态修改折线图颜色

现在，我们来学习如何动态修改折线图的颜色。你可以通过使用setOption方法来设置折线图的样式属性。例如，你可以设置折线颜色、宽度、数值点（圈圈）颜色、标注点（最大最小值）颜色、图例颜色等。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '折线图'
    },
    xAxis: {
        type: 'category',
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line',
        color: '#ff0000',  // 设置折线颜色为红色
        itemStyle: {
            color: '#00ff00'  // 设置数值点（圈圈）颜色为绿色
        },
        markPoint: {
            data: [{
                type: 'max',
                name: '最大值',
                itemStyle: {
                    color: '#ff00ff'  // 设置标注点（最大值）颜色为品红色
                }
            }, {
                type: 'min',
                name: '最小值',
                itemStyle: {
                    color: '#00ffff'  // 设置标注点（最小值）颜色为青色
                }
            }],
            label: {
                color: '#0000ff'  // 设置标注点标签颜色为蓝色
            }
        },
        legend: {
            data: ['销售额'],
            itemStyle: {
                color: '#ff00ff'  // 设置图例颜色为品红色
            }
        }
    }]
};

myChart.setOption(option);