Echarts 基础知识浅析
1. 引入Echarts
Echarts是基于canvas的数据可视化产品，由百度公司推出
参考官方文档，引入教程示例即可，注意有两种引入方式：
（1）直接引入
（2）模块化引入
2. 基本API使用
（1）设置整个图表的大小位置使用grid属性
grid: { 设置图标整体的大小
// x: '20%', x,y表示左上角的相对位置，
// y: 100,
// x2: 200, x2,y2表示右下角的相对位
// y2: 100,
width: '50%', 宽度设置
left: '30%', left设置
// containLabel: true
},
（2）坐标轴xAxis、yAxis
xAxis: {
show: true, 设置显示隐藏坐标轴
type: 'category', 设置坐标轴类型，共category，value，time三种类型
boundaryGap: true, 设置是否在图形开始处于y轴留有间距
// position:'top', 设置x轴的位置在顶端
axisLine: {
onZero: false, 设置x轴不以y轴的0点开始
lineStyle: { 设置 x轴的样式
color: 'red',
width: 2,
type: 'solid'
}
},
axisTick: {
show: true, 设置x轴上标点显示
length: 10, 设置x轴上标点显示长度
lineStyle: { 设置x轴上标点显示样式
color: 'red',
width: 2,
type: 'solid'
}
},
axisLabel: { 设置标点内容显示样式
show: true,
rotate: 45, 设置标点内容45度倾斜显示
margin: 30,
textStyle: {
color: 'blue',
fontFamily: '微软雅黑'
},
formatter: function(val) { 设置显示data中的内容，可以传函数val是data中元素
return val + '函数'
}
},
splitLine: { 设置x轴标点分割线样式
show: true,
lineStyle: {
color: 'skyblue',
type: 'dashed',
width: 1
}
},
splitArea: { 设置x轴标点分割区域样式
show: true,
},
name: '星期',
data: ['周一', '周二', { 可以将数据设置成对象，单独设置样式
value: '周三',
textStyle: {
color: 'red',
fontSize: 30,
fontWeight: 'bold'
}
}, '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
max: 20, 设置y轴的最大值
axisLabel: {
formatter: '{value} °C'
}
},
（3）数据显示series
① 折线显示
series: [{
name: '最低气温',
type: 'line', 设置数据显示为折线
symbol: 'image://https://www.baidu.com/img/bd_logo1.png',
设置折线上标记点的样式，可以引用图片，也可以写star
symbolSize: 30, 设置标记大小
showAllSymbol: true, 设置显示所有标记
smooth: true, 设置折线图平滑显示
legendHoverLink: false, 关闭选择不同折线图时的高亮效果
data: [1, -2, 2, 5, { 单独设置某个数据的样式
value: 3,
symbolSize: 50
}, 2, 0],
itemStyle: { 设置折线图的样式
normal: { 设置默认样式
color: 'black',
lineStyle: {
width: 3,
color: 'green'
},
areaStyle: { 设置折线图与坐标进行填充
color: 'yellow'
},
label: {
show: true,
position: 'bottom', 设置折线上标记数据在下方显示
textStyle: {
color: 'red'
}
}
},
emphasis: { 设置鼠标移动到数据上时的，强调显示效果
label: {
show: true,
position: 'top',
textStyle: {
color: 'gray'
}
}
}
}
}]
② 柱形图显示
dataZoom: { 开启数据图缩放功能
show: true
},
series: [{
name: '蒸发量',
type: 'bar',
barGap: '-50%', 设置相同标记位柱形图之间的相对位置
barCategoryGap: '20%', 设置不同标记位柱形图之间的位置
barWidth: 10, 设置柱形图的宽度
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: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
},
（4）title标题
title: {
text: '某地区蒸\n发量和降水量', \n表示换行
subtext: '纯属虚构', 副标题
x: 100, x,y表示标题的位置设置，可以为left等
y: 200
},
（5）legend图例
legend: {
data: [{ 可单独设置数据的样式，加入””空字符串可实现换行
name: '蒸发量',
icon:'image://https://www.baidu.com/img/bd_logo1.png', 替换图标
textStyle: {
color: 'green',
fontWeight:'bold'
}
}, '降水量'],
borderColor: 'red',
formatter:'{name}Echarts', 设置模板显示，也可以写函数
itemWidth: 20, 设置图例样式的宽
itemHeight: 20, 设置图例样式的高
selected:{'降水量':false},
textStyle:{color:'blue'} 设置图例文字的颜色
},
（6）数据拖拽显示条dataZoom
dataZoom: {
show: true,
realtime: false, 关闭实时变化功能
start: 40, 设置开始和结束的范围
end: 60,
zoomLock: true 开启锁定范围的功能
},
（7）数据显示提示框tooltip（可自定义formatter，多级显示）
tooltip: {
// trigger: 'axis',
trigger: 'item', 只当鼠标经过数据时显示
showContent: false, 关闭数据详细信息框
showDelay: 0, 关闭显示延迟
transitionDuration: 0, 关闭动画延迟效果
hideDelay:1000, 设置鼠标离开后延迟消失效果
axisPointer: { 设置背景提示样式，有cross、line、shadow三种
type: 'shadow',
lineStyle: { 设置line样式的具体内容
color: 'red'
},
crossStyle: {
color: 'green'
},
shadowStyle: {
color: 'rgba(150, 150, 150, 0.3)'
}
}
},
（8）饼图
{
name: '访问来源',
type: 'pie',
radius: ['40%', '55%'], 设置两个值，可变为环形图
// startAngle: 0, 设置起始角度
clockWise: false, 设置逆时针转动
data: [{
value: 335,
name: '直达'
}, {
value: 310,
name: '邮件营销'
}, {
value: 234,
name: '联盟广告'
}, {
value: 135,
name: '视频广告'
}, {
value: 1048,
name: '百度',
textStyle: {
align: 'left'
}
}, {
value: 251,
name: '谷歌'
}, {
value: 147,
name: '必应'
}, {
value: 102,
name: '其他'
}]
}
