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

  • iqoo8怎么开90帧(iqoou1怎么开90帧)

    iqoo8怎么开90帧(iqoou1怎么开90帧)

  • 电脑上的时间怎么设置自动更新呢(电脑上的时间怎么不见了怎么办)

    电脑上的时间怎么设置自动更新呢(电脑上的时间怎么不见了怎么办)

  • 微信朋友圈仅聊天代表什么(微信朋友圈仅聊天是不是看不到朋友圈了)

    微信朋友圈仅聊天代表什么(微信朋友圈仅聊天是不是看不到朋友圈了)

  • iphone11屏幕刷新率(iphone11屏幕刷新率是120hz吗)

    iphone11屏幕刷新率(iphone11屏幕刷新率是120hz吗)

  • 小米蓝牙耳机air2没有弹窗吗(小米蓝牙耳机air2 se)

    小米蓝牙耳机air2没有弹窗吗(小米蓝牙耳机air2 se)

  • 华为5x支持电信卡吗(华为5c支持电信卡吗)

    华为5x支持电信卡吗(华为5c支持电信卡吗)

  • 微信扫二维码出现白屏(微信扫二维码出来的聊天框)

    微信扫二维码出现白屏(微信扫二维码出来的聊天框)

  • qq邮箱自动回复一天几次(Qq邮箱自动回复怎么设置)

    qq邮箱自动回复一天几次(Qq邮箱自动回复怎么设置)

  • 电脑自动打字怎么回事(电脑自动打字怎么关)

    电脑自动打字怎么回事(电脑自动打字怎么关)

  • u钱包服务器异常什么意思(u钱包不能用了吗)

    u钱包服务器异常什么意思(u钱包不能用了吗)

  • 微博加入黑名单 对方会知道吗(微博加入黑名单对方还能看我主页吗)

    微博加入黑名单 对方会知道吗(微博加入黑名单对方还能看我主页吗)

  • adidas小程序预约成功什么时候知道(阿迪达斯小程序预约成功什么样子)

    adidas小程序预约成功什么时候知道(阿迪达斯小程序预约成功什么样子)

  • 抖音上说话的声音怎么设置(抖音上说话的声音怎么弄)

    抖音上说话的声音怎么设置(抖音上说话的声音怎么弄)

  • 手机能打开mdf文件吗(手机能打开mdb文件吗)

    手机能打开mdf文件吗(手机能打开mdb文件吗)

  • airpods支持快充吗(airpods用快充)

    airpods支持快充吗(airpods用快充)

  • 水印相机怎么拍(水印相机怎么拍照)

    水印相机怎么拍(水印相机怎么拍照)

  • 小米手环怎么判断睡眠(小米手环怎么判断无氧运动)

    小米手环怎么判断睡眠(小米手环怎么判断无氧运动)

  • 手机上显示月亮状图标是什么意思(手机上显示月亮图标)

    手机上显示月亮状图标是什么意思(手机上显示月亮图标)

  • 应用包管理组件可以清除数据吗(应用包管理组件在哪打开)

    应用包管理组件可以清除数据吗(应用包管理组件在哪打开)

  • 苹果手机怎么设置骚扰电话的来电(苹果手机怎么设置铃声自己喜欢的歌曲)

    苹果手机怎么设置骚扰电话的来电(苹果手机怎么设置铃声自己喜欢的歌曲)

  • Win11玩游戏时鼠标箭头总出现怎么办?Win11玩游戏时屏蔽鼠标的解决方法(win11玩游戏鼠标卡顿)

    Win11玩游戏时鼠标箭头总出现怎么办?Win11玩游戏时屏蔽鼠标的解决方法(win11玩游戏鼠标卡顿)

  • <span>标签中英文/中文自动换行(span标签中的字符串怎么获取)

    <span>标签中英文/中文自动换行(span标签中的字符串怎么获取)

  • 协同过滤算法(基于用户的协同过滤算法)

    协同过滤算法(基于用户的协同过滤算法)

  • 金税盘技术维护费
  • 内蒙古注册税务师协会
  • 公司支付宝账户要交税吗
  • 微信小程序需要授权怎么设置
  • 子公司固定资产移到母公司
  • 企业发生的技术转让费应计入
  • 固定资产核算的心得体会
  • 销售货物尚未收到会计分录
  • 无形资产土地使用权摊销年限规定
  • 预提费用下月要冲回吗
  • 公司收到银行承兑汇票怎么做分录
  • 资源税代扣代缴怎么操作
  • 抵押车贷款会不会扣车
  • 企业自主研发的成功案例
  • 三证合一之后还有税务登记证吗
  • 公司租的房子免租金要交房产税吗?
  • 报价需要提供哪些资料
  • 去税务局领用发票要多久
  • 个税累计预缴税额税率表是年还是月
  • 企业稀释股份
  • 合伙企业分红是免税企业需要缴纳什么税
  • 网上申领发票怎么清卡
  • 电子普通发票怎么开
  • 购买国外技术需要缴纳什么税
  • 0x8000005解决方案
  • 从银行提取备用金填制什么凭证
  • 股东之间转让股权需要股东会决议吗
  • 土建工程成本核算怎么做
  • php抽象类使用场景
  • launcher.exe是什么,每次开机都是否需要进行更改
  • 委托加工的加工费是含税的吗
  • php需要的软件
  • 什么是动态表单
  • Vue Router4 ,prams 传参失效和报错问题
  • 车船税每年都要多少钱
  • 为什么增值税申报表保存不了
  • 发票未认证跨月怎么办
  • phpcms api
  • 文化事业建设费税收优惠2023
  • 海关完税凭证抵税怎么算
  • 企业的其他应付款
  • sql server干嘛的
  • 旅游业营改增怎么报税
  • 农机免税发票能抵扣吗
  • 金融工具占比低
  • 个税汇算清缴是退税吗
  • 可供出售金融资产现在叫什么
  • 公司租赁的车辆发生的费用都可以报销吗?
  • 未收到货款发票是什么意思
  • 支付水电费会计等式
  • 外购商品科目设置
  • 装饰公司收到的礼品
  • 话费充值发票可以开公司抬头吗
  • 发票红冲重新开具怎么做分录
  • 酒店购买的餐具可以退吗
  • 航天开票系统怎么导出已开票明细
  • 股权变更需要多久
  • 私营公司固定资产怎么查
  • mysql1194
  • unix du
  • win8系统c盘占用多大
  • linux chmod命令用法
  • 重装系统 xp
  • win10 win8.1双系统
  • 查看linux的命令
  • Windows7 64位系统如何添加打印机图文教程
  • linux怎么禁用用户
  • win10恢复到win7系统
  • [置顶]电影名字《收件人不详》
  • 慎用小儿百部止咳糖浆
  • 地形图高程点坐标高程提取
  • unity3d ik
  • unity更新下载文件
  • centos 安装完成后无法启动
  • javascript学习指南
  • android自定义view的三大流程
  • 捐赠纳税
  • 税款所属期起止日期
  • 公司出租非住宅税种
  • 出口退税函调不予退税的后果
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设