echarts折线图相关
optionJKDLine = {
title: {
text: '告警数量趋势图',
textStyle:{ //标题样式
fontStyle:'normal',
fontFamily:'sans-serif',
fontSize:12
}
},
tooltip: {trigger: 'axis'},
legend: { //图例,默认显示
},
grid: { //图表距离
left: '-3%',
right: '5%',
bottom: '3%',
top:'20%',
containLabel: true
},
toolbox: { //右侧工具栏
feature: {
saveAsImage: {}
}
},
visualMap: {//区间内控制显示颜色 折线点的颜色变化
show: false,
dimension: 1,
pieces: [
{
gte: 0, lte: 140, color: '#7EF57C' //表示0-140之间的数值,是这个#7EF57C颜色,大于这个140,则#ff0000颜色。
}],
outOfRange: {
color: '#ff0000'
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['01', '02', '03', '04', '05', '06', '07']
},
yAxis: {
type: 'value',
show:false //不显示Y轴
},
yAxis : [{ //显示Y轴,但不显示数值
axisLabel : {
formatter: function(){
return "";
}
}
}],
series: [{
name:'告警数量',
type:'line',
symbol: 'circle', // 拐点类型
smooth: true, // 当为true时,就是光滑的曲线(默认为true)
symbolSize: 3, // 拐点圆的大小
data: [120, 132, 191, 194, 120, 130, 110],
smooth: true,
itemStyle : {
normal : {
label : {show: true},
color:'#ED7967',// 折线条的颜色
borderColor: '#0bb6db', // 拐点边框颜色
lineStyle:{
color:'#EDC167'
}
}],
areaStyle: { //折线图区域颜色线性渐变显示
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{offset: 0, color: '#7CF5A2'},
{offset: 0.6, color: '#7EF57C'},
{offset: 1, color: '#fff'}]
)
}
},
]
};
实现如下:
echarts折线图相关的更多相关文章
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- echarts折线图动态改变数据时的一个bug
echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...
- d3.js 教程 模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
- ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
- echarts折线图,数据切换时(最近七天)绘图不合理现象
echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...
- vue使用axios读取本地json文件来显示echarts折线图
编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...
- 知识点4: 配置echarts折线图和饼图
折线图 效果图 html <template> <div id="v11-charts3"></div> </template> j ...
- echarts折线图--数据交互
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
随机推荐
- CodeForces 1107F. Vasya and Endless Credits
题目简述:给定 $n \leq 500$ 个贷款方式,其中第$i$个贷款额为$a_i$元,需要$k_i$个月偿还,每月还贷$b_i$元.在每个月月初可申请其中一个贷款,而在每个月月底时需要还贷.求:( ...
- java连接sqlserver2005数据库
java连接sqlserver2005数据库 首先得下载驱动程序到微软网站下载Microsoft JDBC Driver 4.0 for SQL Server 下载地址 :http://msdn. ...
- Luogu 3312 [SDOI2014]数表
在这一篇里把所有的套路写全方便自己之后复习. 首先是一个小学生数学:$a$整除$b$ $ = $ $\frac{b}{a}$ 也就是说这题中格子$(i, j)$的值就是既能被$i$整除又能被$j$整 ...
- 【机器学习】关联规则挖掘(二):频繁模式树FP-growth
Apriori算法的一个主要瓶颈在于,为了获得较长的频繁模式,需要生成大量的候选短频繁模式.FP-Growth算法是针对这个瓶颈提出来的全新的一种算法模式.目前,在数据挖掘领域,Apriori和FP- ...
- Umbraco项目发布错误 --More than one type want to be a model for content type authorize
在开发项目时,解决方案下面包括三个项目 MyUmbracoProject MyUmbracoProject.Core MyUmbracoProject.FrontEnd 第一个项目MyUmbracoP ...
- 托管调试助手 "PInvokeStackImbalance":的调用导致堆栈不对称。原因可能是托管的 PInvoke 签名与非托管的目标签名不匹配。请检查 PInvoke 签名的调用约定和参数与非托管
在C#中一定要检查引用时的数据类型 WinAPI 的数据类型 默认是32位的,但是引用时外部的是 Long类型默认是64位的.所以引用时需要将 long 改为 int 型. 参照 http://blo ...
- CodeForces 125D【鸽巢原理】
哇塞?开始的三个数其中两个数一定能确定一个序列.(鸽巢原理) #include <bits/stdc++.h> using namespace std; typedef long long ...
- 洛谷P2534 [AHOI2012]铁盘整理
P2534 [AHOI2012]铁盘整理 题目描述 输入输出格式 输入格式: 共两行.第一行为铁盘个数N(1<=N<=50),第二行为N个不同的正整数,分别为从上到下的铁盘的半径R.(1& ...
- Jmeter中JDBC Request和BeanShell PostProcessor的结合使用(SQL模糊查询)
[前言] 今天记录一下Jmeter中JDBC Request和BeanShell PostProcessor的结合使用的方法(SQL模糊查询) [步骤] 1.下载对应数据库的驱动包到jmeter安装目 ...
- 找出list中的不同元素、删除两个list中相同的对象
package com.test; import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; ...