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曲线图的更多相关文章

  1. 在vue中使用Echarts画曲线图(异步加载数据)

    现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...

  2. echarts将折线图改为曲线图

    只要在 series中加上属性: smooth: true(true为曲线.flase为直线)

  3. 利用Echarts设计一个图表平台(一)

    Echarts是一款百度的开源图表库,里面提供了非常多的图表样式,我们今天要讲的内容是利用这一款开源js图表,制作一个能够动态定制的图表平台. 1)Echarts API介绍 首先我们先来看一下Ech ...

  4. 使用chart和echarts制作图表

      前  言 chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.它可以帮你用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina ...

  5. echarts tab 切换问题整理

    一.bootstrap tabs 解决方案 方式一 tab切换echarts无法正常显示 https://blog.csdn.net/cjs68/article/details/78072382 ta ...

  6. Echarts(一)

    echarts3.61.<!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="barMain" style="heigh ...

  7. 百度ECharts数据绑定诀窍

    百度Echarts的功能还是蛮好用的.. 不能说多好但是也不次.. 下边就分享一些数据绑定经验..对在处理过程中的思路有一些帮助... 报表里用的最多的可以说是 饼状图和柱形图.. 饼状图里当然是包括 ...

  8. echarts系列之动态加载数据

    1.echarts学习前言 最近接触到echarts,发现数据可视化真的是魅力无穷啊,各种变幻的曲线交错,以及‘曼妙’的动画效果真是让人如痴如醉! 下面就来一起欣赏她的美... “ ECharts是中 ...

  9. 网页图表类框架(插件)——百度eCharts和Highcharts

    ECharts, 缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库, 可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /10 ...

随机推荐

  1. js 如何定义函数

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. make the fence great again(dp 二维)

    D. Make The Fence Great Again time limit per test 2 seconds memory limit per test 256 megabytes inpu ...

  3. 8. golang 基本类型转换

    golang 类型转换只能显性转换 不能自动转换 基本数据类型间的转换 var x1 int = 2 var x2 int16 var x3 int8 x2 = 200 + x1 x3 = 200 + ...

  4. IDEA 增加对JPA的支持 执行JPQL语句

    IDEA 可以在控制台console中执行JPQL语句: 1. 在已存在的项目中选择项目结构: 2. 选择模块-指定实体所在的模块-选择上面的号 2. 选择要添加的模块:我们使用的是JPA,也可能有的 ...

  5. nodeJS打包安装和问题处理

    一,执行步骤,打包报错 1,查看npm版本npm -v 2,查看gulp版本(报错怎么证明没安装)gulp --version 3,安装gulpnpm install --global gulp-cl ...

  6. spring服务器接收参数格式

    注:@RequestParam 或@RequestBody等注解是否添加有什么区别 不加:参数可有可无,无参数时为null,但当参数类型是 数字基本类型(int.double)时会报错: 加上@Req ...

  7. 新手使用GIT 上传文件到github

    手把手教你如何使用 Git # 初始化一个新的Git仓库 1.方式一: mkdir(make directory) test或者直接进入文件夹中再打开git 方式二:cd /文件夹 cd(change ...

  8. 富文本编辑器Ueditor

    一.大概使用: 官网:http://ueditor.baidu.com/website/download.html 使用:[参考index.html] 3.1 引入ueditor的js <scr ...

  9. Codeforces 922 思维贪心 变种背包DP 质因数质数结论

    A #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #def ...

  10. Manacher || BZOJ 2342: [Shoi2011]双倍回文 || Luogu P4287 [SHOI2011]双倍回文

    题面:[SHOI2011]双倍回文 题解:具体实现时,就是在更新mr时维护前半段是回文串的最长回文串就好了 正确性的话,因为到i时如果i+RL[i]-1<=mr,那么答案肯定在i之前就维护过了: ...