echarts之折线图配置（附带图例很多做成分页效果）
<!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
echarts之折线图配置（附带图例很多做成分页效果）的更多相关文章
- ECharts使用—折线图动态加载
最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...
- echarts折现图配置
js引用和div容器 <div id="container" style="height: 100%"></div> <scrip ...
- Echarts line折线图使用(vue)
实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...
- echarts自定义折线图横坐标时间间隔踩坑总结
折线图需求:横坐标为时间,要求按一定间隔展示,鼠标移至折线上间隔时间内的数据也可展示 其实很简单的一个配置就可搞定,但在不熟悉echarts配置的情况下,就很懵逼 xAxis: { boundaryG ...
- ECharts绘制折线图
首先看实现好的页面 实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require ...
- echarts版本折线图
1.效果如下: 绘制折线图,应该算是说echarts中使用最简单也算使用频率最高的一种功能了吧.根据官网列子能找出规律,只是有些属性对于初接触者来说,会有点陌生,不过仔细阅读一下还是不 ...
- 移动端引用echarts的折线图
移动端写一个图表引用echarts,highcharts插件,本次要找一个能够显示最新数据的折线图,最后只找到显示最大值: 找到echarts的实例:记一下个各功能. <!DOC ...
- echarts实现折线图
前端框架使用的angular,折线图使用echarts实现. 这里实现的折线图只是简单是折线图,折线图显示在table中,不需要xy轴的数据说明. 1. item.component.html < ...
- Echarts案例-折线图
一:先在官网下载 https://www.echartsjs.com/zh/download.html 然后再建立工程,导入这两个包: 写代码: <!DOCTYPE html> <h ...
随机推荐
- 线段树合并 || 树状数组 || 离散化 || BZOJ 4756: [Usaco2017 Jan]Promotion Counting || Luogu P3605 [USACO17JAN]Promotion Counting晋升者计数
题面:P3605 [USACO17JAN]Promotion Counting晋升者计数 题解:这是一道万能题,树状数组 || 主席树 || 线段树合并 || 莫队套分块 || 线段树 都可以写..记 ...
- MySQL慢查询日志总结 日志分析工具mysqldumpslow
MySQL慢查询日志总结 - 潇湘隐者 - 博客园 https://www.cnblogs.com/kerrycode/p/5593204.html 2016-06-17 10:32 by 潇湘隐者, ...
- WordCount扩展与优化
合作者:201631062327,201631062128码云地址:https://gitee.com/LIUJIA6/WordCount3 一:项目说明 本次项目是在上次作业WorldCount的基 ...
- 20165317Java实验五 网络编程与安全
实验五 网络编程与安全 一.中缀转后缀 参考http://www.cnblogs.com/rocedu/p/6766748.html#SECDSA 结对实现中缀表达式转后缀表达式的功能 MyBC.ja ...
- Emmet.vim 教程
Emmet.vim 教程 May 5, 2012 目录 1 下载 Emmet.vim 2 安装 Emmet.vim 3 使用 Emmet.vim 4 余话 Emmet 项目原先叫 Zen Coding ...
- 本地node启动服务步骤
启动node服务: 1.git bash here (node server-run.js) 2.如果第一次启动node服务,要根据提示装依赖文件npm install 依赖文件名 3.启动成功提示: ...
- js跨域交互之jsonp - 看完就能让你了解jsonp原理 (原)
跨域? 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 同源策略? 一般来说 a.com 的网页无法直接与 b.com的服务器沟通, 浏览器的同源策略限制从一个源加载的文档或脚本 ...
- mongDb安装
1.下载安装包:https://www.mongodb.com/download-center#community 2.tar -xzvf mongodb-linux-x86_64-rhel70-3. ...
- redis安装及错误排查
安装: 1.cd /usr/redis //redis目录作为安装目录,没有自行创建 2.tar xzf redis-4.0.6.tar.gz 3. cd redis-4.0.6 4.make ...
- python-17
# 列表生成式 a = [x*2 for x in range(10)] # 这两个变量必须一致 print(a) #列表 元组的高级赋值办法 b,c = [",6] # python的垃圾 ...