Echars折线配置详解

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>

转载自:https://www.cnblogs.com/tugenhua0707/p/9380352.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/568593.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python爬虫】爬取微信公众号文章信息准备工作

有一天发现我关注了好多微信公众号&#xff0c;那时就想有没有什么办法能够将微信公众号的文章弄下来&#xff0c;而且还想将一些文章的精彩评论一起搞下来。参考了一些文章&#xff0c;通过几天的研究基本上实现了自己的要求&#xff0c;现在记录一下自己的一些心得。 整个研…

js:堆栈和队列

JavaScript数组的栈和队列的操作方法。 堆栈和队列 要了解JavaScript数组的堆栈和队列方法的操作&#xff0c;需要先对堆栈和队列基础知识有所了解。在继续后面的内容之前&#xff0c;我们先简单的了解一下堆栈和队列的概念。 栈和队列都是动态的集合&#xff0c;在栈中&…

【Python爬虫】微信公众号历史文章和文章评论API分析

上一篇文章爬取微信公众号文章信息准备工作介绍了微信公众号历史文章和文章评论API的组成情况&#xff0c;历史文章API格式&#xff1a;https://mp.weixin.qq.com/mp/profile_ext?actiongetmsg&__bizMjM5NjAxOTU4MA&fjson&offset10&count10&is_ok1&sc…

【Python】Python简介和Python解释器

计算机语言的种类非常的多&#xff0c;总的来说可以分成机器语言&#xff0c;汇编语言&#xff0c;高级语言三大类。 机器语言(二进制)→汇编语言→&#xff08;前面两种语言是与硬件进行交互&#xff09; →高级语言&#xff08;面向过程语言(C语言)→面向对象语言&#xff09…

【Python】单线程异步多线程多进程实例

上一篇文章主要介绍了多任务场景下单线程异步、多线程、多进程如何选择&#xff0c;链接&#xff1a;多任务场景下单线程异步多线程多进程 这里主要通过三个实例去验证一下简单的多任务场景下&#xff0c;三种方式的耗时情况&#xff0c;假设有10个互不关联的10个任务 多进程版…

python及pycharm2018软件安装教程

python及pycharm2018软件安装教程 python 3.6.5及pycharm2018.1.1 Win版32/64位下载地址&#xff1a; https://pan.baidu.com/s/1KdECgnrARK4HubPeFSKCTw 密码&#xff1a;bwc5 Python及PyCharm简介&#xff1a; Python 是一种面向对象的解释型计算机程序设计语言。是纯粹的自由…

2059 - authentication plugin 'caching_sha2_password' -navicat连接异常问题解决

使用navicat 连接 mysql 8.0.11 报 "2059 - authentication plugin caching_sha2_password ..." 解决办法&#xff1a; 进入mysql命令行然后输入 ALTER USER root% IDENTIFIED WITH mysql_native_password BY root1;

【测试工具】在linux测试环境安装bug管理工具禅道

在我们测试中&#xff0c;为了方便管理测试流程&#xff0c;提交测试发现的bug&#xff0c;我们需要使用到bug管理工具。有些大公司可能会自己开发一些bug管理工具&#xff0c;但是我们也会用一些开源的bug管理工具&#xff0c;比如Bugzilla&#xff0c;Redmine&#xff0c;Tra…

【测试工具】在linux测试环境访问禅道数据库

上一篇文章我们介绍了如何在linux测试环境安装bug管理工具禅道&#xff0c;现在我们来介绍一下如何访问禅道的数据库&#xff0c;访问数据库有什么用呢&#xff1f;首先&#xff0c;我们可以更改我们安装后的管理系统的名称&#xff08;改为自己公司名称&#xff09;&#xff0…

在命令提示符(cmd)下怎样复制粘贴(详细版)

我们的命令提示符面板&#xff0c;不能选中复制。应该怎么办呢&#xff1f; 按照下面的方法即可解决 输入“cmd”&#xff0c;确认。 此时打开了cmd窗口&#xff0c;在图中位置右键选择“属性”。 4 在弹出的窗口中&#xff0c;勾选“快速编辑模式”。 5 复制方框1中的文字…

