位置: 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实现)(人工智能课程心得体会)

  • 华为p50pro怎么设置定时开关机(华为p50pro怎么设置门禁卡)

    华为p50pro怎么设置定时开关机(华为p50pro怎么设置门禁卡)

  • iphone如何批量删除联系人(iphone如何批量删除电话通讯录联系人)

    iphone如何批量删除联系人(iphone如何批量删除电话通讯录联系人)

  • iphone12和12pro屏幕区别(iphone12和12pro屏幕分辨率)

    iphone12和12pro屏幕区别(iphone12和12pro屏幕分辨率)

  • 抖音的主页链接怎么找(抖音的主页链接每次都不一样)

    抖音的主页链接怎么找(抖音的主页链接每次都不一样)

  • 手机旁边裂开怎么办(手机旁边裂开怎么办能不能爆炸)

    手机旁边裂开怎么办(手机旁边裂开怎么办能不能爆炸)

  • 果师兄没有恢复成功会退款吗(果师兄恢复一次多少钱)

    果师兄没有恢复成功会退款吗(果师兄恢复一次多少钱)

  • 爱奇艺分享会员账号怎么弄(爱奇艺分享会员怎么弄)

    爱奇艺分享会员账号怎么弄(爱奇艺分享会员怎么弄)

  • sticky notes是什么软件(sticky notes namespace)

    sticky notes是什么软件(sticky notes namespace)

  • 小米8音量键频繁失灵(小米8手机音量键坏了怎么办)

    小米8音量键频繁失灵(小米8手机音量键坏了怎么办)

  • lra-al00是华为什么型号(lar al00是华为手机什么型号)

    lra-al00是华为什么型号(lar al00是华为手机什么型号)

  • miuiAI虚拟助手有啥用(小米虚拟助手有什么用)

    miuiAI虚拟助手有啥用(小米虚拟助手有什么用)

  • ios11怎么改手机铃声(苹果11修改)

    ios11怎么改手机铃声(苹果11修改)

  • 手机无法接打电话但是可以上网(手机无法接打电话能上网怎么回事)

    手机无法接打电话但是可以上网(手机无法接打电话能上网怎么回事)

  • 为什么苹果7要点开微信界面才能收到信息(苹果7为什么是神机)

    为什么苹果7要点开微信界面才能收到信息(苹果7为什么是神机)

  • 怎么把u盘文件编号(怎么把u盘文件夹的东西拖到根目录)

    怎么把u盘文件编号(怎么把u盘文件夹的东西拖到根目录)

  • 12316怎么添加新乘客(12316怎么下载)

    12316怎么添加新乘客(12316怎么下载)

  • 华为mate20怎么清理后台(华为mate20怎么清理内存清理的干净)

    华为mate20怎么清理后台(华为mate20怎么清理内存清理的干净)

  • 智能电视连接wifi怎么看电视(智能电视连接wifi信号不好)

    智能电视连接wifi怎么看电视(智能电视连接wifi信号不好)

  • 鸿蒙OS蓝牙耳机怎么查看电量? 鸿蒙OS查看蓝牙耳机剩余电量的技巧(鸿蒙系统蓝牙耳机声音小怎么办)

    鸿蒙OS蓝牙耳机怎么查看电量? 鸿蒙OS查看蓝牙耳机剩余电量的技巧(鸿蒙系统蓝牙耳机声音小怎么办)

  • beremote.exe进程是什么文件 beremote进程信息查询(protect.exe进程)

    beremote.exe进程是什么文件 beremote进程信息查询(protect.exe进程)

  • 卡国家公园的黄毛果蝠,赞比亚 (© Nick Garbutt/Minden Pictures)(国家公园好玩吗)

    卡国家公园的黄毛果蝠,赞比亚 (© Nick Garbutt/Minden Pictures)(国家公园好玩吗)

  • 关于内容模型字段里的“自动表单”和“固化字段”(模型的内容)

    关于内容模型字段里的“自动表单”和“固化字段”(模型的内容)

  • 预交所得税分录怎么写
  • 债务重组无形资产的评估费
  • 什么是电子银行渠道限额
  • 结转销售成本的分录
  • 收到投资土地使用权的会计科目
  • 预收账款怎么做财务分析报告
  • 免税蔬菜税额用什么表示
  • 小规模纳税人季度多少免税
  • 申报增值税无附表怎么填写
  • 对外支付代扣代缴企业所得税
  • 免退税企业结转怎么操作
  • 固定资产清理期末可以有余额吗
  • 保险公司赔款可以用子女的二类卡吗
  • 货币的兑换是怎么决定的
  • 以股权投资入股放高利贷违法吗
  • 城市维护建设税的计税依据是什么
  • 简单内帐利润报表一目了然
  • 退回押金如果要退回吗
  • 报销话费属于什么费用
  • 征信证明怎么开啊
  • 以前年度暂估
  • 收到发票对方已红冲是否退回?
  • 航天维护费全额抵扣
  • 电子产品怎么计税
  • 在王者荣耀里怎么删除好友
  • vue框架使用方法
  • 月末是指
  • 合并报表抵消分录实例
  • 最新cpu天梯表
  • 电子发票怎样进入查验
  • win10怎么设置硬盘为第一启动项
  • 电脑开机后桌面图标变乱
  • 企业税计算方法
  • PHP:mcrypt_decrypt()的用法_Mcrypt函数
  • 软件开发企业进项税额抵扣
  • 大群的芒基蝠鲼跃出水面,墨西哥加利福尼亚湾 (© Mark Carwardine/Minden Pictures)
  • php上传多文件
  • element_at
  • display version命令
  • telnet命令大全
  • 保险代理人展业成本如何计算
  • 新企业会计准则
  • 银行利息的收入计入什么科目
  • 工会经费计入什么项目流量表
  • 费用报销单如何粘贴票据
  • 公司给员工租的房子计入什么科目
  • 现金短缺与溢余的区别
  • 社会团体收到的会费怎么入账
  • 小规模纳税人需要每月报税吗
  • 第二个季度
  • 代扣代缴增值税税率
  • 影视产业前景
  • 会议中发生的相关事件
  • 原始凭证的审核和填制
  • mysql的外键
  • ubuntu系统安装无线网卡驱动
  • mysql 5.7.18 winx64密码修改
  • innodb_flush_method取值方法(实例讲解)
  • MAC怎么将单独一个应用静音
  • solaris8+apache2+weblogic813+db2_82客户端+128 安装过程
  • xp系统开机出现英文怎么办
  • srv32.exe - srv32进程是什么文件 有何作用
  • win10如何限制电脑上网权限
  • imscmig.exe
  • mac笔记本如何设置不黑屏
  • win10电池图标不动
  • win10升级 其他用户
  • win8和win10怎么共享文件
  • win10系统中断怎么解除
  • 使用jquery
  • cocos2dx quick lua 学习笔记1
  • js对话框确定事件
  • 了不起的女孩
  • JavaScript驾驭网页-获取网页元素
  • 信息流广告与原生广告的区别
  • jquery插件库免费
  • 个体户注销税盘需要公章吗
  • 个人所得税工资达到多少才交税
  • 税收优惠政策有没有政府补助
  • 劳务报酬预缴税率表
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设