echarts曲线图
drawLeftLine(){
let drawLine = echarts.init(document.getElementById('data-left-middle-table-wrap'));
let option = null;
option = {
tooltip: {
trigger: 'axis'
},
color:['#52F478','#FFCD8B'],
icon: "circle",
legend: {
x:'200px',
y:'10px',
data:['进车辆','出车辆'],
textStyle:{
fontSize: 14,//字体大小
color: '#BBF6FF'//字体颜色
}, },
grid: {
left: '0px',
// right: '0px',
bottom: '0px',
containLabel: true
},
xAxis: {
type: 'category',
name:'小时',
nameGap:'15',
show:true,
boundaryGap:false,
axisLabel:{
textStyle:{
color:'#FFFFFF'
}
},
splitArea : {
show : false,
},
splitLine : {
show :false,
},
axisLine:{
lineStyle:{
color:'#BBF6FF',
width:2,
},
symbol:['none','arrow']
},
data: [0,2,4,6,8,10,12,14,16,18,20,22,24]
},
yAxis: {
type: 'value',
name:'数量',
show:true,
axisLabel:{
textStyle:{
color:'#FFFFFF'
}
},
splitArea : {
show : false,
},
splitLine : {
show :false,
},
axisLine:{
lineStyle:{
color:'#BBF6FF',
width:2,
},
symbol:['none','arrow']
},
},
series: [
{
name:'进车辆',
type: 'line',
smooth: true,
lineStyle:{
normal:{
color:'#4EEE79',
width:3
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'red'
}, {
offset: 1,
color: 'yellow'
}]),
},
},
data:[4,10, 40, 60, 100, 120,140,150,130,100,60,30,20]
},
{
name:'出车辆',
type:'line',
smooth: true,
lineStyle:{
normal:{
color:'#FFCD8B',
width:3
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#4B4558'
}, {
offset: 1,
color: '#516359'
}]),
},
},
data:[3,8, 30, 50, 110, 100,80,100,120,90,60,20,10]
}
]
};
if (option && typeof option === "object") {
drawLine.setOption(option);
}
},
echarts曲线图的更多相关文章
- 在vue中使用Echarts画曲线图(异步加载数据)
现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...
- echarts将折线图改为曲线图
只要在 series中加上属性: smooth: true(true为曲线.flase为直线)
- 利用Echarts设计一个图表平台(一)
Echarts是一款百度的开源图表库,里面提供了非常多的图表样式,我们今天要讲的内容是利用这一款开源js图表,制作一个能够动态定制的图表平台. 1)Echarts API介绍 首先我们先来看一下Ech ...
- 使用chart和echarts制作图表
前 言 chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.它可以帮你用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina ...
- echarts tab 切换问题整理
一.bootstrap tabs 解决方案 方式一 tab切换echarts无法正常显示 https://blog.csdn.net/cjs68/article/details/78072382 ta ...
- Echarts(一)
echarts3.61.<!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="barMain" style="heigh ...
- 百度ECharts数据绑定诀窍
百度Echarts的功能还是蛮好用的.. 不能说多好但是也不次.. 下边就分享一些数据绑定经验..对在处理过程中的思路有一些帮助... 报表里用的最多的可以说是 饼状图和柱形图.. 饼状图里当然是包括 ...
- echarts系列之动态加载数据
1.echarts学习前言 最近接触到echarts,发现数据可视化真的是魅力无穷啊,各种变幻的曲线交错,以及‘曼妙’的动画效果真是让人如痴如醉! 下面就来一起欣赏她的美... “ ECharts是中 ...
- 网页图表类框架(插件)——百度eCharts和Highcharts
ECharts, 缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库, 可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /10 ...
随机推荐
- HashMap源码分析-jdk1.7
注:转载请注明出处!!!!!!!这里咱们看的是JDK1.7版本的HashMap 学习HashMap前先知道熟悉运算符合 *左移 << :就是该数对应二进制码整体左移,左边超出的部分舍弃,右 ...
- [知乎]自己真是Know Nothing 历史上有哪些细思恐极的事件?
作者:敖让链接:https://www.zhihu.com/question/38374479/answer/652432284来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- Square HDU 1518 搜索
Square HDU 1518 搜索 题意 原题链接 给你一定若干个木棒,让你使用它们组成一个四边形,要求这些木棒必须全部使用. 解题思路 木棒有多种组合方式,使用搜索来进行寻找,这里需要进行优化,不 ...
- P1622释放囚犯
这是一道绿题,是一道让人想用贪心但却是区间DP的题目,难倒了我这个蒟蒻. 这个题其实仔细观察是类似于石子合并的!合并石子的代价便是肉的数量,求最小代价.所以我们设dp[i][j]为释放第i个到第j个所 ...
- Thinkphp3.2 Redis支持REDIS_AUTH验证
原有的Redis类在Library/Think/Cache/Driver/中 换成下面的: <?php // +----------------------------------------- ...
- SSM框架中数据库无法连接的问题
首先是SSM框架中所有的配置都是没有问题的,而且项目在其他人的环境上也能正常访问数据库:那么最有可能的就是数据库版本的问题导致数据库连接不上,服务器给我的报错是: 15:37:25.902 [C3P0 ...
- Apache与Tomcat联系及区别??
Apache与Tomcat都是Apache开源组织开发的用于处理HTTP服务的项目,两者都是免费的,都可以做为独立的Web服务器运行.Apache是Web服务器而Tomcat是Java应用服务器. A ...
- Python爬虫之urllib.parse详解
Python爬虫之urllib.parse 转载地址 Python 中的 urllib.parse 模块提供了很多解析和组建 URL 的函数. 解析url 解析url( urlparse() ) ur ...
- 一份贴近真实面试的Java面试题(基础部分)
这是一份关于Java基础的面试题.在网上的关于Java的面试题数不胜数,但本人认真看过后觉得大多数都没有实用性,有很多是面试官根本就不会问到的,企业根本不会用到的,一些已经脱离了实际开发的技术问题.而 ...
- nmap 扫描出某网段内web服务器
今天碰到一个问题,客户要求在他们内网中扫描出所有web服务器,然后再对web进行渗透测试,共两个网段. 以前我记得用nmap时曾得到过某地址的web服务器数据,比如显示是IIS或apach,但忘了具体 ...