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

  • 抖币怎么转给另外一个号(抖币怎么转让给别人)

    抖币怎么转给另外一个号(抖币怎么转让给别人)

  • 魅族18支持的快充是多少(魅族18支持哪些快充协议)

    魅族18支持的快充是多少(魅族18支持哪些快充协议)

  • 微信去哪儿怎么取消免密支付(去哪儿开通了微信免密怎么关闭)

    微信去哪儿怎么取消免密支付(去哪儿开通了微信免密怎么关闭)

  • 为什么oppo手机没有录屏功能(为什么oppo手机打不开)

    为什么oppo手机没有录屏功能(为什么oppo手机打不开)

  • 怎么把logo改成透明底(怎么把logo改成透明底色)

    怎么把logo改成透明底(怎么把logo改成透明底色)

  • 苹果手机可以用北斗卫星导航系统吗(苹果手机可以用搜狗输入法吗)

    苹果手机可以用北斗卫星导航系统吗(苹果手机可以用搜狗输入法吗)

  • 闲鱼聊过的人删除了怎么找(闲鱼聊过的人删除了怎么找回)

    闲鱼聊过的人删除了怎么找(闲鱼聊过的人删除了怎么找回)

  • 华为p40与小米10pro对比(华为p40与小米11哪个好)

    华为p40与小米10pro对比(华为p40与小米11哪个好)

  • oppor11s什么时候上市(oppor11s什么时候上市的,手机卖多少钱)

    oppor11s什么时候上市(oppor11s什么时候上市的,手机卖多少钱)

  • 无线网络图标不见了怎么办(无线网络图标不见了怎么办手机)

    无线网络图标不见了怎么办(无线网络图标不见了怎么办手机)

  • wps怎么加页码数字(wps里怎么加页码)

    wps怎么加页码数字(wps里怎么加页码)

  • qq群视频在哪里可以找到(qq群视频找不到了怎么办)

    qq群视频在哪里可以找到(qq群视频找不到了怎么办)

  • 为什么excel打不开(为什么excel打不了中文字)

    为什么excel打不开(为什么excel打不了中文字)

  • xr双卡能单独飞行模式吗(xr双卡都能接打电话吗)

    xr双卡能单独飞行模式吗(xr双卡都能接打电话吗)

  • 手机记事本怎么导出(手机记事本怎么导出到新手机)

    手机记事本怎么导出(手机记事本怎么导出到新手机)

  • 抖音怎么上传视频30秒(抖音怎么上传视频)

    抖音怎么上传视频30秒(抖音怎么上传视频)

  • 华为手机卡显示hd什么意思(华为手机卡显示仅限紧急呼叫怎么回事)

    华为手机卡显示hd什么意思(华为手机卡显示仅限紧急呼叫怎么回事)

  • 如何取消情侣头像装扮(怎么取消情侣标志)

    如何取消情侣头像装扮(怎么取消情侣标志)

  • 微信运动需要开网络吗(微信运动需要开数据吗)

    微信运动需要开网络吗(微信运动需要开数据吗)

  • p30拍月亮怎么拍(p30怎么拍月亮好看)

    p30拍月亮怎么拍(p30怎么拍月亮好看)

  • 云闪付app扫一扫在哪里(云闪付app扫一扫能扫支付宝吗)

    云闪付app扫一扫在哪里(云闪付app扫一扫能扫支付宝吗)

  • 已重置的抖音号能用吗(已重置的抖音号是不是注销了)

    已重置的抖音号能用吗(已重置的抖音号是不是注销了)

  • 广州地铁扫码怎么用(广州乘地铁扫码)

    广州地铁扫码怎么用(广州乘地铁扫码)

  • qq附近的人打招呼别人收不到(qq附近的人打招呼都是提示明天?)

    qq附近的人打招呼别人收不到(qq附近的人打招呼都是提示明天?)

  • a1286苹果笔记本哪一年(a1286苹果笔记本说明书)

    a1286苹果笔记本哪一年(a1286苹果笔记本说明书)

  • Vue实战【后端返回文件流时,前端如何处理并成功下载流文件】(vue的后端)

    Vue实战【后端返回文件流时,前端如何处理并成功下载流文件】(vue的后端)

  • JavaScript基础_1

    JavaScript基础_1

  • 金税盘软件打不开
  • 对方给我公司开的红字发票如何查询
  • 计提企业所得税分录
  • 收到商业汇票计入科目
  • 税控盘锁死日期查询
  • 向境外个人支付咨询费如何算税
  • 可以自己制作的商品
  • 特殊行业包括哪些
  • 年终零余额账户有余额
  • 第三方支付付款方式
  • 垫付了医药费保险报销时怎么办
  • 个人取得投资收益是否缴纳个税
  • 供热企业采暖费收入免征增值税政策解读
  • 加工成本属于什么会计科目
  • 装修计入固定资产
  • 销售软件产品
  • 增值税和增值税额的区别
  • 资产负债表如何调平
  • 企业汇算清缴后税务局会不会查
  • 小微企业增值税减免账务处理
  • 销售单价的变动,将促使保本点( )
  • 应收票据盘点表是出纳填吗
  • 月末进项税额结转会计分录
  • 鸿蒙系统怎么自动填充密码
  • 股东大会的召集有权
  • 房地产开发资质查询
  • 企业工商年报填错了怎么办
  • 房地产企业的沙盘模型制作费会计处理
  • 电脑开机无法启动怎么解决
  • php中的函数可以分为哪几种
  • 抵扣了的进项税可以冲销么
  • 双线服务器
  • 注册造价师挂靠费如何缴个税?
  • 退休后工作单位填什么内容
  • 巴塞罗那城市布局
  • php uasort
  • 利息增值税及附加计算
  • php的foreach循环语句
  • 个体户缴纳的税有哪些
  • 账面未分配利润等于净利润?
  • 抵押房产的保险费
  • js中定义变量关键词是
  • 帝国cms商城教程
  • 普通发票被作废了还能报销吗
  • 分页存储过程是什么
  • 现金流量表算财务报表吗
  • 开具房租发票的分录如何做?
  • 房地产开发成本和房地产开发产品
  • 仓库转租合同
  • 私车公用费用报销是否违规
  • 工会经费计提基数包括福利费吗
  • 城镇土地使用税百度百科
  • 采购预支款报销流程
  • 远期支票最长期限
  • 收购免税农产品的进项税率
  • 土地出让的钱归谁
  • Centos 7.3下SQL Server安装配置方法图文教程
  • ubuntu x
  • 控制面板中的添加和删除在哪里
  • hyper-v是啥
  • task运行在哪个工作单元
  • 标签windows
  • win8系统更新在哪里
  • 红石使用基础教学
  • 运行ghost
  • linux 中断 处理
  • win10打开iis管理器命令
  • dosbox终止程序
  • Unity3D游戏开发标准教程
  • 关于如何用好调查研究推动警务发展
  • js定义数字
  • JavaScript 和 Java 的区别浅析
  • js正则 \w
  • 深入理解新发展理念,推进供给侧结构性改革心得体会
  • Android studio 打包apk后卡在首屏
  • jQuery ajax全局函数处理session过期后的ajax跳转问题
  • 安庆税务局窗口电话
  • 怎样在江苏智慧人社上停保
  • 2018建筑材料考试试题及答案河南卷
  • 公司如何制定制度
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设