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'
}]]
},