Echars折线配置详解

比如做成如下效果图:

所有的配置如下:

var option = {
tooltip: { // 提示框
trigger: 'axis', // 触发类型(坐标轴触发)
alwaysShowContent: false, // 是否永远显示提示框的内容
backgroundColor: 'rgba(32, 174, 252, 0.7)', // 提示框的背景颜色
textStyle: { // 提示框浮层的文本样式 }
},
calculable: true,
// x轴设置
xAxis: [
{
type: 'category',
name: '(月)', // x轴名称单位
nameLocation: 'end', // 名称的位置
nameTextStyle: { // 名称的样式
color: '#999',
fontSize: '12px'
},
nameGap: 0, // 名称与X轴的距离
boundaryGap: true, // 坐标的刻度是否在中间
min: '3', // 坐标轴刻度的最小值
max: '12', // 坐标轴刻度的最大值
axisLine: { // 坐标轴线条相关设置(颜色等)
lineStyle: {
color: '#ccc'
}
},
axisTick: { // 坐标轴刻度相关设置
length: '0' // 长度设置为0
},
axisLabel: { // 坐标轴刻度标签
margin: 7, // 刻度标签与轴线之间的距离
textStyle: {
color: '#999', // 坐标轴刻度文字的颜色
fontSize: '12px' // 坐标轴刻度文字的大小
},
// rotate: 30 // 旋转30度
},
data: ['3', '4', '5', '7', '8', '12'],
// show: false
}
],
// y轴设置
yAxis: [
{
type: 'value', // 类型数值轴
name: '(人)', // Y轴名称单位
nameTextStyle: { // 名称的样式
color: '#999',
fontSize: '12px'
},
nameGap: 13, // 名称与Y轴的距离
axisTick: { // 坐标轴相关设置
length: '0'
},
axisLine: { // 坐标轴线条相关设置(颜色等)
lineStyle: {
color: '#ccc'
}
},
axisLabel: { // 坐标轴标签相关设置,距离颜色等
margin: 7, // 刻度标签与轴线之间的距离
// formatter: '{value} C', // 标签内容内置的格式转化器在后面加一个单位值
textStyle: {
color: '#999', // 坐标轴刻度文字的颜色
fontSize: '12px' // 坐标轴刻度文字的大小
}
},
splitLine: { // 坐标轴分割线。默认数值轴显示,类目轴不显示
show: false
}
}
],
grid: { // 直角坐标系内绘图网格
left: 36
},
series: [ // 系列列表
{
name: '人', // 系列名称,用于tooltip的显示
type: 'line',
data: [2, 2, 2, 2, 2, 7, 2],
itemStyle: { // 折线拐点的样式
normal: {
color: '#20aefc' // 拐线拐点的颜色
}
},
lineStyle: { // 线条的样式
normal: {
color: '#20aefc', // 折线的颜色
}
},
smooth: 0.3, // 是否平滑处理,如果是Number类型(取值范围为0到1),表示平滑程度,越小越接近折线段,反之
areaStyle: { // 区域填充的样式
normal: {
// 线性渐变
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: '#b1e3fe' // 0% 处的颜色
}, {
offset: 1, color: '#fff' // 100% 处的颜色
}], false)
}
},
markPoint: { // 图标标注
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name: '人', // 系列名称,用于tooltip的显示
type: 'line',
data: [6, 6, 6, 6, 6, 6, 6],
itemStyle: { // 折线拐点的样式
normal: {
color: '#20aefc' // 拐线拐点的颜色
}
},
// smooth: 0.3, // 是否平滑处理,如果是Number类型(取值范围为0到1),表示平滑程度,越小越接近折线段,反之
lineStyle: { // 线条的样式
normal: {
color: '#20aefc', // 折线的颜色
}
},
areaStyle: { // 区域填充的样式
normal: {
// 线性渐变
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: '#b1e3fe' // 0% 处的颜色
}, {
offset: 1, color: '#fff' // 100% 处的颜色
}], false)
}
},
markPoint: { // 图标标注
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name: '人', // 系列名称,用于tooltip的显示
type: 'line',
data: [10, 10, 10, 10, 10, 10, 10],
itemStyle: { // 折线拐点的样式
normal: {
color: '#20aefc' // 拐线拐点的颜色
}
},
lineStyle: { // 线条的样式
normal: {
color: '#20aefc', // 折线的颜色
}
},
areaStyle: { // 区域填充的样式
normal: {
// 线性渐变
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: '#b1e3fe' // 0% 处的颜色
}, {
offset: 1, color: '#fff' // 100% 处的颜色
}], false)
}
},
markPoint: { // 图标标注
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};

