echarts配置折线图的点和线条的颜色

echarts配置折线图的点和线条的颜色

1.开发环境 vue+echarts
2.电脑系统 windows10专业版
3.在使用vue+echarts开发的过程中,我们会经常使用折线图,可能根据需求我们需要使用配置折线图的点和颜色,下面是我总结的方法,希望对你有所帮助!
4.效果图入如下:

5配置代码如下:

series: [
        {
            showSymbol: true, 
            symbol: 'circle',  //设定为实心点 
            symbolSize: 20,   //设定实心点的大小 
            color:"#000",     //设定实线点的颜色
            lineStyle: {
              normal: {
                width: 2,
                color:"#0000ff", //设置实线的颜色
              },
            },
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            showSymbol: true, 
            symbol: 'circle',     //设定为实心点 
            symbolSize: 20,       //设定实心点的大小 
            color:"#000",         //设定实线点的颜色
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            showSymbol: true, 
            symbol: 'circle',     //设定为实心点 
            symbolSize: 20,   //设定实心点的大小 
            color:"#000",
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
    ]

6.本期的教程到了这里就结束啦,是不是很nice,希望对你有帮助,让我们一起努力走向巅峰!