python各种库安装

1、安装django pip install django 安装成功测试&#xff1a;进入cmd--》输入python--》输入import django-->输入 django.get_version(),若正常显示则说明安装成功 2、更新pip python -m pip install --upgrade pip 3、安装pymysql pip install pymysql 出现错误&…

【工具】SecureCRT安装和注册

SecureCRT是一款支持SSH&#xff08;SSH1和SSH2&#xff09;的终端仿真程序&#xff0c;简单地说是Windows下登录UNIX或Linux服务器主机的软件。 SecureCRT支持SSH&#xff0c;同时支持Telnet和rlogin协议。SecureCRT是一款用于连接运行包括Windows、UNIX和VMS的理想工具。通过…

Windows下如何查看某个端口被谁占用并强制关闭

一、查看那个端口被调用 我告诉大家一个方法&#xff0c;^_^。 1、 开始—->运行—->cmd&#xff0c;或者是windowR组合键&#xff0c;调出命令窗口&#xff1b; 2、输入命令&#xff1a;netstat -ano&#xff0c;列出所有端口的情况。在列表中我们观察被占用的端口&a…

【性能测试】性能测试的基础理论

转发自博客园贺满&#xff1a;https://www.cnblogs.com/puresoul/p/5456855.html &#xff0c;有删减。 随着软件行业的快速发展&#xff0c;现代的软件系统越来越复杂&#xff0c;功能越来越多&#xff0c;测试人员除了需要保证基本的功能测试质量&#xff0c;性能也随越来越受…

MySQL 处理插入重主键唯一键重复值办法

本篇文章主要介绍在插入数据到表中遇到键重复避免插入重复值的处理方法&#xff0c;主要涉及到IGNORE,ON DUPLICATE KEY UPDATE,REPLACE&#xff1b;接下来就分别看看这三种方式的处理办法。 IGNORE 当使用INSERT语句向表中添加一些行数据并且在处理期间发生错误时&#xff0c;…

【性能测试】性能测试的基本流程

转发自博客园贺满&#xff1a;https://www.cnblogs.com/puresoul/p/5463477.html&#xff0c;有删减。 本文主要介绍下性能测试的基本流程&#xff0c;性能测试从实际执行层面来看&#xff0c;测试的过程一般分为这么几个阶段&#xff0c;如下图&#xff1a; 下面分别介绍下每个…

【性能测试】性能测试工具选择

转发自博客园贺满&#xff1a;https://www.cnblogs.com/puresoul/p/5503134.html&#xff0c;有删减。 本篇文章主要简单总结下性能测试工具的原理以及如何选型。性能测试和功能测试不同&#xff0c;性能测试的执行是基本功能的重复和并发&#xff0c;需要模拟多用户&#xff0…

【测试工具】禅道项目管理工具设置触发邮箱

禅道支持邮件提醒&#xff0c;当需求、任务、bug等发生变化的时候&#xff0c;可以发邮件提醒。 禅道提醒邮件默认通知范围&#xff08;禅道9.8版本&#xff0c;可以在 后台-消息-设置中设置哪些动作需要发信&#xff09;&#xff1a; 1、Bug&#xff1a;指派给抄送 添加&#…

【性能测试】Linux系统监控-Top命令

前面转载的三篇文章主要介绍了性能测试的相关概念&#xff0c;其中有提到服务器&#xff0c;服务器的配置是性能测试中必须考虑的&#xff0c;而且性能测试中也必须监控服务器。 这篇文章主要介绍一下如何通过Linux服务器自带的top命令监控运行情况&#xff0c;以下是直接top命…

【性能测试】Linux系统监控-CPU信息

我们知道CPU对于服务器来说非常重要&#xff0c;下面我们从几个方面介绍linux服务器CPU相关信息&#xff1a; 先要理解以下几个概念&#xff1a; 1、一台物理机的物理CPU的个数 2、一个CPU上的核数 3、一个核上面支持的线程数 有下面的计算公式&#xff1a; 总核数 物理C…