位置: IT常识 - 正文

ECharts 饼图颜色设置教程 - 4 种方式设置饼图颜色(echarts饼图颜色设置)

编辑:rootadmin
ECharts 饼图颜色设置教程 - 4 种方式设置饼图颜色

推荐整理分享ECharts 饼图颜色设置教程 - 4 种方式设置饼图颜色(echarts饼图颜色设置),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:echarts饼图颜色不重复,echarts饼图颜色和图例的对应关系,echarts饼图颜色搭配,echarts饼图颜色怎么改,echarts饼图颜色重复,echarts饼图颜色搭配,echarts 饼图颜色渐变,echarts饼图颜色重复,内容如对您有帮助,希望把文章链接给更多的朋友!

本文首发:《ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色》

ECharts 饼状图颜色设置教程方法一:在 `series` 内配置饼状图颜色方法二:在 `option` 内配置饼状图颜色方法三:在 `data` 内配置饼状图颜色方法四:配置 ECharts 饼状图随机颜色使用「卡拉云」直接生成饼状图

ECharts 饼状图中的每个扇形颜色其实都可以自定义或者随机显示颜色。比如 X 轴是各销售渠道名,那么你可以需要使用全局统一的识别色彩,那么就需要指定每个扇面的颜色。本文讲解 4 种配置修改 ECharts 饼图颜色的方法。

另外,这个世界已经悄然发生变化,现在根本无需写任何前端代码,直接使用卡拉云 —— 新一代低代码开发工具帮你搭建后台工具,卡拉云可一键接入常见数据库及 API ,无需懂前端,内置包括 ECharts 在内的各类前端组件,无需调试,拖拽即用。原来三天的工作量,现在 1 小时搞定,谁用谁知道,早用早下班,详见本文文末。

方法一:在 series 内配置饼状图颜色series: [ itemStyle: { normal: { color: function (colors) { var colorList = [ '#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc' ]; return colorList[colors.dataIndex]; } }, } ]

EChart.js 在 series 中设置饼状图颜色的 Demo 源代码:

option = { title: { text: '卡拉云流量来源渠道汇总', subtext: '本月数据', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: 'GA 数据统计', type: 'pie', radius: '50%', data: [ { value: 1017, name: '搜索引擎' }, { value: 583, name: '直接访问' }, { value: 873, name: '微信朋友圈' }, { value: 432, name: '口碑介绍' }, { value: 332, name: '电话销售' }, { value: 678, name: 'Feeds 广告' } ], itemStyle: { normal: { color: function (colors) { var colorList = [ '#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc' ]; return colorList[colors.dataIndex]; } }, } } ]};

扩展阅读:《最好用的 7 款 Vue admin 后台管理框架测评》

方法二:在 option 内配置饼状图颜色color**:**['#3ca170','#5470c6', '#91cd77','#ef6567', '#f9c956','#75bedc'],

ECharts 饼图颜色设置教程 - 4 种方式设置饼图颜色(echarts饼图颜色设置)

EChart.js 在 option 中设置饼状图颜色的 Demo 源代码:

