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

  • 福昕阅读器怎么复制pdf里的文字(福昕阅读器怎么编辑)

    福昕阅读器怎么复制pdf里的文字(福昕阅读器怎么编辑)

  • 为什么拍的抖音上不了热门(为什么拍的抖音视频是黑屏的出不来)

    为什么拍的抖音上不了热门(为什么拍的抖音视频是黑屏的出不来)

  • 一段文字怎样发朋友圈(一段文字怎样发朋友圈视频教程)

    一段文字怎样发朋友圈(一段文字怎样发朋友圈视频教程)

  • 抖音作品标题屏蔽了怎么回事(抖音作品标题怎么不见了)

    抖音作品标题屏蔽了怎么回事(抖音作品标题怎么不见了)

  • 小米路由器原始密码多少(小米路由器原始密码在哪里看)

    小米路由器原始密码多少(小米路由器原始密码在哪里看)

  • 爱分享网怎么下载不了(爱分享手机版下载)

    爱分享网怎么下载不了(爱分享手机版下载)

  • 苹果媒体音量和系统音量怎么分开(苹果媒体音量和铃声怎么分开)

    苹果媒体音量和系统音量怎么分开(苹果媒体音量和铃声怎么分开)

  • 手机耳机单声道怎么办(苹果耳机一边有声音一边没声音)

    手机耳机单声道怎么办(苹果耳机一边有声音一边没声音)

  • ios11什么时候出的(苹果11什么时候出版)

    ios11什么时候出的(苹果11什么时候出版)

  • 微信解封为什么收不到短信验证码(微信解封为什么要别人手机号)

    微信解封为什么收不到短信验证码(微信解封为什么要别人手机号)

  • 抖音官方认证有什么好处(抖音官方认证有哪些类型)

    抖音官方认证有什么好处(抖音官方认证有哪些类型)

  • 苹果11支持红外遥控吗(苹果11支持红外线吗)

    苹果11支持红外遥控吗(苹果11支持红外线吗)

  • kindle能不能看视频(kindle能看电子书吗)

    kindle能不能看视频(kindle能看电子书吗)

  • 微信实名认证更改后对信息有没有影响(微信实名认证更改后好友还在吗)

    微信实名认证更改后对信息有没有影响(微信实名认证更改后好友还在吗)

  • ipada1673是什么型号(ipada1673是ipad几)

    ipada1673是什么型号(ipada1673是ipad几)

  • 微云会员有什么用(微云会员什么用)

    微云会员有什么用(微云会员什么用)

  • 有什么软件可以搜题(有什么软件可以识别图片的文字)

    有什么软件可以搜题(有什么软件可以识别图片的文字)

  • 手机如何修改照片像素(手机如何修改照片日期和时间)

    手机如何修改照片像素(手机如何修改照片日期和时间)

  • 小米手环3怎么开启nfc功能(小米手环3怎么解绑)

    小米手环3怎么开启nfc功能(小米手环3怎么解绑)

  • word2010公式3.0不见了(word2007公式不能用)

    word2010公式3.0不见了(word2007公式不能用)

  • SpringMVC详解(springmvc简介)

    SpringMVC详解(springmvc简介)

  • phpcms 2008安装报错怎么办(php安装步骤)

    phpcms 2008安装报错怎么办(php安装步骤)

  • 织梦dedecms自定义标签liketags调用tag/keyword相同的相关文章(织梦怎么改网站主页)

    织梦dedecms自定义标签liketags调用tag/keyword相同的相关文章(织梦怎么改网站主页)

  • 小规模纳税人销售已使用固定资产
  • 期间费用明细表中的各项税费是指什么
  • 应税劳务和应税服务不合理列支的有哪些
  • 采购部付款申请单和财务付款流程
  • 机票退票手续费报销凭证
  • 支付短期借款计入什么科目
  • 年末计提存货跌价准备
  • 发票已开款项未入账有什么影响?
  • 购车时服务费用怎么算
  • 中小企业固定资产管理存在的问题
  • 发票抬头开错跨月了怎么办?
  • 抽奖获得的奖品有权转卖吗
  • 个体工商户变更法人
  • 差额征税可以开发票吗
  • 预付账款供应商类别怎么填
  • windows7远程桌面连接在哪里
  • win7系统中如何让未响应的程序继续运行
  • 经营性租赁 会计准则
  • 无法连接到移动网络小米
  • 三七粉的功效与作用及正确吃法
  • 冲减备用金该怎么做账
  • 远期结汇账务处理办法
  • 吊兰怎么养才能开花
  • 工商注册经营部和公司的区别
  • vue下载安装
  • 按实际成本结转6日和7日的材料采购成本
  • 转让股权后公司资产
  • 灵活就业养老保险退休后每月领多少钱
  • 库存现金盘盈怎么做账
  • tp6 分页
  • 月底结转汇兑损益
  • vue项目中技巧知识点
  • 如何在vue项目中禁止谷歌浏览器改变网页颜色
  • vue做项目的流程
  • session用处
  • 命令行改gpt
  • php用户登录界面代码
  • python操作csv
  • redis incr 高并发
  • 采购入库单怎么生成
  • 帝国cms整合Elasticsearch
  • 织梦cms怎么样
  • 公司代个人缴纳社保,但不发工资和交税
  • 库存商品的科目设置
  • 残保金会计分录人员经费
  • 以前年度错误账务处理
  • 房租已付未收到发票
  • 按季度报税怎么处理
  • 不得从销项税额中抵扣的进项税额,不得计提加计抵减额
  • 民间非营利组织会计制度及操作实务
  • 支票拿到银行怎么用
  • 小规模纳税人进项可以抵扣吗
  • 开发票时如何添加商品编码?
  • 实际利率 会计
  • 英伟达更新有用吗
  • 苹果mac怎么下载淘宝
  • win7 win8.1双系统安装教程
  • win8开启快速启动
  • windowsxp复制粘贴不可用?
  • win8经典模式
  • win10怎么看下载的软件
  • 解决安装后软件icon一圈白边问题
  • win7到欢迎界面卡半天
  • win8怎么清空电脑只剩系统
  • yarn使用教程
  • nodejs全栈前景
  • js表单验证实例怎么写
  • 如何把多个文本文档合并成一个且分行不重叠
  • nodejs递归创建目录
  • 一个简单的shell脚本
  • js字符串的操作方法
  • jquery ztree选中节点颜色
  • python django框架
  • android怎么学
  • jquerycuishifeng
  • 小规模纳税人利润如何缴税
  • 关联企业之间借款的税收处理
  • 回购房 安置房
  • 河南地税申报表怎么填
  • 企业税务状态查询网站
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设