本文详细介绍了ECharts图表库的各种配置项及其用法，包括标题、提示框、网格、图例等基本配置，以及数据缩放、工具箱等功能的高级配置。
对echart中的一些属性设置的认识
下面的代码是个人的一个理解，如有错误还大家提出，谢谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echart属性</title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="mychart" style="height:400px;"></div>
<script>
// 先以折线图为例
var myChart1 = echarts.init(document.getElementById('mychart'));
option1 = {
title: {
text: '我是折线图', //标题
subtext: '我来自福建',//副标题
x:'left', //可设置标题的位置，有left,center,right三个
textStyle: {
color: 'red', //设置标题的颜色
fontSize:'18' //设置标题的字体大小
}
},
tooltip : {
trigger: 'axis', //默认是item,是当鼠标移动到图表上时显示当前节点的信息，如果为axis是显示已这个横坐标范围内的所有节点的信息
axisPointer: {
type: 'cross',// 设置鼠标移动到当前节点的会有虚线标识这个节点的横坐标和纵坐标，还有一个是shadow，显示的当前横坐标范围内的所有节点信息
label: {
backgroundColor: 'red'//设置当前节点的横坐标与纵坐标的背景颜色，突出当前节点的坐标
}
}
},
grid: { //设置图标距离四周的距离
x:50,
y:80,
x2:60,
y2: 70,
containLabel: true
},
legend: {
data:['折线一','折线二','折线三','折线四','折线五'], //这个里面的每一个都自懂绑定series中对应的name的信息，这个是可以用来进行切换是否显示这个信息
x: 'center', //用来设定这些图例的位置，有left,center,right
textStyle: {
//color: 'red', //设置legend的颜色
fontSize:'18' //设置legend的字体大小
}
},
dataZoom: [ //可实现底下多个滚动条，然后可左右滑动
{
show: true, //是否显示滚动条
realtime: true,
start:0, //滚动条的起点位置
end: 80, //滚动条的终止位置
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', // 修改默认的滑块样式
handleSize: '50%', //修改挂快的半径
handleStyle: {
color: '#fff', //修改滑块的颜色
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2, // x轴向右偏移的阴影
shadowOffsetY: 2 // y轴向下偏移的阴影
},
bottom:'0%',
height: '40'
}
],
toolbox: {
left:'right', //设置先出图标操作的图标位置
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis : [
{
type : 'category',
boundaryGap : false,//图标的左边是否留白，false不留白，true留白
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
name : '高度(ml)',//设置左上角的单位指标
axisLabel: {
formatter: '{value}ml' //设置y轴坐标的单位
},
}
],
//label的属性可2放在外面也可以放在里面的series对应的内一个选项里面进行设置
label:{ //修改每个柱子所对应的数据
normal:{
show: true, //设置数据是否显示
position:'inside',//设置显示在位置，有inside,outside,top,bottom,
textStyle: {
fontSize: 15//设置字体大小
// color:'red'//设置柱子上面数据的颜色
}
}
},
series : [
{
name:'折线一',
type:'line',
stack: '总量',
areaStyle: {
normal: {
color:'red'//设置填充颜色
}
},
label: {
normal: {
show: true,
position:'top',//设置显示在内还是在外
textStyle: {
fontSize: 15,//设置字体大小
color:'red'//设置柱子上面数据的颜色
}
}
},
itemStyle : { //设置折线的颜色
normal : {
lineStyle:{
color:'red'
}
}
},
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'折线二',
type:'line',
stack: '总量',
areaStyle: {
normal: {
color:'pink'
}
},
label: {
normal: {
show: true,
position:'top',//设置显示在内还是在外
textStyle: {
fontSize: 15,//设置字体大小
color:'red'//设置柱子上面数据的颜色
}
}
},
itemStyle : { //设置折线的颜色
normal : {
lineStyle:{
color:'red'
}
}
},
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'折线三',
type:'line',
stack: '总量',
areaStyle: {
normal: {
color:'yellow'
}
},
label: {
normal: {
show: true,
position:'top',//设置显示在内还是在外
textStyle: {
fontSize: 15,//设置字体大小
color:'red'//设置柱子上面数据的颜色
}
}
},
itemStyle : { //设置折线的颜色
normal : {
lineStyle:{
color:'red'
}
}
},
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'折线四',
type:'line',
stack: '总量',
areaStyle: {
normal: {
color:'blue'
}
},
label: {
normal: {
show: true,
position:'top',//设置显示在内还是在外
textStyle: {
fontSize: 15,//设置字体大小
color:'red'//设置柱子上面数据的颜色
}
}
},
itemStyle : { //设置折线的颜色
normal : {
lineStyle:{
color:'red'
}
}
},
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'折线五',
type:'line',
stack: '总量',
areaStyle: { //设置填充颜色
normal: {
color:'orange'
}
},
label: {
normal: {
show: true,
position:'top',//设置显示在内还是在外
textStyle: {
fontSize: 15,//设置字体大小
color:'red'//设置柱子上面数据的颜色
}
}
},
itemStyle : { //设置折线的颜色
normal : {
lineStyle:{
color:'red'
}
}
},
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
// 加载数据
myChart1.setOption(option1);
</script>
</body>
</html>
以上是个人对echart的初步认识，如果错误还请大家指点一下。
扫一扫
4821
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
