echarts的图例的图形的颜色怎么改变?

echarts的图例的图形的颜色怎么改变?我的一直是灰色的 然后hover滑过时 就变成了和
下面柱形图一直的颜色;我不需要hover,只需要它没有hover的时候也和柱形图的颜色保持一致
图片说明
图片说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts-all.js"></script>
    <style>
        .aaa{
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="aaa" id="annular"></div>
<script>
    var aaa = echarts.init(document.getElementById('annular'));
    option = {
        title: {
            x: 'center',
            text: 'ECharts例子个数统计'
        },
        tooltip: {
            trigger: 'item'
        },
        legend:{
            //selectedMode: false,
            x:'right',
            y:70,
            align:'right',
            itemWidth:16,
            itemGap:20,
            orient:'vertical',
            data:[{name:'消费贷',textStyle:{color:'#C1232B'}},
                   {name:'现金贷',textStyle:{color:'#B5C334'}},
                   {name:'教育贷',textStyle:{color:'#FCCE10'}}
            ],
            selected:{
                '消费贷':true,
                '现金贷':true,
                '教育贷':true
            }
        },
        color:['#C1232B','#B5C334','#FCCE10'],
        toolbox: {
            show: true,
            feature: {
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        grid: {
            borderWidth: 0,
            y: 80,
            y2: 60
        },
        xAxis: [
            {
                type: 'category',
                show: false,
                data: ['消费贷', '现金贷', '教育贷']
            }
        ],
        yAxis: [
            {
                type: 'value',
                show: false
            }
        ],
        series: [
            {
                name: 'ECharts例子个数统计',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{b}\n{c}'
                        }
                    }
                },
                data: [12,21,10],
                markPoint: {
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: 'rgba(0,0,0,0)'
                    },
                    data: [
                        {xAxis:0, y: 350, name:'Line', symbolSize:20, symbol:'none'},
                        {xAxis:1, y: 350, name:'Bar', symbolSize:20,symbol:'none'},
                        {xAxis:2, y: 350, name:'Scatter', symbolSize:20,symbol:'none'}
                    ]
                }
            }
        ]
    };
    aaa.setOption(option);
</script>
</body>
</html>

6个回答

先和你说一下问题在哪里吧 ,系统默认就是legend的颜色和条形的颜色一样的,不过前提条件是你的series 数据的name 属性和legend的 data数组一一对应.这里你的series 只有一个数组 ,需要分成三列才能正确的显示legend ,所以你这个配置有一些问题 ,如果真的想按自己的方式生成图形的话,有一个
D3.js提供一个工具集,可以自己自由绘制图形.