option = { title: { text: '卡拉云流量来源渠道汇总', subtext: '本月数据', left: 'center' }, tooltip: { trigger: 'item' }, legend: { top: '5%', left: 'center' }, color: ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc'], series: [ { name: 'GA 数据统计', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '40', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ { value: 1017, name: '搜索引擎' }, { value: 583, name: '直接访问' }, { value: 873, name: '微信朋友圈' }, { value: 432, name: '口碑介绍' }, { value: 332, name: '电话销售' }, { value: 678, name: 'Feeds 广告' } ] } ]};

扩展阅读:《Vue 实现 PDF 文件在线预览 - 手把手教你写 Vue PDF 预览功能》

方法三:在 data 内配置饼状图颜色data: [ { value: 917, name: '搜索引擎',itemStyle: {color:'#fc8251'}}, { value: 873, name: '微信朋友圈',itemStyle: {color:'#5470c6'}}, { value: 678, name: 'Feeds 广告',itemStyle: {color:'#91cd77'}}, { value: 583, name: '直接访问',itemStyle: {color:'#ef6567'}}, { value: 432, name: '口碑介绍',itemStyle: {color:'#f9c956'}} ]

EChart.js 在 data 中设置饼状图颜色的 Demo 源代码:

option = { title: { text: '卡拉云流量来源渠道汇总', subtext: '本月数据', left: 'center' }, legend: { top: 'bottom' }, series: [ { name: 'GA 数据统计', type: 'pie', radius: [50, 250], center: ['50%', '50%'], roseType: 'area', itemStyle: { borderRadius: 8 }, data: [ { value: 917, name: '搜索引擎',itemStyle: {color:'#fc8251'}}, { value: 873, name: '微信朋友圈',itemStyle: {color:'#5470c6'}}, { value: 678, name: 'Feeds 广告',itemStyle: {color:'#91cd77'}}, { value: 583, name: '直接访问',itemStyle: {color:'#ef6567'}}, { value: 332, name: '电话销售',itemStyle: {color:'#f9c956'} }, { value: 432, name: '口碑介绍',itemStyle: {color:'#75bedc'}} ] } ]};

扩展阅读:《ECharts X 轴标签过长导致文字重叠的 4 种解决方案》

方法四:配置 ECharts 饼状图随机颜色color: function () { return ( 'rgb(' + [ Math.round(Math.random() * 270), Math.round(Math.random() * 370), Math.round(Math.random() * 400) ].join(',') + ')' ); },

option = { title: { text: '卡拉云流量来源渠道汇总', subtext: '本月数据', left: 'center' }, legend: { top: 'bottom' }, series: [ { name: 'GA 数据统计', type: 'pie', radius: [50, 250], center: ['50%', '50%'], roseType: 'area', itemStyle: { color: function () { return ( 'rgb(' + [ Math.round(Math.random() * 270), Math.round(Math.random() * 370), Math.round(Math.random() * 400) ].join(',') + ')' ); }, borderRadius: 8 }, data: [ { value: 917, name: '搜索引擎'}, { value: 873, name: '微信朋友圈'}, { value: 678, name: 'Feeds 广告'}, { value: 583, name: '直接访问'}, { value: 332, name: '电话销售'}, { value: 432, name: '口碑介绍'} ] } ]};

扩展阅读:《7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果(Vue loader)类型》

使用「卡拉云」直接生成饼状图

本文介绍了如何解决在 Vue 中 ECharts 饼图指定或随机颜色的解决方案,虽然开源库已经帮我们解决了大部分造轮子的事,但总有些细枝末节的问题需要我们自己手动解决。那么有没有一种完全不用会前端,一行代码也不用写的方法,生成图表呢?这里推荐你使用卡拉云,卡拉云内置多种样式的图表,仅需鼠标拖拽即可生成,完全不用懂任何前端。

卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。原来三天的开发工作量,使用卡拉云后可缩减至 1 小时,欢迎免费试用卡拉云。

扩展阅读:

最好用的 7 款 Vue admin 后台管理框架测评如何在 Vue 中加入图表 - Vue echarts 使用教程最好用的 5 款 React 富文本编辑器最棒的 7 个 Laravel admin 后台管理系统推荐顶级好用的 5 款 Vue table 表格组件测评与推荐最好的 6 个 React Table 组件详细亲测推荐最好的 6 个免费天气 API 接口对比测评使用和风天气 API 10分钟搭建天气预报数据看板

先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在。深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小。自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担。添加下方名片,即可获取全套学习资料哦

本文链接地址:https://www.jiuchutong.com/zhishi/290884.html 转载请保留说明!

上一篇:vue3+vite+vant4手机端项目实录(vue手机端)

下一篇:人工智能学习——神经网络(matlab+python实现)(人工智能课程心得体会)

  • 苹果手机息屏设置在哪里(苹果手机息屏设置怎么弄)

    苹果手机息屏设置在哪里(苹果手机息屏设置怎么弄)

  • 手机打字的声音在哪里关掉(怎么消除苹果手机打字的声音)

    手机打字的声音在哪里关掉(怎么消除苹果手机打字的声音)

  • 电脑进程管理器快捷键(电脑进程管理器快捷键win10)

    电脑进程管理器快捷键(电脑进程管理器快捷键win10)

  • cad导入图片快捷键(cad2016导入图片快捷键)

    cad导入图片快捷键(cad2016导入图片快捷键)

  • 红米10x什么时候发布(红米10x参数)

    红米10x什么时候发布(红米10x参数)

  • 苹果耳机为什么不弹窗(苹果耳机为什么充不上电)

    苹果耳机为什么不弹窗(苹果耳机为什么充不上电)

  • 首行缩进就是空两格吗(首行缩进空几格)

    首行缩进就是空两格吗(首行缩进空几格)

  • 苹果保修期和激活日期不对(苹果保修期和激活日期差20天正常吗)

    苹果保修期和激活日期不对(苹果保修期和激活日期差20天正常吗)

  • 红米8卡槽怎么装卡(红米卡槽怎么取)

    红米8卡槽怎么装卡(红米卡槽怎么取)

  • 电脑主机网线插哪里(电脑主机网线插路由器哪个口)

    电脑主机网线插哪里(电脑主机网线插路由器哪个口)

  • 快手对方x作品怎么回事(快手对方作品已失效怎么删除)

    快手对方x作品怎么回事(快手对方作品已失效怎么删除)

  • ps特殊模糊怎么用(ps模糊指定区域)

    ps特殊模糊怎么用(ps模糊指定区域)

  • 怎样设置软件密码(怎样设置软件密码锁vivo手机)

    怎样设置软件密码(怎样设置软件密码锁vivo手机)

  • 手机4g卡怎么显示2g(手机4g卡怎么显示无服务)

    手机4g卡怎么显示2g(手机4g卡怎么显示无服务)

  • 多媒体集线箱怎么打开(多媒体集线箱怎么用)

    多媒体集线箱怎么打开(多媒体集线箱怎么用)

  • reach是什么意思(欧盟reach是什么意思)

    reach是什么意思(欧盟reach是什么意思)

  • 苹果6远程管理能解锁吗(苹果6远程管理怎么跳过)

    苹果6远程管理能解锁吗(苹果6远程管理怎么跳过)

  • 买东西成团什么意思(买完东西发现有团购)

    买东西成团什么意思(买完东西发现有团购)

  • 电脑ie浏览器怎么升级(电脑IE浏览器怎么看什么版本)

    电脑ie浏览器怎么升级(电脑IE浏览器怎么看什么版本)

  • 魅族手机远程管理怎么用(魅族手机远程操作)

    魅族手机远程管理怎么用(魅族手机远程操作)

  • 微信漂流瓶还会上线吗(微信漂流瓶还会开通吗)

    微信漂流瓶还会上线吗(微信漂流瓶还会开通吗)

  • 苹果11pro max上市时间(苹果11pro最初上市价格)

    苹果11pro max上市时间(苹果11pro最初上市价格)

  • 快手头条怎么买(快手买头条怎么买)

    快手头条怎么买(快手买头条怎么买)

  • 微信朋友圈关闭是什么状态(微信朋友圈关闭怎么设置)

    微信朋友圈关闭是什么状态(微信朋友圈关闭怎么设置)

  • 前端如何处理后端一次性传来的10w条数据?(何为前端后端)

    前端如何处理后端一次性传来的10w条数据?(何为前端后端)

  • 【AI绘画】我以Midjourney为主学习AI绘画效果咋样?(以我为主题画一幅画)

    【AI绘画】我以Midjourney为主学习AI绘画效果咋样?(以我为主题画一幅画)

  • 广交会展务
  • 活动策划费属于业务宣传费吗
  • 超过规定标准的扣除项目金额怎么算
  • 期末结转的内容
  • 经营范围没有的可以开票吗
  • 税局函调准备哪些资料
  • 缴纳销项税额要交税吗
  • 开业前的其他费用
  • 计提分红款体现在利润表中哪一个
  • 行政事业单位专用材料费列支范围
  • 企业录用失业人员有税收优惠吗
  • 会员充值赠送
  • 轿车计提折旧
  • 提示没有安装QQ怎么处理
  • 采购合同清单的安装调试费如何开具发票?税率是多少
  • 餐饮行业采购流程图
  • 经营成本计算公式财务管理
  • 取得增值税专用发票注明税额
  • 上个月开的发票退回怎么处理?
  • 本期填写的适用3减1政策的本期发生额大于
  • 如何做预估成本
  • 沙盘模型制作费用
  • 光纤测速网速测试
  • 旅行社开的发票怎么入账
  • 调整系统保留带宽的命令
  • 小程序码生成器在线制作
  • 2014年最佳阵容
  • PHP:session_register()的用法_Session函数
  • phpsetcookie
  • 投资公司收到境外债务
  • 普通发票被退回怎么处理
  • 出售其他债权投资差额计入
  • php单例模式连接数据库
  • 作为大学生你能为国家安全贡献哪些力量论文
  • 软件开发属于技术合同吗
  • 地方教育附加是非税收入吗
  • mysql事务性能
  • 二手车交易账务处理
  • sql数据库存储过程怎么写
  • 一般纳税人混凝土税率
  • 低值易耗品摊销计入什么科目
  • sql数据库聚集索引和非聚集索引的区别是什么?
  • 卖家电的税点是多少呀
  • 招待费发票可以开专票吗
  • 酒店客房收入如何分配
  • 购买花卉
  • 外贸年底抵扣不抵税
  • 咨询费发票能抵扣吗
  • 费用利润率计算公式是怎样的?
  • 计提附加税金额
  • 贴现凭证是什么意思
  • 小微企业免征的增值税属于政府补助吗
  • 成本法和权益法的转换
  • 投资性房地产按成本法计提折旧
  • mysql 5.6 5.7 性能
  • sql查询界面怎么做
  • 电脑xp系统如何
  • windows崩溃后怎么修复
  • rhel7
  • win7系统不能用了?
  • Windows RT 8.1 Update3(KB3033055)开始菜单多图欣赏
  • windows xp
  • linux虚拟机怎么调出命令行
  • pqv2isvc.exe - pqv2isvc是什么进程 有什么作用
  • win7自动更新失败怎么删除更新启动
  • cocos2djs
  • unity脚本编写教程
  • bat批处理字符串转ascii10进制规避特殊字符
  • python读取数据
  • 本地安装策略在哪里
  • flask开发实例
  • 如何防止蟑螂爬到床上
  • django的url
  • android activity finish
  • 电子税务局内蒙古自治区
  • 医院的电子收据怎么查
  • 核定土地增值税的条件
  • 建筑安装工程承包条例还有效吗
  • 北京市地税总局电话
  • 认缴制什么时候开始的?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设