ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色
本文首发:《ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色》
ECharts 饼状图中的每个扇形颜色其实都可以自定义或者随机显示颜色。比如 X 轴是各销售渠道名,那么你可以需要使用全局统一的识别色彩,那么就需要指定每个扇面的颜色。本文讲解 4 种配置修改 ECharts 饼图颜色的方法。
另外,这个世界已经悄然发生变化,现在根本无需写任何前端代码,直接使用卡拉云 —— 新一代低代码开发工具帮你搭建后台工具,卡拉云可一键接入常见数据库及 API ,无需懂前端,内置包括 ECharts 在内的各类前端组件,无需调试,拖拽即用。原来三天的工作量,现在 1 小时搞定,谁用谁知道,早用早下班,详见本文文末。
方法一:在 series
内配置饼状图颜色
EChart.js 在 series
中设置饼状图颜色的 Demo 源代码:
扩展阅读:《最好用的 7 款 Vue admin 后台管理框架测评》
方法二:在 option
内配置饼状图颜色
EChart.js 在 option
中设置饼状图颜色的 Demo 源代码:
扩展阅读:《Vue 实现 PDF 文件在线预览 - 手把手教你写 Vue PDF 预览功能》
方法三:在 data
内配置饼状图颜色
EChart.js 在 data
中设置饼状图颜色的 Demo 源代码:
扩展阅读:《ECharts X 轴标签过长导致文字重叠的 4 种解决方案》
方法四:配置 ECharts 饼状图随机颜色
扩展阅读:《7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果(Vue loader)类型》
使用「卡拉云」直接生成饼状图
本文介绍了如何解决在 Vue 中 ECharts 饼图指定或随机颜色的解决方案,虽然开源库已经帮我们解决了大部分造轮子的事,但总有些细枝末节的问题需要我们自己手动解决。那么有没有一种完全不用会前端,一行代码也不用写的方法,生成图表呢?这里推荐你使用卡拉云,卡拉云内置多种样式的图表,仅需鼠标拖拽即可生成,完全不用懂任何前端。
卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。原来三天的开发工作量,使用卡拉云后可缩减至 1 小时,欢迎免费试用卡拉云。
扩展阅读:
版权声明: 本文为 InfoQ 作者【蒋川】的原创文章。
原文链接:【http://xie.infoq.cn/article/b4ccbe9e4e11ec3065b5c639b】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论