实现echarts图多个legend图例和自定义legend中字体颜色

legend代码

 legend: [{orient: 'vertical', //图例垂直显示x: 'left', //x轴方向在左边显示itemGap: 2,//每条图例的距离textStyle: {color: '#999' //自定义文字字体颜色},itemHeight: 12.6,//每条图例的距离// data: medialist //数据也可以用赋值方式data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']},{orient: 'vertical',x: 'center',itemGap: 2,textStyle: {color: '#999' //字体颜色},itemHeight: 12.6,//data: formatslist111,data: ['访问', '营销', '广告', '视频', '引擎']}],

整体代码

option = {tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'},legend: [{orient: 'vertical', //图例垂直显示x: 'left', //x轴方向在左边显示itemGap: 2,//每条图例的距离textStyle: {color: '#999' //自定义文字字体颜色},itemHeight: 12.6,//每条图例的距离// data: medialist //数据也可以用赋值方式data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']},{orient: 'vertical',x: 'center',itemGap: 2,textStyle: {color: '#999' //字体颜色},itemHeight: 12.6,//data: formatslist111,data: ['访问', '营销', '广告', '视频', '引擎']}],series: [{name: '访问来源',type: 'pie',radius: ['0%', '30%'],center: ['20%', '40%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '30',fontWeight: 'bold'}},labelLine: {show: false},data: [{value: 335, name: '直接访问'},{value: 310, name: '邮件营销'},{value: 234, name: '联盟广告'},{value: 135, name: '视频广告'},{value: 1548, name: '搜索引擎'}]},{name: '访问来源',type: 'pie',radius: ['10%', '30%'],center: ['75%', '40%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '30',fontWeight: 'bold'}},labelLine: {show: false},data: [{value: 335, name: '访问'},{value: 310, name: '营销'},{value: 234, name: '广告'},{value: 135, name: '视频'},{value: 1548, name:'引擎'}]}]
};

下面放张效果图：

有什么简单的方法欢迎大家一起来讨论！嘻~

实现echarts图多个legend图例和自定义legend中字体颜色相关推荐

java制作海报工具类，java操作图片贴图，java给图片添加文字，调整字体颜色大小间距
工具类 java操作图片,给一个大图片贴小图片,给图片添加文字并调整文字颜色,大小,字体间距,把本地图片或者网络图片加载到缓冲区主要方法: imageIoRead方法,把图片加载到缓冲区 merge ...
Android（3）：编辑使用点9图和设置字体颜色
当需要使用图片作为背景图片时,比如作为文字的背景图片,当文字只有几个的时候,可能恰好可以将图片作为其背景图,但是当文字变多时,便可能会有一部分文字没有背景,比如这样: 所以为了防止这样的情况发生,我们 ...
Echarts数据可视化legend图例，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标
本文已参与「新人创作礼」活动,一起开启掘金创作之路. 宝子们,今天又是开心的一天呢~ 上面先说注意事项 1.如果使用show hidden控制图表显示隐藏,某些切换效果很奇怪,比如饼图,会从左上角开始 ...
Python使用matplotlib函数subplot可视化多个不同颜色的折线图、为指定的子图添加图例信息（legend）
Python使用matplotlib函数subplot可视化多个不同颜色的折线图.为指定的子图添加图例信息(legend) 目录
python使用Axes3D画三维图加入legend图例时报错AttributeError: ‘Poly3DCollection‘ object has no attribute ‘_edgecolo
Q:python使用Axes3D画三维图加入legend图例时报错AttributeError: 'Poly3DCollection' object has no attribute '_edgeco ...
求大神赐教，如何实现echarts自定义legend的样式如图下的这种
求大神赐教,如何实现echarts自定义legend的样式如图下的这种嘤嘤嘤不会写
可视化实时监控系统echarts图
1.躺着的柱状图 // 初始化echartInstance对象: this.$echarts.init(this.$refs.seller_ref, "chalk"); //第二 ...
Matplotlib：Legend 图例
1.图例legend基础语法及用法 matplotlib.pyplot.legend(*args, **kwargs)-loc Location code string, or tuple (see ...
echart图片库_附录：ECharts图属性介绍-统计图
基本属性 divID divId是统计图标识,每一种配色方案的统计图应该有不同的标识.注:如果两个统计图用同一个divId,预览时只会有一个统计图. 主题主题是控制统计通风格的属性.目前提供了14种 ...

实现echarts图多个legend图例和自定义legend中字体颜色

实现echarts图多个legend图例和自定义legend中字体颜色相关推荐

最新文章

热门文章