Echarts(自己整理的一些散点图、饼图、条形图、散点图的基本配置参数)

1.引人echarts.js

<script src="echarts.min.js"></script>

2. 为 ECharts 准备一个具备大小（宽高）的 DOM(文档对象模型)

<div id="main" style="width: 600px;height:400px;"></div>

3.条形图的一些配置参数：

'''1. 设置图表的标题'''
title: {text: '这是图表的标题文字'
}
'''2. 鼠标放在图标上面的显示信息,不设置的话就是true'''
tooltip: {show: true}
'''3. 设置图例'''
legend: {data:['图例文字']
}
'''4. 设置x轴的数据'''
xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
'''5. 设置y轴的数据'''
xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
'''6. 设置画图的类型'''
series: [{name: '鼠标放在图上面的提示文字',type: 'bar',  // 以及画图的类型data: [画图的数据]
}]
'''7.设置背景色，因为是全局的，所以直接在 option 下设置'''
//可以通过颜色的英文设置
backgroundColor:'red'
'''也可以通过#的方式设置'''
backgroundColor:'#ffffff'
'''8. 设置图表中所有文本的颜色'''
'''四个参数分别为RGB的三个颜色以及一个透明度alpha,如果不行设置透明度的话，直接把rgba中的a去掉然后分别再括号里写上RGB对应的三个参数值'''
textStyle: {color: 'rgba(255, 0, 255,0.8)'
},
'''9. 设置loading动画  数据加载时，需要时间等待，则可以加上这个动画效果'''、
'''启动动画'''
myChart.showLoading();
'''关闭动画'''
myChart.hideLoading();
'''10. 坐标轴触发，主要在柱状图'''
tooltip : {trigger: 'axis'
}
'''11. 相关工具栏的设置'''
toolbox: {'''是否显示工具栏'''show : true,'''显示的工具栏是垂直的还是水平的，默认是水平的'''orient : 'vertical','''工具栏图标的大小，默认是15'''itemSize:20,'''工具栏图标之间的距离，默认是10'''itemGap:15,'''各工具配置项'''feature : {'''展现当前图表所用的数据，编辑后可以动态更新，设置显示该工具，只读设置为false'''dataView : {show: true, readOnly: false},'''动态类型切换,显示该工具，可以添加的类型为，line, bar, stack, tiled'''magicType : {show: true, type: ['line', 'bar']},'''配置项还原工具，设置显示'''restore : {show: true},'''设置是否可以保存图片'''saveAsImage : {show: true}}
}
'''12. '''
xAxis : [{
'''类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据.还有'value' 数值轴，适用于连续数据,有'time' 时间轴等等'''type : 'category',name : '这是x轴的名称','''设置x轴名称的的位置，餐厨有('start','center','end')'''nameLocation : 'center','''设置x轴名称与x轴的距离，默认是15'''nameGap:28,'''设置x轴的名称旋转的度数'''nameRotate:10,'''设置x轴的是否是反向坐标轴，默认就是false'''inverse:false,'''设置x轴的字体样式'''nameTextStyle : {'''设置字体颜色'''color:'rgb(238,99,99)','''设置坐标轴名称文字字体的粗细'''fontWeight:'bold','''设置字体的大小'''fontSize:17},data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}
],
'''13. '''
series : [{name:'蒸发量',type:'bar',data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],'''图表标注'''markPoint : {'''标注的数据数组'''data : ['''type:特殊的标注类型，用于标注最大值最小值等,name为标注名称'''{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},markLine : {'''图表标线'''data : [{type : 'average', name: '平均值'}]}},{name:'降水量',type:'bar',data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,2.3],markPoint : {data : [{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}]},markLine : {data : [{type : 'average', name : '平均值'}]}},

颜色RGB对照大全

Echarts里面内置了两个属性，'light'和'drak'

4. 饼图的配置参数：

'''1. 设置饼图的大小'''
radius: '60%',
'''2. 是否通过设置 roseType 显示成南丁格尔图。南丁格尔图会通过半径表示数据的大小。'''
roseType: 'angle'
'''3. 设置标签的视觉引导线的颜色'''
labelLine: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'}
}
'''4. 设置扇形的颜色'''
itemStyle: {// 设置扇形的颜色color: '#c23531',//阴影shadowBlur: 200,//阴影颜色shadowColor: 'rgba(0, 0, 0, 0.5)'
}
''' 5. 设置每个扇形的颜色'''
data: [{ // 第一个扇形的大小value:400,  name:'第一个标签文本',// 设置样式itemStyle: {color: '#c23531'}},{ // 第二个扇形的大小value:600,  name:'第二个标签文本',itemStyle: {color: '#c23531'}}...]
'''6. 鼠标放在图上的高亮显示'''
emphasis: {itemStyle: {// 高亮时点的颜色。color: 'blue'},label: {// 是否显示，默认就是True，show: true,formatter: '高亮时标签的文字。'}
}
'''7. series'''
(1)series-pie.center  :  饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。例如：  center: ['50%', '50%']

<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));myChart.setOption({series : [{name: '访问来源',type: 'pie',radius: '60%',data:[{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}]}]})
</script>

5. 折线图的配置参数

"""有关折线图的setOption的参数"""
'''1. 工具栏的相关设置'''
toolbox: {show: true,feature: {'''数据区域缩放'''dataZoom: {'''指定哪些 yAxis 被控制。如果缺省(none)则控制所有的y轴'''yAxisIndex: 'none'},'''数据视图，即工具栏中的数据视图的相关配置'''dataView: {readOnly: false},magicType: {type: ['line', 'bar']},restore: {},saveAsImage: {}}
'''2. x轴的相关设置'''xAxis:  {type: 'category','''设置坐标的点是否与x轴的标签对齐，false为对齐，true为不对齐'''boundaryGap: false,data: ['周一','周二','周三','周四','周五','周六','周日']},
'''3. y轴的相关设置'''
yAxis: {type: 'value','''坐标轴刻度标签的相关设置'''axisLabel: {'''刻度标签的内容格式器，支持字符串模板和回调函数两种形式。'''formatter: '{value} °C'}},
'''4. 系列列表。每个系列通过 type 决定自己的图表类型'''
series: [///第一个线{name:'最高气温',type:'line',data:[11, 11, 15, 13, 12, 13, 10],markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},//图表标注线markLine: {data: [{type: 'average', name: '平均值'}]}},

//第二个线{name:'最低气温',type:'line',data:[1, -2, 2, 5, 3, 2, 0],markPoint: {data: ['''valueL:设置值，xAxis:标注值的x轴位置，yAxis:标注的y轴设置'''{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}]},markLine: {data: [//第一个标注线{type: 'average', name: '平均值'},[//第二个标注线文本{symbol: 'none','''标注相对容器的屏幕 x 坐标'''x: '90%',yAxis: 'max'}, // 第二个标注线{symbol: 'circle','''标线的文本位置和值的相关设置'''label: {'''设置标线文本的位置，start\middle\end''''position: 'start','''标签内容格式器，支持字符串模板和回调函数两种形式'''formatter: '最大值'}},type: 'max',name: '最高点'}]]}}]

6. 散点图的配置参数

'''1. 直角坐标系内绘制网格，'''
grid: {show:true,'''网格距离容器左边的百分比'''left: '5%','''距离右边的'''right: '7%','''距离底部的百分比'''bottom: '3%',//网格的区域是否包含坐标轴的标签containLabel: true
},
'''2. 数据项的设置，即鼠标放在点上的提示内容'''
tooltip : {''' function(params) 回调函数的格式 '''formatter : function (params) {'''seriesName 系列名称value  传入的数据值'''if (params.value.length > 1) {return params.seriesName + ' :<br/>'+ params.value[0] + 'cm '+ params.value[1] + 'kg ';}else {return params.seriesName + ' :<br/>'+ params.name + ' : '+ params.value + 'kg ';}},axisPointer:{show: true,'''十字准星指示器'''type : 'cross',lineStyle: {'''线的类型'''type : 'solid'}}
'''3. 散点图的工具栏的相关设置 '''
toolbox: {feature: {'''数据区域缩放。'''dataZoom: {},brush: {'''使用的按钮，rect:开启矩形框选择功能polygon:开启任意形状选择功能clear: 清空所有选框'''type: ['rect', 'polygon', 'clear']}}
},
'''4. x轴的相关设置'''
xAxis : [{type : 'value','''是否脱离0刻度，设置成 true 后坐标刻度不会强制包含零刻'''scale:true,axisLabel : {formatter: '{value} cm'},'''坐标轴在 grid 区域中的分隔线。'''splitLine: {'''是否显示分隔线，默认会显示'''show: false}}
],
'''5. series.markArea    图标的标域 常用于标记图表中某个范围的数据'''
markArea: {'''默认为 false，即响应和触发鼠标事件。'''silent: true,'''该标域的样式。'''itemStyle: {''' 设置标域为透明(transparent)，或者rgb(c,c,c)形式'''color: 'transparent','''描边线宽，为0时无描边'''borderWidth: 1,'''描边类型： 默认为实线(solid)。/dashed/dotted'''borderType: 'dashed'},'''标域的数据数组''''''分别有标域的左上角的坐标数据以及右下角的数据'''data: [[{name: '女性分布区间',xAxis: 'min',yAxis: 'min'}, {xAxis: 'max',yAxis: 'max'}]]
},

Echarts(自己整理的一些散点图、饼图、条形图、散点图的基本配置参数)相关推荐

Pyecharts：pyecharts(图文+代码)实战(柱状图/条形图/散点图、漏斗图、仪表盘、折线/面积图、水球图、地图、平行坐标系、饼图、极坐标系、雷达图、词云图)之绘制各种吊炸天的图表
Pyecharts:pyecharts(图文+代码)实战(柱状图/条形图/散点图.漏斗图.仪表盘.折线/面积图.水球图.地图.平行坐标系.饼图.极坐标系.雷达图.词云图)之绘制各种吊炸天的图表目录 ...
ECharts 常用图表一看即会「散点图」「饼图」「地图」「雷达图」「仪表盘」
文接上篇 ECharts 入门知识 ECharts 入门真的很简单 ,本文继续介绍 ECharts 常用图表相关内容. 一.散点图散点图多用于推断不同维度数据之间的相关性,如下图判断身高体重相关性散 ...
地图图表、柱状图、条形图、折线图、中国地图、世界地图、省市地图、仪表盘、雷达图、饼图、散点图、气泡图、瀑布图、堆叠图、热力图、桑基图、关系图、漏斗图、Axure原型、rp原型、产品原型
地图图表.柱状图.条形图.折线图.中国地图.世界地图.省市地图.仪表盘.雷达图.饼图.散点图.瀑布图.气泡图.堆叠图.热力图.桑基图.关系图.漏斗图.Axure原型.rp原型.产品原型.大屏设计必备组 ...
可视化框架、Axure原型、大屏可视化、图表组件、图表元件库、统计图表、数据可视化模板、条形图、折线图、散点图、时间轴、仪表盘、饼图、散点图、雷达图、高山图、登录模板、弹窗、弹幕、预警、散点图
可视化框架.数据可视化综合管理平台.大屏可视化.图表组件.图表元件库.统计图表.数据可视化模板.条形图.折线图.散点图.时间轴.仪表盘.饼图.散点图.雷达图.高山图.登录模板.弹窗.弹幕.预警.散点图 ...
画图参数cex，font，mgp，mar，adj，xlim，ylim，main应用、散点图、条形图、饼图、箱线图、qq图
画图参数cex,font,mgp,mar,adj,xlim,ylim,main应用 cex_type=c(0.7,0.8,0.9,1,2,3,4,5,6,7) plot(X,Y,col=" ...
matplotlib绘制直方图，饼图，散点图，气泡图，箱型图，雷达图
matplotlib绘制直方图,饼图,散点图,气泡图,箱型图,雷达图一.直方图用10000个正态分布随机数画直方图二.绘制饼图或者圆环图圆环图根据消费支出画圆环图三.绘制散点图或气泡图使 ...
pyecharts-动态可视化（4）日历表 / k线图 /饼图组合 /散点图组合
pyecharts中日程表/ k线图 /饼图组合 /散点图组合,代码可以直接运行在制作图表所需用到的代码均做了注释,用的V1版本.非常的小白,非常的友好!! 超级详细的注释,还有动图呢! 日历表导 ...
【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置（已解决附源码）
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...
JFreeChart（六）之3D饼图/条形图
转载自 JFreeChart 3D饼图/条形图三维/3D图表是那些显示在一个三维格式.可以使用这些图表来提供更好的显示效果和清晰的信息.三维/3D饼图是饼图另外一个不错的3D效果. 3D效果可以 ...

Echarts(自己整理的一些散点图、饼图、条形图、散点图的基本配置参数)

Echarts(自己整理的一些散点图、饼图、条形图、散点图的基本配置参数)相关推荐

最新文章

热门文章