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

  • 微信直播如何投诉(微信直播如何投诉商家)

    微信直播如何投诉(微信直播如何投诉商家)

  • 荣耀30青春版有几种颜色呢(荣耀30青春版有快充吗)

    荣耀30青春版有几种颜色呢(荣耀30青春版有快充吗)

  • vivo x27怎么看运行内存(vivo怎么查看运存)

    vivo x27怎么看运行内存(vivo怎么查看运存)

  • 计算机的主要特点有哪些(计算机的主要特点是具有运算速度快精准度高和)

    计算机的主要特点有哪些(计算机的主要特点是具有运算速度快精准度高和)

  • 微信如何变回白色主题(怎么让微信变回白色)

    微信如何变回白色主题(怎么让微信变回白色)

  • word文字底色怎么取消(word文字底色怎么变成透明)

    word文字底色怎么取消(word文字底色怎么变成透明)

  • 苹果手机和华为手环能匹配吗(苹果手机和华为手机哪个安全性高)

    苹果手机和华为手环能匹配吗(苹果手机和华为手机哪个安全性高)

  • 苹果手机符号在哪里找(苹果手机符号在哪里)

    苹果手机符号在哪里找(苹果手机符号在哪里)

  • 钉钉中途换设备会影响观看时长吗(钉钉中途换设备听课算进总时长吗)

    钉钉中途换设备会影响观看时长吗(钉钉中途换设备听课算进总时长吗)

  • mini5多大尺寸(平板mini5多大尺寸)

    mini5多大尺寸(平板mini5多大尺寸)

  • 酷我音乐和酷狗音乐区别(酷我音乐和酷狗音乐哪个好一点)

    酷我音乐和酷狗音乐区别(酷我音乐和酷狗音乐哪个好一点)

  • 电脑开机出现americanmegatrends怎么办(电脑开机出现american megatrends)

    电脑开机出现americanmegatrends怎么办(电脑开机出现american megatrends)

  • 安卓8g跟12g差别(安卓8g和12g差别)

    安卓8g跟12g差别(安卓8g和12g差别)

  • iqoo的nfc怎么用(iqoo nfc功能)

    iqoo的nfc怎么用(iqoo nfc功能)

  • b站ul等级是什么(哔哩哔哩ul等级是什么)

    b站ul等级是什么(哔哩哔哩ul等级是什么)

  • 电脑进入安全模式按哪个键(电脑进入安全模式后怎么正常开机)

    电脑进入安全模式按哪个键(电脑进入安全模式后怎么正常开机)

  • 抖音刷赞有什么后果

    抖音刷赞有什么后果

  • 华为双卡怎么切换拨号(华为双卡怎么切换微信)

    华为双卡怎么切换拨号(华为双卡怎么切换微信)

  • 人心不古是什么意思(人心不古是什么意思解释)

    人心不古是什么意思(人心不古是什么意思解释)

  • 苹果11上面的刘海怎么才能不显示(苹果11为啥有个小刘海)

    苹果11上面的刘海怎么才能不显示(苹果11为啥有个小刘海)

  • 网站宣传方法(网站宣传方法分析)

    网站宣传方法(网站宣传方法分析)

  • 拼多多怎么分身(拼多多分身版下载)

    拼多多怎么分身(拼多多分身版下载)

  • 手机耳朵模式怎么关闭(手机上是耳机模式怎么调)

    手机耳朵模式怎么关闭(手机上是耳机模式怎么调)

  • WPS演示如何设置图片透明度(wps演示如何设置视频背景)

    WPS演示如何设置图片透明度(wps演示如何设置视频背景)

  • 华为mate20pro贴膜吗(华为mate20pro贴膜会影响屏下指纹吗)

    华为mate20pro贴膜吗(华为mate20pro贴膜会影响屏下指纹吗)

  • 【登录界面】vue、element-ui登录界面模板(vue登录页面点击登录进入首页)

    【登录界面】vue、element-ui登录界面模板(vue登录页面点击登录进入首页)

  • 头歌-HTML基础(头歌HTML基础第一关初识HTML)

    头歌-HTML基础(头歌HTML基础第一关初识HTML)

  • 苗圃公司会计分录
  • 主营业务成本大于生产成本
  • 出售无形资产取得的收益属于收入吗
  • 预算资产负债表
  • 是否独立核算取决于什么
  • etc预付发票可以抵税吗
  • 采用重置成本计量属性的税种是
  • 合并报表投资收益为什么要抵消
  • 进项税转出申报表能填负数吗
  • 收到结算单应该怎么处理
  • 存货跌价准备转回的条件有哪些
  • 海关证需要年检吗
  • 没有发生关联交易需要关联申报吗?
  • 文化建设服务费减免
  • 销售不动产扣除项目有哪些
  • 企业的经济成本由什么构成
  • 公司注销后是不是就不再接受诉讼
  • 进项税额忘了抵扣
  • 分期收款销售的核算中发出商品时借什么账户
  • 未开发土地可否转给子公司
  • 公司购买汽车的购置税怎么做账
  • 折扣销售怎么确认
  • 软件产品加安装是混合销售吗?
  • 生产型企业进口退税政策
  • 园林绿化工程公司有哪些
  • 飞鱼星路由器信号有点差怎么办
  • 谷歌浏览器adobe flash player已不再支持
  • linux强制删除文件夹
  • win10删除了此电脑
  • php空间怎么用
  • php 链式调用
  • PHP:pcntl_sigtimedwait()的用法_PCNTL函数
  • 实际收到的货款怎么做账
  • 土地增值税属于财产税吗
  • 前端段落空两格怎么设置
  • php中session和cookie
  • 现金日记账期初余额怎么算
  • h5的开发
  • 一般纳税人与小规模纳税人在报税方面的区别
  • 最多显示2行文字怎么弄
  • iis搭建网站教程win10
  • 税号一般多少位数字
  • 没有交过税怎么办
  • 递延所得税资产和所得税费用的关系
  • 缴纳工会筹备金可以计入工会经费科目吗
  • 人力资源投资收益
  • 财务报表年报应怎么做
  • 最新版税控盘怎么设置打印机
  • 所得税申报表的营业成本包括哪些
  • 劳动仲裁赔偿款会计分录
  • 核定征收的计算方法
  • 罚款属于应付账款吗
  • 年金一定是一年一次吗
  • 小规模纳税人出租不动产优惠政策
  • 电子承兑背书了能撤回吗
  • 母子公司间固定资产交换
  • 公司赞助学校
  • 银行日记账登记依据
  • 本年利润的计算顺序为
  • 工程公司本月没发工资
  • 销售废旧物资是否缴税 如何账务处理
  • mysql基本表
  • debian glibc
  • 苹果mac电脑怎么复制粘贴
  • xp系统怎么改文件类型
  • linux的curl
  • OpenGL super bible(5th) 学习笔记 -- 像素缓冲区对象(PBO)
  • python3 生成器
  • python开发技术详解(全27集),5
  • js字符串的操作方法
  • javascript点击切换div内容
  • Python中list初始化方法示例
  • static function FindObjectsOfType (type : Type) : Object[]
  • jquery悬浮显示
  • 辽宁省国家税务局网上申报
  • 芜湖买房退契税在哪里退
  • 国税纳税申报表打印
  • 机构改革哪个单位负责
  • 服务费交哪个税目的印花税
  • 煤炭限产是利好还是利空
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设