Echarts饼状图属性设置大全
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}'}}}],
radius: '50%', 的时候:
radius: ['30%', '60%'], 的时候:
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}%)'},
5、默认色板
color: ['#7EC0EE', '#FF9F7F', '#FFD700', '#C9C9C9', '#E066FF', '#C0FF3E']
6、整个图形背景颜色设置
backgroundColor: 'pink',
或是直接给Echarts所在的DOM元素设置背景颜色也可以。
注意:如何两种方式都设置的有,backgroundColor: 'pink', 生效
转载自:https://blog.csdn.net/sleepwalker_1992/article/details/82532210
Echarts饼状图属性设置大全相关推荐
- chartcontrol饼状图属性设置_温故而知新,ggplot2 饼图的几点笔记
其实 ggplot2 并没有类似于 geom_pie() 这样的函数实现饼图的绘制,它是由 geom_bar() 柱状图经过 coord_polar() 极坐标弯曲从而得到的. 对于为什么 ggp ...
- echars水状_Echarts饼状图属性设置
标题 title: { text: '学生生源地来源分布图', subtext: '模拟数据', // x 设置水平安放位置,默认左对齐,可选值:'center' ¦ 'left' ¦ 'right' ...
- echarts制作饼状图如何设置不同类别之间有一定间隔?
解决echarts饼状图不同类之间有一定间隔 用echarts制作饼状图时,为了有利于区分不同类别,一般通过设置不同的颜色代表不同的类别即可,但为了进一步体现不同类别之间的区分,可通过设置不同类别之间 ...
- Echarts饼状图设置
最近公司在做一个PC端的项目,其中有一个统计的页面,说是统计其实就是几个图表放上去好看的,因为数据需要甲方传过来太麻烦,甲方也不会弄这玩意,所以我随便在官网找了几个demo放上去了.但是其中的一个饼状 ...
- Echarts折线图属性设置大全
Echarts折线图属性设置大全 var option = {backgroundColor: '#FFF0F5',title: {text: '折线图',subtext: '模拟数据',x: 'ce ...
- echarts切换折线图变大_Echarts折线图属性设置大全
Echarts折线图属性设置大全 var option = { backgroundColor: '#FFF0F5', title: { text: '折线图', subtext: '模拟数据', x ...
- echarts饼状图设置label的交互效果,饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
- ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比 简单的实现可以参考: export default {data() {return {}},mounte ...
- 去掉Echarts饼状图的引导线
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>五分钟 ...
最新文章
- 页面导航的两种方式——声明式导航、编程式导航||vue-router编程式导航||router.push() 方法的参数规则
- Python多任务(2.线程的概念以及组成(创建线程的两种方式))
- c++动态内存管理题目
- 软件测试开发实战| Java版本,Gson解析json比较常用的2种方式
- 将html代码部署到阿里云服务器,并进行域名解析,以及在部署过程中遇到的问题和解决方法
- 没事学学docker:解决dockerfile出现的Error: Failed to download metadata for repo ‘appstream‘: Cannot prepar
- jieba的一些使用
- 用linux装逼-w3m
- LCD和LED屏幕的工作原理总结
- Groovy+Spock单元测试
- www.skymaya.com:8080/index.php,www_skymaya_com
- 如何判断自己的IP是否为公网IP?
- Windows系统上的软件(如:爱奇艺万能播放器)固定任务栏图标后,打开后出现新任务栏图标
- linux connect自动重连,Linux 北大网关断网重连
- Java基础(一) 八大基本数据类型
- Java实现文件批量导入导出实例(兼容xls,xlsx)
- 【Jpeg】不同平台如何编译 jpeg-turbo 库文件
- showdoc安装部署
- iPad 2 5.0.1系统完美越狱附个人问题汇总及解决办法
- C语言学习专栏(1):易忘点
热门文章
- js实现根据身份证号自动生成出生日期
- Python3二分查找库函数bisect(), bisect_left()和bisect_right()介绍
- 小白学 Python 爬虫(28):自动化测试框架 Selenium 从入门到放弃(下)
- (基于Python的毕业设计)微博舆情分析系统(附源码+论文)
- 用好DataV可视化大屏,紧抓商机,为“云供应链”做精细运营
- 解决华为系列手机Log显示不全
- flash上传头像插件使用说明
- linux route输出分析,Traceroute原理分析
- 南开大学,布局深圳!
- [.ashx檔?泛型处理程序?]基础入门#5....ADO.NET 与 将DB里面的二进制图片还原 (范例下载 大型控件的ImageField)...