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

41次阅读

共计 724 个字符，预计需要花费 2 分钟才能阅读完成。

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, 心愿对你有帮忙, 让咱们一起致力走向巅峰!

正文完