html代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="./echarts4.x.js"></script>
<script type="text/javascript" src="./zhexian.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 400px;height:400px;margin: 0 auto"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

Echars折线配置详解的更多相关文章

  1. Log4j配置详解(转)

    一.Log4j简介 Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使 ...

  2. logback 常用配置详解<appender>

    logback 常用配置详解 <appender> <appender>: <appender>是<configuration>的子节点,是负责写日志的 ...

  3. [转]阿里巴巴数据库连接池 druid配置详解

    一.背景 java程序很大一部分要操作数据库,为了提高性能操作数据库的时候,又不得不使用数据库连接池.数据库连接池有很多选择,c3p.dhcp.proxool等,druid作为一名后起之秀,凭借其出色 ...

  4. libCURL开源库在VS2010环境下编译安装,配置详解

    libCURL开源库在VS2010环境下编译安装,配置详解 转自:http://my.oschina.net/u/1420791/blog/198247 http://blog.csdn.net/su ...

  5. logback配置详解3<filter>

    logback 常用配置详解(三) <filter> <filter>: 过滤器,执行一个过滤器会有返回个枚举值,即DENY,NEUTRAL,ACCEPT其中之一.返回DENY ...

  6. logback配置详解2<appender>

    logback 常用配置详解(二) <appender> <appender>: <appender>是<configuration>的子节点,是负责写 ...

  7. log4j.properties配置详解

    1.Loggers Loggers组件在此系统中被分为五个级别:DEBUG.INFO.WARN.ERROR和FATAL.这五个级别是有顺序的,DEBUG < INFO < WARN < ...

  8. Log4J日志配置详解

    一.Log4j简介 Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使 ...

  9. Windows下Nginx Virtual Host多站点配置详解

    Windows下Nginx Virtual Host多站点配置详解 此教程适用于Windows系统已经配置好Nginx+Php+Mysql环境的同学. 如果您还未搭建WNMP环境,请查看 window ...

随机推荐

  1. ssm简单整合(注释方法)

    1.创建web工程,选择web.xml文件,并导入相关jar包(使用的spring4.0以上版本,) 2.配置web.xml文件,包括spring.xml,springMVC.xml的加载映射,核心操 ...

  2. MySQL分库分表浅谈

    一.分库分表类型 1.单库单表 所有数据都放在一个库,一张表. 2.单库多表 数据在一个库,单表水平切分多张表. 3.多库多表 数据库水平切分,表也水平切分. 二.分库分表查询 通过分库分表规则查找到 ...

  3. HTML5的DeviceOrientation实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  4. [工作总结]jQuery在工作开发中常用代码片段集锦(1-10)

    1.jQuery,JS实现tab切换 原生JS实现 HTML代码如下: <div class="wrap"> <ul id="tag"> ...

  5. 洛谷P3193 [HNOI2008]GT考试(dp 矩阵乘法)

    题意 题目链接 Sol 设\(f[i][j]\)表示枚举到位置串的第i位,当前与未知串的第j位匹配,那么我们只要保证在转移的时候永远不会匹配即可 预处理出已知串的每个位置加上某个字符后能转移到的位置, ...

  6. HTTP协议web开发知识点

    HTTP协议 HTTP协议简介 超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式.协作式和超媒体信息系统的应用层协议.HTTP是万维网的数 ...

  7. vue-cli脚手架目录一览

    最近在学习vue,看的稀里糊涂.今天从头开始,把cli配置的vue项目目录和配置文件搞清楚. 先看看整个项目目录结构: 再看看build文件夹下相关文件及目录: config文件夹下目录和文件: 接下 ...

  8. IDEA项目搭建八——使用MybatisPlus简化数据库交互

    一.MybatisPlus简化数据库交互 我们使用Mybatis发现需要在mapper.xml中写很多重复的简单CRUD(增删改查),使用MybatisPlus可以大大简化这部分代码,官方文档http ...

  9. [Android GMS 认证] keystore/keymaster/Attestation的问题

    首先确定写入key,操作如下: 检查 /persist/data/sfs 目录下是否有key文件存在     adb shell ls -la /persist/data/sfs 做过key prov ...

  10. 9.4、__del__、__doc__、__dict__、__module__、__getitem__、__setitem__、__delitem__、__str__、__repr__、__call__

    相关内容: __del__.__doc__.__dict__.__module__.__getitem__.__setitem__.__delitem__.__str__.__repr__.__cal ...