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

  • 钉钉办公软件能定位吗(用钉钉办公)

    钉钉办公软件能定位吗(用钉钉办公)

  • wps表格竖向求和是什么(wps表格竖向求和快捷键)

    wps表格竖向求和是什么(wps表格竖向求和快捷键)

  • 2.4ghz和5ghz的区别是什么(2.4ghz和5ghz的区别热点)

    2.4ghz和5ghz的区别是什么(2.4ghz和5ghz的区别热点)

  • 华为手机怎么隐藏电量(华为手机怎么隐藏文件夹)

    华为手机怎么隐藏电量(华为手机怎么隐藏文件夹)

  • 怎么将华为手机上的东西转到苹果手机上(怎么将华为手机通讯录导入苹果手机)

    怎么将华为手机上的东西转到苹果手机上(怎么将华为手机通讯录导入苹果手机)

  • qq没加好友可以发文件吗(qq没加好友可以发视频吗)

    qq没加好友可以发文件吗(qq没加好友可以发视频吗)

  • 拼多多勋章墙有什么用(什么是拼多多勋章墙)

    拼多多勋章墙有什么用(什么是拼多多勋章墙)

  • 收藏店铺和关注店铺一样吗(收藏店铺和关注店铺有什么区别)

    收藏店铺和关注店铺一样吗(收藏店铺和关注店铺有什么区别)

  • jovi物联可以删掉么(jovi物联能卸载吗)

    jovi物联可以删掉么(jovi物联能卸载吗)

  • phones接口是什么意思(pg接口是什么)

    phones接口是什么意思(pg接口是什么)

  • ipad2019充电多久能充满(ipad2020 充电多久)

    ipad2019充电多久能充满(ipad2020 充电多久)

  • mpgt2ch/a是什么型号(mpgw2ch/a是什么型号)

    mpgt2ch/a是什么型号(mpgw2ch/a是什么型号)

  • 计算机字长是指什么(计算机字长是指CPU中整数寄存器和定点运算器的宽度)

    计算机字长是指什么(计算机字长是指CPU中整数寄存器和定点运算器的宽度)

  • 小米立式无线充电器可以充苹果手机吗(小米立式无线充电器说明书)

    小米立式无线充电器可以充苹果手机吗(小米立式无线充电器说明书)

  • 直接删除文件的快捷键(直接删除文件的快捷方式)

    直接删除文件的快捷键(直接删除文件的快捷方式)

  • macbook怎么卸载app(Macbook怎么卸载软件)

    macbook怎么卸载app(Macbook怎么卸载软件)

  • 华为log和nolog怎么看(华为log和nolog怎么选)

    华为log和nolog怎么看(华为log和nolog怎么选)

  • ps怎么填空白(ps怎么填充白色区域)

    ps怎么填空白(ps怎么填充白色区域)

  • 腾讯now直播怎么注销(腾讯Now直播怎么退款)

    腾讯now直播怎么注销(腾讯Now直播怎么退款)

  • 键盘线插哪里(键盘线插口)

    键盘线插哪里(键盘线插口)

  • 华为nova5与nova5pro的区别(华为nova5与nova5pro)

    华为nova5与nova5pro的区别(华为nova5与nova5pro)

  • 苹果手机怎么边打电话边录音(苹果手机怎么边打游戏边听歌)

    苹果手机怎么边打电话边录音(苹果手机怎么边打游戏边听歌)

  • 如何让屏幕黄斑消失(屏幕太黄怎么调)

    如何让屏幕黄斑消失(屏幕太黄怎么调)

  • dnetc.exe是什么进程 dnetc进程有什么作用(dotnetfx.exe)

    dnetc.exe是什么进程 dnetc进程有什么作用(dotnetfx.exe)

  • 【003】-Cesium中加载大规模数据稳定流畅之性能优化思路(cesium description)

    【003】-Cesium中加载大规模数据稳定流畅之性能优化思路(cesium description)

  • c语言void*指针是什么(c语言 *指针)

    c语言void*指针是什么(c语言 *指针)

  • 运输发票税率6%和3%区别在哪
  • 车船税规定怎么缴纳
  • 出口退税的条件有哪些
  • 企业季度所得税申报表怎么填写
  • 一般纳税人增值税优惠政策2023
  • 生产企业出口转内销增值税申报
  • 人工成本比例
  • 生产型增值税转变为消费型增值税
  • 每天现金日记账登记完以后应怎么对账
  • 固定资产分配分录
  • 普通增值税发票是否可以抵扣?
  • 财政补助收入怎么结转
  • 房地产对居民生活的影响
  • 记账汇率是什么意思
  • 财务申报工资和实际发工资
  • 算项目人工成本的公式
  • 酒店客房主营业务支出明细表怎么写
  • 2020年小规模生活服务业优惠政策
  • 废旧物资回收需要什么手续
  • 关于汽车配件的书
  • 收据做账税局认嘛
  • 适用增值税差额征税的小规模纳税人
  • 新注册公司季度资产为零
  • 卷烟消费税税率表
  • 快递公司之间的合作模式
  • 社保已申报未缴费可以减员吗
  • 无形资产的入账价值包括什么
  • 付佣金代扣个人所得税税前列支
  • 或有资产是指
  • 全民游戏盒子怎么卸载
  • 监事会职权范围是什么
  • win7为什么现在不能用了
  • 最贵的苹果4
  • 项目提成比例
  • php 生成opcode
  • 转让居民企业的股权所得交企业所得税吗
  • 预缴的附加税怎么填表抵减
  • php常见错误
  • ai作画
  • 外地工程预缴的个人所得税是什么申报
  • 用友t3固定资产清理怎么操作
  • 结算外单位收取的费用
  • 购买理财资金来源规定
  • 公司股票买卖账务处理
  • java阻塞队列线程安全吗
  • SQLite中的WAL机制详细介绍
  • 固定资产折旧的账务处理
  • 债权投资产生的暂时性差异确认所得税吗
  • 以前年度损益调整结转到本年利润吗
  • 资产处置损益和投资收益的区别
  • 福利费需要通过应付职工薪酬吗
  • 商贸企业增值税税率是多少
  • 建筑施工中的合格是指
  • 预付在建工程款的会计分录
  • 高新技术企业认定条件
  • 代扣代缴个人所得税分录
  • 供应商奖惩制度具体办法
  • 税控盘全额抵扣怎么做分录
  • 银行承兑汇票提示付款期限
  • 进项税额转出怎么操作
  • 如何搭建一个企业
  • 记账凭证的附件和附单据
  • linux命令实现
  • Windows 2008R2 HyperV下安装CentOS6,网卡无痛设置
  • windows后台启动VirtualBox虚拟机让界面不在出现
  • linux cp用法
  • win1020h2正式版
  • win10玩cf几分钟无响应
  • win10wifi总是掉线
  • 批处理常用命令及用法大全
  • crontab设置每天执行
  • 浅谈幼儿良好行为的培养论文
  • 安卓拍照闪退
  • 一般纳税人开具的增值税普通发票和专用发票的区别
  • 广东电子税务局报税操作流程视频
  • 税务稽查建议书反馈意见
  • 农机作业服务费用 如何开发票
  • 辽宁税务局代码是多少
  • 财务公司怎么做
  • 税务总局2016年70号公告
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设