echarts 饼状图展示位置 legend
1、标题设置
title: {text: '学生生源地来源分布图',subtext: '模拟数据',// x 设置水平安放位置,默认左对齐,可选值:'center' ¦ 'left' ¦ 'right' ¦ {number}(x坐标,单位px)x: 'center',// y 设置垂直安放位置,默认全图顶端,可选值:'top' ¦ 'bottom' ¦ 'center' ¦ {number}(y坐标,单位px)y: 'top',// itemGap设置主副标题纵向间隔,单位px,默认为10,itemGap: 30,backgroundColor: '#EEE',// 主标题文本样式设置textStyle: {fontSize: 26,fontWeight: 'bolder',color: '#000080'},// 副标题文本样式设置subtextStyle: {fontSize: 18,color: '#8B2323'}},
2、图例设置
legend: {// orient 设置布局方式,默认水平布局,可选值:'horizontal'(水平) ¦ 'vertical'(垂直)orient: 'vertical',// x 设置水平安放位置,默认全图居中,可选值:'center' ¦ 'left' ¦ 'right' ¦ {number}(x坐标,单位px)x: 'left',// y 设置垂直安放位置,默认全图顶端,可选值:'top' ¦ 'bottom' ¦ 'center' ¦ {number}(y坐标,单位px)y: 'center',itemWidth: 24, // 设置图例图形的宽itemHeight: 18, // 设置图例图形的高textStyle: {color: '#666' // 图例文字颜色},// itemGap设置各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔itemGap: 30,backgroundColor: '#eee', // 设置整个图例区域背景颜色data: ['北京','上海','广州','深圳','郑州']},
3、值域设置
series: [{name: '生源地',type: 'pie',// radius: '50%', // 设置饼状图大小,100%时,最大直径=整个图形的min(宽,高)radius: ['30%', '60%'], // 设置环形饼状图, 第一个百分数设置内圈大小,第二个百分数设置外圈大小center: ['50%', '50%'], // 设置饼状图位置,第一个百分数调水平位置,第二个百分数调垂直位置data: [{value:335, name:'北京'},{value:310, name:'上海'},{value:234, name:'广州'},{value:135, name:'深圳'},{value:148, name:'郑州'}],// itemStyle 设置饼状图扇形区域样式itemStyle: {// emphasis:英文意思是 强调;着重;(轮廓、图形等的)鲜明;突出,重读// emphasis:设置鼠标放到哪一块扇形上面的时候,扇形样式、阴影emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(30, 144, 255,0.5)'}},// 设置值域的那指向线labelLine: {normal: {show: false // show设置线是否显示,默认为true,可选值:true ¦ false}},// 设置值域的标签label: {normal: {position: 'inner', // 设置标签位置,默认在饼状图外 可选值:'outer' ¦ 'inner(饼状图上)'// formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ,默认显示{b}// {a}指series.name {b}指series.data的name// {c}指series.data的value {d}%指这一部分占总数的百分比formatter: '{c}'}}}],
4、提示框设置
tooltip: {// trigger 设置触发类型,默认数据触发,可选值:'item' ¦ 'axis'trigger: 'item',showDelay: 20, // 显示延迟,添加显示延迟可以避免频繁切换,单位mshideDelay: 20, // 隐藏延迟,单位msbackgroundColor: 'rgba(255,0,0,0.7)', // 提示框背景颜色textStyle: {fontSize: '16px',color: '#000' // 设置文本颜色 默认#FFF},// formatter设置提示框显示内容// {a}指series.name {b}指series.data的name// {c}指series.data的value {d}%指这一部分占总数的百分比formatter: '{a} <br/>{b} : {c}个 ({d}%)'},
图中设置
/* 饼状图 */var chartDomCake = document.getElementById('main-cake');var myChartCake = echarts.init(chartDomCake);var optionCake;var dataCake=[{ value: 2562, name: '25岁以下',percentage:'15.86%' },{ value: 6000, name: '26-35岁',percentage:'37.15%' },{ value: 2589, name: '36-45岁',percentage:'16.03%' },{ value: 4000, name: '45岁以上',percentage:'24.77%' },{ value: 1000, name: '其他',percentage:'6.19%' }]optionCake = {title: {text: '',subtext: '',left: 'center'},tooltip: {trigger: 'item',formatter: "{b} : {c} 人 ({d}%)" //鼠标放上去 展示内容},legend: {orient: 'vertical',left: '60%', //图例距离左的距离top:'18%',// y: 'center', //图例上下居中itemGap: 20,formatter:function(name){let target,percentage;for(let i=0;i<dataCake.length;i++){if(dataCake[i].name===name){target=dataCake[i].valuepercentage=dataCake[i].percentage}}let arr=[name+' '," "+target+"人 "," "+percentage]return arr.join(" ")},},color: ['#e3935d', '#eecb5f', '#61a5e8','#e16757', '#9570e4'],//五个数据,五个颜色series: [{name: '年龄分布',type: 'pie',radius: '55%',center: ['35%', '35%'], //性设置图的上下左右的位置data:dataCake,// 设置值域的标签label: {normal: {position: 'inner', // 设置标签位置,默认在饼状图外 可选值:'outer' ¦ 'inner(饼状图上)'// formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ,默认显示{b}// {a}指series.name {b}指series.data的name// {c}指series.data的value {d}%指这一部分占总数的百分比formatter: '{b}'}},emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};optionCake && myChartCake.setOption(optionCake);
echarts 饼状图展示位置 legend相关推荐
- ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比 简单的实现可以参考: export default {data() {return {}},mounte ...
- echars ajax 饼状图,echarts饼状图实现方法
当前位置:我的异常网» Web前端 » echarts饼状图实现方法 echarts饼状图实现方法 www.myexceptions.net 网友分享于:2015-09-27 浏览:0次 echa ...
- echarts饼状图的使用
echarts饼状图的使用 地址:https://echarts.apache.org/zh/index.html 第一步: 通过 npm 获取 echarts, npm install echart ...
- 去掉Echarts饼状图的引导线
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>五分钟 ...
- echarts 饼状图 (数据为0或很小的扇形显示问题、扇形间隔)
series: [{name: '概况',type: 'pie',label:{formatter: '{b}({d}%)',color:'#555555'},radius: ['30%', '50% ...
- echarts饼状图引导线加圆点
实现echarts饼状图引导线加圆点实现思路: 1.首先我们在series里设置三个饼状图,设置共有的数据来防止页面交互显示错位问题 设置minAngle 最小区域扇面角度防止多个数据为0时候引导线会 ...
- echarts饼状图设置label的交互效果,饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
- vue+elementui+echarts饼状图内部显示百分比
<!--饼状图--><div id="main" style="width: 400px;height: 350px;"></di ...
- Echarts饼状图视觉引导线设置
如何设置饼状图引导线位置 我们在使用Echarts绘制饼状图时,经常需要确定引导线位置,官网给出的示例并未明确哪些属性决定了引导方式及位置,例如: 如下外部引导线方式: 有内部引导线方式 如何设置这两 ...
- echarts 饼状图
实现效果 难题1 中间换行 \n 解决方法formatter:"{a}\n{c}" 难题2 中间设置不同的样式 解决方法 emphasis: {label: {formatter: ...
最新文章
- java导入excle表格,并且对表格进行相应的修改,并对表格数据进行整理,最后导出本地表格等一系列...
- 故障排错-解决迅雷播放器在Windows 10中长时间停止响应
- iOS之widget开发(Today Extension)
- my sql Group_concat函数
- [数据结构] 二叉树基础
- __declspec(novtable) 的用法
- 《小强升职记》读后感和思维导图
- HTML的基本知识(六)——表格的基本属性之实现个人简历
- 在Struts2中实现登陆后跳转到登录前页面
- 《Python核心编程》18.多线程编程(二)
- 计算机专业职业生涯规划书结束语,职业生涯规划书结束语
- 字节跳动常见算法面试题top50整理
- 微信公众号推送的模板消息无法跳转到小程序指定页面?
- javascript顺序点击文字验证
- 职业规划-自动化测试
- php rewind函数,函数rewind的作用是什么
- 【Axure原型图】——动态面板
- 论文翻译:2020_TinyLSTMs: Efficient Neural Speech Enhancement for Hearing Aids
- C语言教程(三):基础知识(续)
- MATLAB如何保存高质量大图
热门文章
- VMware安装统信UOS
- 对比无源蜂鸣器和有源蜂鸣器
- Windows 10 21H2 版本微软拼音全拼和双拼的快速切换
- labjs 分析转载
- Sqlite 对数据进行增删改查
- 计算机网络蠕虫病毒及防范,蠕虫病毒检测与防范本科毕业论文.doc
- 1gb.ru php,美国免费空间0fees.net月流量10GB和50Webs空间500MB可绑域名_免费静态空间 | 微站中国|MicroHost...
- 郴州:安仁消防工作纳入智慧城市顶层设计
- 智慧城市顶层设计跨界思维指导方案(ppt)
- Netlog的数据库及LAMP架构