option = {
        title: { x: 'center', text: 'ECharts例子个数统计' },
        tooltip: { trigger: 'item' },
        legend: {
            selectedMode: false,
            orient: 'vertical',
            data: ['消费贷','现金贷','教育贷'],
        },
        color: ['#C1232B', '#B5C334', '#FCCE10'],
        toolbox: {
            show: true,
            feature: {
                dataView: {
                    show: true,
                    readOnly: false
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        calculable: true,
        grid: { borderWidth: 0, y: 80, y2: 60 },
        xAxis: [
        { type: 'category',
        show: false,
        data: ['消费贷', '现金贷', '教育贷'] }],
        yAxis: [{ type: 'value', show: false }],
        series: [{
            name: '消费贷',
            type: 'bar',
            barWidth:40,
            itemStyle: {
                normal: {
                    color: function(params) { // build a color map as your need. 
                        var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'];
                        return colorList[params.dataIndex]
                    },
                    label: { show: true, position: 'top', formatter: '{b}\n{c}' }
                }
            },
            data: [12,null,null],
            markPoint: { tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0)' }, data: [{ xAxis: 0, y: 350, name: 'Line', symbolSize: 20, symbol: 'none' }, { xAxis: 1, y: 350, name: 'Bar', symbolSize: 20, symbol: 'none' }, { xAxis: 2, y: 350, name: 'Scatter', symbolSize: 20, symbol: 'none' }] }
        },{
            name: '现金贷',
            type: 'bar',
            barWidth:40,
            itemStyle: {
                normal: {
                    color: function(params) { // build a color map as your need. 
                        var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'];
                        return colorList[params.dataIndex]
                    },
                    label: { show: true, position: 'top', formatter: '{b}\n{c}' }
                }
            },
            data: [null, 21, ],
            markPoint: { tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0)' }, data: [{ xAxis: 0, y: 350, name: 'Line', symbolSize: 20, symbol: 'none' }, { xAxis: 1, y: 350, name: 'Bar', symbolSize: 20, symbol: 'none' }, { xAxis: 2, y: 350, name: 'Scatter', symbolSize: 20, symbol: 'none' }] }
        },
        {
            name: '教育贷',
            type: 'bar',
            barWidth:40,
            itemStyle: {
                normal: {
                    color: function(params) { // build a color map as your need. 
                        var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'];
                        return colorList[params.dataIndex]
                    },
                    label: { show: true, position: 'top', formatter: '{b}\n{c}' }
                }
            },
            data: [null,null, 10],
            markPoint: { tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0)' }, data: [{ xAxis: 0, y: 350, name: 'Line', symbolSize: 20, symbol: 'none' }, { xAxis: 1, y: 350, name: 'Bar', symbolSize: 20, symbol: 'none' }, { xAxis: 2, y: 350, name: 'Scatter', symbolSize: 20, symbol: 'none' }] }
        }
        ]
    };

试着把你的series拆一下

 series: [
            {
                name: '消费贷',
                type: 'bar',
                data: [12]
            },
            {
                name: '现金贷',
                type: 'bar',
                data: [21]
            },
            {
                name: '教育贷',
                type: 'bar',
                data: [10]
            }
        ]

你的图呢??你说的图例是指哪个? tooltip? bar? 还是其他的

Sxd0208
Sxd0208 回复当作看不见: 恩恩 好的
2 年多之前 回复
qq_29594393
当作看不见 回复Sxd0208: 这个默认就是有颜色的....legend 可以用来点击,筛选数据用的,我发个例子,你改改
2 年多之前 回复
Sxd0208
Sxd0208 我更新问题 把图传上去了 我说的图例是legend。那个legend的字搞定了就是它字后面的那个图的颜色弄不出来
2 年多之前 回复

难道legend不是默认和柱状图对应的颜色一样?
把你这段echarts配置的代码贴出来吧,不然也不好找问题

Sxd0208
Sxd0208 我把代码贴出来了
2 年多之前 回复

series 数据的name 属性和legend的 data数组要一一对应!!!我就是没有对应上name。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
echarts如何将两个相同的图例合并到一起
-
Echarts地图中点击新图例如何清除之前的图层
-
ggplot2中的multiple plots如何添加颜色图例
-
remapH如何创建图例,regionColor失效如何处理?
-
Echarts容器宽度小的时候,X轴Y轴图例的文字会出现重影的问题(部分谷歌浏览器)
-
百度Echarts插件中tooltip如何自定义
-
qcustomplot的图例显示
-
echarts legend分页点击不起效
-
Crystal Reports水晶报表中图的图例如何修改啊?
-
Echarts柱状图点击事件
-
echarts关系图节点添加边框(border)
-
echarts值已经给data了就是不显示效果
-
在c#+arcgisAE中制图的时候如何将图例分成两列呢?
-
在C#中如何把图例旁的数字变成文字
-
如何用代码使饼形图上数字变为百分数,而图例为何会变成这样(文字图例为正常的)
-
Highcharts 怎么调整折行的每个图例项之间的间距相等,求解!!!
-
关于VB的MSChart控件中显示标签文本颜色的问题?
-
如何用代码使饼形图上数字变为百分数,而图例不受影响,数据和文字都来自sqlite数据库
-
echarts地图怎么用,这个是静态的,怎么与后台连接写成动态的,麻烦有用过的解决一下
-
docker学习笔记
docker学习笔记 Docker是什么? Docker是一个虚拟环境容器,可以将你的开发环境、代码、配置文件等一并打包到这个容器中,并发布和应用到任意平台中。比如,你在本地用Python开发网站后台,开发测试完成后,就可以将Python3及其依赖包、Flask及其各种插件、Mysql、Nginx等打包到一个容器中,然后部署到任意你想部署到的环境。 Docker官方文档比较全,建议有能力的读...
学会了这些技术,你离BAT大厂不远了
每一个程序员都有一个梦想,梦想着能够进入阿里、腾讯、字节跳动、百度等一线互联网公司,由于身边的环境等原因,不知道 BAT 等一线互联网公司使用哪些技术?或者该如何去学习这些技术?或者我该去哪些获取这些技术资料?没关系,平头哥一站式服务,上面统统不是问题。平头哥整理了 BAT 等一线大厂的必备技能,并且帮你准备了对应的资料。对于整理出来的技术,如果你掌握的不牢固,那就赶快巩固,如果你还没有涉及,现在...
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收集私人信息,保...
挑战10个最难的Java面试题(附答案)【上】
这是收集的10个最棘手的Java面试问题列表。这些问题主要来自 Java 核心部分 ,不涉及 Java EE 相关问题。你可能知道这些棘手的 Java 问题的答案,或者觉得这些不足以挑战你的 Java 知识,但这些问题都是容易在各种 Java 面试中被问到的,而且包括我的朋友和同事在内的许多程序员都觉得很难回答。 1 为什么等待和通知是在 Object 类而不是 Thread 中声明的? 一个...
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
别再翻了,面试二叉树看这 11 个就够了~
写在前边 数据结构与算法: 不知道你有没有这种困惑,虽然刷了很多算法题,当我去面试的时候,面试官让你手写一个算法,可能你对此算法很熟悉,知道实现思路,但是总是不知道该在什么地方写,而且很多边界条件想不全面,一紧张,代码写的乱七八糟。如果遇到没有做过的算法题,思路也不知道从何寻找。面试吃了亏之后,我就慢慢的做出总结,开始分类的把数据结构所有的题型和解题思路每周刷题做出的系统性总结写在了 Github...
GitHub开源的10个超棒后台管理面板
目录 1、AdminLTE 2、vue-Element-Admin 3、tabler 4、Gentelella 5、ng2-admin 6、ant-design-pro 7、blur-admin 8、iview-admin 9、material-dashboard 10、layui 项目开发中后台管理平台必不可少,但是从零搭建一套多样化后台管理并不容易,目前有许多开源、免费、...
100 个网络基础知识普及,看完成半个网络高手
欢迎添加华为云小助手微信(微信号:HWCloud002或HWCloud003),输入关键字“加群”,加入华为云线上技术讨论群;输入关键字“最新活动”,获取华为云最新特惠促销。华为云诸多技术大咖、特惠活动等你来撩! 1)什么是链接? 链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。 2)OSI 参考模型的层次是什么? 有 7 个 OSI 层:物理...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
世界上最好的学习法:费曼学习法
你是否曾幻想读一遍书就记住所有的内容?是否想学习完一项技能就马上达到巅峰水平?除非你是天才,不然这是不可能的。对于大多数的普通人来说,可以通过笨办法(死记硬背)来达到学习的目的,但效率低下。当然,也可以通过优秀的学习法来进行学习,比如今天讲的“费曼学习法”,可以将你的学习效率极大的提高。 费曼学习法是由加拿大物理学家费曼所发明的一种高效的学习方法,费曼本身是一个天才,13岁自学微积分,24岁加入曼...
深入理解C语言指针
一、指针的概念 要知道指针的概念,要先了解变量在内存中如何存储的。在存储时,内存被分为一块一块的。每一块都有一个特有的编号。而这个编号可以暂时理解为指针,就像酒店的门牌号一样。 1.1、变量和地址 先写一段简单的代码: void main(){ int x = 10, int y = 20; } 这段代码非常简单,就是两个变量的声明,分别赋值了 10、20。我们把内存当做一个酒店,而每个房间就...
C语言实现推箱子游戏
很早就想过做点小游戏了,但是一直没有机会动手。今天闲来无事,动起手来。过程还是蛮顺利的,代码也不是非常难。今天给大家分享一下~ 一、介绍 开发语言:C语言 开发工具:Dev-C++ 5.11 日期:2019年9月28日 作者:ZackSock 也不说太多多余的话了,先看一下效果图: 游戏中的人物、箱子、墙壁、球都是字符构成的。通过wasd键移动,规则的话就是推箱子的规则,也就不多说了。 二、代...
C语言这么厉害,它自身又是用什么语言写的?
这是来自我的星球的一个提问:“C语言本身用什么语言写的?”换个角度来问,其实是:C语言在运行之前,得编译才行,那C语言的编译器从哪里来? 用什么语言来写的?如果是用C语...
终于鸿蒙微内核弄懂了-程序员和鼓励师的合作
当鸿蒙OS宣布开源的时候,各种空洞的炒作,几乎把国产操作系统的技术本质掩盖了,虽然笔者没亲眼见过鸿蒙的代码,也没用方舟成功编译什么程序,不过当华为官宣鸿蒙将使用微内核的时候其实这款OS的风格就已经确定了,因为这就是内核的价值和意义。 记得十几年前笔者刚刚毕业,初次进入嵌入式开发的圈子,那时总感觉操作系统距离我很远,甚至有些高不可攀。当时看到CSDN论坛上各种有关WINCE、MINIGUI等嵌入式...
十大优秀编程项目,让你的简历金光闪闪
全文共3241字,预计学习时长6分钟 被问到如何学习编程时,最常听到的问题就是:“有没有什么新项目的好点子?” 一些老套的答案有:“做一个象棋游戏”或者“命令行界面”。 这些答案没有错,但这些例子不符合现代编程的需要。现代软件编写需要经常使用软件服务化(SaaS)和网络应用,这意味着程序员需要了解如何在线编程。 用户网站或应用程序的编程需要服务器、身份验证和数据库,这个过程十分复杂。它...
第二弹!python爬虫批量下载高清大图
文章目录前言下载免费高清大图下载带水印的精选图代码与总结 前言 在上一篇写文章没高质量配图?python爬虫绕过限制一键搜索下载图虫创意图片!中,我们在未登录的情况下实现了图虫创意无水印高清小图的批量下载。虽然小图能够在一些移动端可能展示的还行,但是放到pc端展示图片太小效果真的是很一般!建议阅读本文查看上一篇文章,在具体实现不做太多介绍,只讲个分析思路。 当然,本文可能技术要求不是特别高,但可以...
面试官,不要再问我三次握手和四次挥手
三次握手和四次挥手是各个公司常见的考点,也具有一定的水平区分度,也被一些面试官作为热身题。很多小伙伴说这个问题刚开始回答的挺好,但是后面越回答越冒冷汗,最后就歇菜了。 见过比较典型的面试场景是这样的: 面试官:请介绍下三次握手 求职者:第一次握手就是客户端给服务器端发送一个报文,第二次就是服务器收到报文之后,会应答一个报文给客户端,第三次握手就是客户端收到报文后再给服务器发送一个报文,三次握手就...
免费申请 HTTPS 证书,开启全站 HTTPS
作者:HelloGitHub-追梦人物文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库[1]点击本文最下方的“阅读原文”即可获取HTTP 报文以明...
一些实用的GitHub项目
最近整理了一些在GitHub上比较热门的开源项目关于GitHub,快速了解请戳这里其中涵盖了:学习教程,面试总结,实用工具,框架,机器学习等东西比较杂,要学的东西也比较多...
生猛!看 AV 神器来了!实时把画质变成 4k 高清,延时仅3毫秒,登上GitHub 趋势榜!...
点击上方“五分钟学算法”,选择“星标”在看真爱量子位 出品 | 公众号 QbitAI看动画(特别是里番/P站)的时候,总会觉得画质不够好,就算已经有1080p,还是...
新手程序员成长之路的五本必读书籍(附资源下载)
全文共3351字,预计学习时长7分钟图片来自Pixabay,IvanPais书籍可以清晰而有条理地陈诉观点,纸张上的笔墨也会给人一种不慌不忙的感觉。不过,科技类书籍存在一...
相关热词 c#引入dll文件报错 c#根据名称实例化 c#从邮件服务器获取邮件 c# 保存文件夹 c#代码打包引用 c# 压缩效率 c#教学 csdn c#开发前端 c#如何将字符串格式化 c#引用dll不成功