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. 【Qt开发】foreach用法

    If you just want to iterate over all the items in a container in order, you can use Qt's foreach key ...

  2. Java基础/时间日期格式

    Java时间日期格式转换 一.Date转String和String转Date 参考博客:https://www.cnblogs.com/sharpest/p/7879377.html public s ...

  3. Oracle 修改数据文件路径的方法

      1. 关闭数据库,然后启动至mount状态 sqlplus / as sysdba shutdown immediate startup mount 2. 修改物理文件: 我这边将: c:\cwd ...

  4. Field baseMapper in com.baomidou.mybatisplus.extension.service.impl.ServiceImpl required a single bean, but xx were found:

    在学习使用 mybatis-plus 时,遇到一个奇怪的异常 如 代码一: 代码一: Error starting ApplicationContext. To display the conditi ...

  5. MySQL-快速入门(11)用户管理

    1.权限表 存储用户权限信息表主要有:user.db.host.tables_priv.columns_priv.procs_priv. 1>user表: 记录允许连接到服务器的账号信息,里面的 ...

  6. shell脚本又是什么?

    操作系统命令的组合称为Shell脚本: 一个Shell脚本主要由原本需要在命令行输入的命令组成,或在一个文本编辑器中,用户可以使用脚本来把一些常用的操作组合成一组串行.主要用来书写这种脚本的语言叫做脚 ...

  7. xss过滤与单例模式(对象的实例永远用一个)

    kindeditor里面可以加入script代码,使用re可以过滤掉python有个专门的模块可以处理这种情况,beautifulsoup4 调用代码: content = XSSFilter().p ...

  8. STM32程序加载与调试

    1.STM32程序的ISP下载,只能使用串口1,其它串口不可以.

  9. PAT Advanced 1006 Sign In and Sign Out (25 分)

    At the beginning of every day, the first person who signs in the computer room will unlock the door, ...

  10. AtCoder Beginner Contest 088 D Grid Repainting

    Problem statement We have an H×W grid whose squares are painted black or white. The square at the i- ...