Echarts图表:设置折线图中折线线条的颜色和折线点的颜色

简介: Echarts图表:设置折线图中折线线条的颜色和折线点的颜色
series: [
          {
            name: "总激活数",
            type: "line",
            stack: "总激活数",
            data: this.totalCount,
            itemStyle: {
              normal: {
                color: "#F29C1B",
                lineStyle: {
                  color: "#F29C1B"
                }
              }
            }
          },
          {
            name: "自有激活数",
            type: "line",
            stack: "自有激活数",
            data: this.selfCount,
            itemStyle: {
              normal: {
                color: "#FF5252",
                lineStyle: {
                  color: "#FF5252"
                }
              }
            }
          },
          {
            name: "合作方激活数",
            type: "line",
            stack: "合作方激活数",
            data: this.subCount,
            itemStyle: {
              normal: {
                color: "#457FFB",
                lineStyle: {
                  color: "#457FFB"
                }
              }
            }
          }
        ]

(1)设置折线线条颜色

 lineStyle: {
    color: "#F29C1B",
 }

(2)设置折线折点颜色

lineStyle: {
    normal: {
       color: "#F29C1B"
    }
}

image.png

支付宝智慧前端学习交流群

image.png

目录
相关文章
|
2天前
echarts中使用散点scatter更改颜色却不生效的问题
本文讨论了在ECharts中使用散点图(scatter)时更改颜色不生效的问题。原因是项目中使用了`visualMap`组件,它具有最高的优先级,导致自定义的颜色设置被覆盖。解决方法是在`visualMap`组件中增加`seriesIndex`属性,指定它只对特定的系列(series)生效,从而避免影响散点图的颜色设置。文章提供了详细的代码示例和解决办法。
17 2
|
1天前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
30天前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
172 1
微信小程序使用echarts图表(ec-canvas)
|
1月前
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
1月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
1月前
Echarts——如何默认选中图表并显示tooltip
Echarts——如何默认选中图表并显示tooltip
30 1
|
1月前
|
JavaScript
Echarts——VUE中非根节点时不显示图表也无报错
Echarts——VUE中非根节点时不显示图表也无报错
31 1
|
2月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示
循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示
|
1月前
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
94 0
|
2月前
|
Apache
Axure rp9 引入Echarts图表 |手动引入图表 Apache Echarts
Axure rp9 引入Echarts图表 |手动引入图表 Apache Echarts
87 0

热门文章

最新文章