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

  • 联想小新14兼容性设置在哪(联想小新兼容性站点怎么添加)

    联想小新14兼容性设置在哪(联想小新兼容性站点怎么添加)

  • 荣耀手机屏幕变黑白怎么办(荣耀手机屏幕变黑白了怎么还原彩色)

    荣耀手机屏幕变黑白怎么办(荣耀手机屏幕变黑白了怎么还原彩色)

  • 计算机网络分类中wan代表(计算机网络分类方法有很多种,如果从覆盖范围来分)

    计算机网络分类中wan代表(计算机网络分类方法有很多种,如果从覆盖范围来分)

  • 小米手环一直显示请先绑定(小米手环一直显示箭头)

    小米手环一直显示请先绑定(小米手环一直显示箭头)

  • qq字符怎么开启(qq字符在哪打开)

    qq字符怎么开启(qq字符在哪打开)

  • oppo手机怎么恢复出厂设置(oppo手机怎么恢复桌面布局)

    oppo手机怎么恢复出厂设置(oppo手机怎么恢复桌面布局)

  • google手机号码无法进行验证是怎么回事(google电话号码没办法验证怎么办)

    google手机号码无法进行验证是怎么回事(google电话号码没办法验证怎么办)

  • 华为平板m6有没有耳机孔(华为平板m6有没有红外线功能)

    华为平板m6有没有耳机孔(华为平板m6有没有红外线功能)

  • 笔记本电脑平板电脑都属于(笔记本电脑平板电脑区别)

    笔记本电脑平板电脑都属于(笔记本电脑平板电脑区别)

  • 微信健康码哪里申请(微信健康码哪里申诉)

    微信健康码哪里申请(微信健康码哪里申诉)

  • usb keyboard是什么(usb keyboard function)

    usb keyboard是什么(usb keyboard function)

  • 苹果视频怎么截图成照片(苹果视频怎么截取部分画面)

    苹果视频怎么截图成照片(苹果视频怎么截取部分画面)

  • 华为5x能不能插电信卡(华为5x有nfc功能吗)

    华为5x能不能插电信卡(华为5x有nfc功能吗)

  • word稿纸字体设置(word稿纸设置字体大小)

    word稿纸字体设置(word稿纸设置字体大小)

  • 手机内存和电脑内存的区别(手机内存和电脑内存哪个快)

    手机内存和电脑内存的区别(手机内存和电脑内存哪个快)

  • ios12系统怎么找照片流(iphone12怎么看系统版本)

    ios12系统怎么找照片流(iphone12怎么看系统版本)

  • iphonex切换控制怎么用(iphonex切换控制怎么开启)

    iphonex切换控制怎么用(iphonex切换控制怎么开启)

  • 手机剪贴板在哪里清除(手机剪贴板在哪里打开)

    手机剪贴板在哪里清除(手机剪贴板在哪里打开)

  • 手机死机开不了机怎么办(vivo手机死机开不了)

    手机死机开不了机怎么办(vivo手机死机开不了)

  • 酷我音乐如何关闭评论(酷我音乐如何关闭桌面歌词)

    酷我音乐如何关闭评论(酷我音乐如何关闭桌面歌词)

  • 苹果手机能边打电话边录音吗(苹果手机能边打边录音吗)

    苹果手机能边打电话边录音吗(苹果手机能边打边录音吗)

  • 抖音怎么收藏音乐(抖音怎么收藏音频文件)

    抖音怎么收藏音乐(抖音怎么收藏音频文件)

  • jtag接口定义(jtag接口定义10针)

    jtag接口定义(jtag接口定义10针)

  • 微网店怎么开(在微店开网店的详细步骤)

    微网店怎么开(在微店开网店的详细步骤)

  • 网络通信原理(网络通信原理图)

    网络通信原理(网络通信原理图)

  • 魅族路由器mini要插网线吗?魅族路由器mini是否需要外界网络(魅族路由器mini说明书)

    魅族路由器mini要插网线吗?魅族路由器mini是否需要外界网络(魅族路由器mini说明书)

  • VMware虚拟机安装Ubuntu 2022最新版详细图文安装教程(VMware虚拟机安装+Ubuntu下载+VMware虚拟机配置运行)(vmware虚拟机安装在移动硬盘)

    VMware虚拟机安装Ubuntu 2022最新版详细图文安装教程(VMware虚拟机安装+Ubuntu下载+VMware虚拟机配置运行)(vmware虚拟机安装在移动硬盘)

  • 存量房地产转让土地增值税
  • 应纳附加税是什么
  • 减免所得税额是怎么算出来的12行
  • 代征增值税业务的账务处理
  • 公司提供住宿员工在外居住出现问题
  • 政府减免税款如何账务处理
  • 2020年企业减免
  • 税法对固定资产大修理
  • 长期股权投资的4个明细科目
  • 员工借款会计科目
  • 什么是前期差错
  • 外购摩托车从销项税额中怎么抵扣?
  • 分包挂靠认定依据
  • 固定资产的初始成本包括
  • 工资做账原始凭证是什么
  • 车辆购置税会计账务处理
  • 营改增对金融服务业税负的影响
  • 辅导期一般纳税人预缴增值税
  • 新成立的分公司怎么样
  • 待抵扣税费
  • 建筑业劳务分包怎样算税
  • 预付的费用没有还没有收到发票
  • 收代扣代缴个税手续费会计分录
  • 净资产是所有者权益一样吗
  • 红字发票如何填写摘要
  • 工会经费申报表的应税项应该怎样填写
  • windows10专业
  • 解放双手神器说说
  • mac系统如何开启任何来源
  • 社保公积金的钱可以提出来吗
  • 详解php语言最牛的语言
  • php nsq
  • 股权转让合同怎么解除
  • 付款凭证怎么填写电脑
  • 应纳税所得税计算公式
  • 支付本月物业费怎么做账
  • 用php写个简单的编程
  • php foreach二维数组
  • 汇兑损失是否可以抵扣
  • php include require
  • err03 failed to
  • web全栈工程师是干什么的
  • javascript保留字有哪些
  • 孪生神经网络 计算相似度
  • 命令压缩文件
  • vue挂载dom
  • mysql ndb innodb
  • 工会经费是公司交还是个人交
  • 公司处置已使用4年多的汽车,怎么增值税申报
  • php定义变量的方法
  • 织梦可以放两套模板吗
  • mongodb查询表数据
  • mongodb主备
  • 资产负债率如何
  • 在mysql中设置事务保存点
  • 抵扣税款
  • 进口退货退税
  • 报销差旅费会计分录退回现金
  • 甲企业于2019年3月1日以2000万元取得乙上市公司
  • mysql的安全级别
  • rpm方式安装samba软件
  • sql替换快捷键
  • Linux Container(LXC容器)的基本命令使用简介
  • win10系统怎么设置开机密码
  • linux系统检测
  • windows无法完成配置若要尝试恢复配置
  • win10 2020h1
  • win7系统笔记本怎么调节电脑亮度
  • win7硬盘访问权限怎么解除
  • Metaio in Unity3d 教程--- 二. 创建自己的Application
  • jquery 刷新div
  • node-js
  • node.js和go
  • 批处理 判断文件是否存在
  • 理解和运用的重要性要站在哪个的视觉去判断
  • 用python发邮件
  • scrapy爬虫教程
  • 国土国税垂管部主任是谁
  • 税务谈心谈话记录2021
  • 2021年房产税收新政
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设