echarts
官网：https://echarts.apache.org/zh/index.html
<html>
<head>
<title>echarts</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px; height:400px;"></div>
<script type="text/javascript">
var myChars=echarts.init(document.getElementById('main'))
var option={
title:{
text:'标题',
nameTextStyle: {
padding: [0, 0, 0, -10] // 四个数字分别为上右下左与原位置距离
},
textStyle:{
color:'#333',
fontStyle:'normal', //字体风格
fontSize:'18',
},
x:'center', // 设置标题居中
y:'top',
textAlign:'center',
subtext:'副标题', //副标题
subtextStyle:{
color:'#333',
fontStyle:'normal', //字体风格
fontSize:'12',
align:'center' //文字对齐方式，默认自动，有left，center，right
},
textAlign:'auto',
//整体（包括 text 和 subtext）的水平对齐。可选值：'auto'、'left'、'right'、'center'。
itemGap:'10', // 主副标题之间的间距。
},
//*************************************
legend:{
type:'plain'
// plain 普通图例, scroll可翻滚翻页的图例，当图例数量较多时可以使用。
data:[{
name:'图例1',
textStyle:{color:'red'}
}]
},
//*************************************
xAxis:{
type：'category'
// value 数值轴，适用于连续数据。 category 类目轴，适用于离散的类目数据
// time 时间轴， log 对数轴。适用于对数数据。
name:'手机品牌 ', // 坐标轴名称
nameLocation:'end' // 坐标轴名称显示位置。
// start center end
nameTextStyle:{ //坐标轴名称的文字样式。
color：'',
fontSize:12,
align:'', //文字水平对齐方式，默认自动。left,center,right
},
nameGap:15, //坐标轴名称与轴线之间的距离。
nameRotate：'', // 坐标轴名字旋转，角度值。
min:'', // 坐标轴刻度最小值。
max:'', // 坐标轴刻度大值。
logBase:10, // 对数轴的底数，只在对数轴中（type: 'log'）有效。
axisTick:{ //坐标轴刻度相关设置
alignWithLabel:'true',
//类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
interval:'0', // 设置成 0 强制显示所有标签。
length:5, // 坐标轴刻度的长度。
},
axisLabel:{ //坐标轴刻度标签的相关设置。
interval:0, // 设置成 0 强制显示所有标签。
rotate:90, // 刻度标签旋转的角度
margin:8, // 刻度标签与轴线之间的距离
fontSize:12, // 文字的字体大小。
},
}
yAxis:{}
series:{}
}
</script>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>Echarts</title>
<script src="/static/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '城市出租率',
align:'center',
textStyle:{color:'red',fontWeight:'400'},
subtext:'出租率前十的城市',
subtextStyle:{color:'black'},
x:'center', // 设置标题居中
y:'top',
textAlign:'center'
},
tooltip: {},
legend: {
data:['招聘数量']
},
xAxis: {
name:'出租率',
data: {{ x|tojson }},
type:'category',
axisLabel:{interval :'0',rotate:'0',fontSize:'9'},
//interval:0, // 设置成 0 强制显示所有标签。
// rotate:'0'刻度标签旋转的角度
axisTick:{alignWithLabel:'True',length:'5'}
//类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
//length:5, 坐标轴刻度的长度。
},
yAxis: {
name:'城市名称',
//nameLocation:'center',
nameGap:'35' //坐标轴名称与轴线之间的距离。
},
series: [{
name: '出租率',
type: 'bar',
data:{{ y }}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
<head>
<meta charset="UTF-8">
<title>Echarts</title>
<script src="/static/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '全国各地酒店的出租率',
textStyle:{color:'red',fontWeight:'400'},
// fontWeight:'400'字体加粗
subtext:'7 天酒店的出租率',
subtextStyle:{color:'black'},
x:'center', // 设置标题居中
y:'top',
textAlign:'center'
},
tooltip: {},
legend: {
align:'right',
//data:['招聘数量']
right:'10%' //图例的位置
},
xAxis: {
name:'地区名称',
data: {{ x|tojson }},
type:'category',
axisLabel:{interval :'0',rotate:'0',fontSize:'13'},
axisTick:{alignWithLabel:'True',length:'1'},
boundaryGap: false,
// 类目轴中 boundaryGap 可以配置为 true 和 false。
//默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
// 非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，
// 别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。
},
yAxis: {
name:'出租率',
//nameLocation:'center',
nameGap:'15'
},
series: [{
name: '出租率',
type: 'line',
data:{{ y }}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('main'))
var option={
title:{
text:'名称',
textStyle:{
color:'red',
fontSize:18
},
subtext:'副标题',
subtextStyle: {
color:'red',
fontSize:12,
align:'center',//left right center
},
textAlign:'left',// auto left right center
itemGap:10, // 主副标题之间的间距
x:'center', // 设置标题居中
y:'top',
},
tooltip:{},
lengend:{}, //图例
xAxis:{
name:'X轴坐标轴名称',
data:['a','b','c','d','e'], //{{x|safe}}, // 后端传来的数据数据
type:'category', //类目
axisLabel:{ interval:'0', rotate:'0' , fontSize:'9' }, // 坐标轴标签
// interval 间隔
// rotate 旋转
axisTick:{ alignWithLabel:'True',length:'5' }, // 坐标轴刻度
//boundaryGap: false,
// 类目轴中 boundaryGap 可以配置为 true 和 false。
//默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
// 非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，
// 别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。
nameTextStyle: {
padding: [0, 0, 0, -10] // 四个数字分别为上右下左与原位置距离
},
},
yAxis:{
name:'Y轴坐标',
nameGap:'15', //坐标轴名称与轴线之间的距离。
max:'7',
min:'0'
},
series:[{
name:"Y轴坐标",
type:'bar',
data:[1,2,3,4,5],
}]
};
myChart.setOption(option);
</script>
</body>
</html>
扫一扫
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
