echarts之折线图配置（附带图例很多做成分页效果）
2024-10-12 20:31:17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ECharts-基本线性图及其配置要求</title>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="box" style="height:400px;width: 800px;padding: 20px"></div>
</div>
<script>
// 获取到这个DOM节点，然后初始化 var myChart = echarts.init(document.getElementById("box"));
var option = {
// 标题
title: {
text: '红包活动数据',
subtext: '数据来源：华秉科技-dancer'
},
tooltip: {
trigger: 'axis'
},
//图例名
legend: {
data:['参加活动人数','分享人数','关注人数','注册人数','领取红包人数']
},
grid: {
left: '3%', //图表距边框的距离
right: '4%',
bottom: '3%',
containLabel: true
},
//工具框，可以选择
toolbox: {
feature: {
saveAsImage: {}
}
},
//x轴信息样式
xAxis: {
type: 'category',
boundaryGap: false,
data: ['12-01','12-02','12-03','12-04','12-05','12-05','12-06','12-07','12-08','12-09','12-10','12-11','12-12','12-13'],
//坐标轴颜色
axisLine:{
lineStyle:{
color:'red'
}
},
//x轴文字旋转
axisLabel:{
rotate:30,
interval:0
},
}, yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} 人'
}
}
],
series: [
//虚线
{
name:'参加活动人数',
type:'line',
symbolSize:4, //拐点圆的大小
color:['red'], //折线条的颜色
data:[1000, 300, 500, 800, 300, 600,500,800, 300, 500, 800, 300, 600,500],
smooth:false, //关键点，为true是不支持虚线的，实线就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'虚线 'solid'实线
}
}
}
},
//实线
{
name:'分享人数',
type:'line',
symbol:'circle',
symbolSize:4,
itemStyle:{
normal:{
color:'red',
borderColor:'red' //拐点边框颜色
}
},
data:[220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
},
{
name:'关注人数',
type:'line',
// stack: '总量',
symbolSize:4,
color:['orange'],
smooth:false, //关键点，为true是不支持虚线的，实线就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'虚线 'solid'实线
}
}
},
data:[500, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410]
},
{
name:'注册人数',
type:'line',
symbolSize:4,
color:['blue'],
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'虚线 'solid'实线
}
}
},
data:[300, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410]
},
{
name:'领取红包人数',
type:'line',
color:['green'],
symbol:'circle',
symbolSize:4,
data:[310, 352, 280, 334, 373, 310, 340,300, 350, 280, 350, 340, 370, 310],
itemStyle:{
normal:{
color:'green',
borderColor:'green'
}
}
}
]
}; myChart.setOption(option);
</script>
</body>
</html>
附带：
附带1：http://echarts.baidu.com/examples/editor.html?c=pie-legend
附带2：http://echarts.baidu.com/examples/editor.html?c=radar2
最新文章
- Discuz!用户注册，登陆，生成帖子功能实现
- Linux下的文件与目录操作 BY 四喜三顺
- Rational Rose ：从用例图开始
- POJ 3176 简单DP
- spring AspectJ的Execution表达式
- iOS UIBezierPath知识介绍
- socket的简单通信
- hadoop2.0 和1.0的区别
- ACE首页更改
- vue上传图片 base64+canvas压缩图片
- Python数据分析学习（二）：Numpy数组对象基础
- 『PyTorch × TensorFlow』第十七弹_ResNet快速实现
- 在Postman中使用不受信任的SSL证书（转）
- sql储存过程in(多个参数)
- SpringMVC探究-----常用获取传递参数的方法
- PAT 甲级 1068 Find More Coins
- hdu 4994 前后有序Nim游戏
- Informatica 常用组件Lookup之四 查找组件
- nGrinder3.4 性能测试框架安装
- iOS app集成支付宝支付流程及后台php订单签名处理