echarts_部分图表配置_堆叠折线图
echarts基本图表使用:
1.获取包裹元素(var myChart = echarts.init(document.getElementById(‘thisId’));)2.设置option(option={...})3.使用设置好的option显示图表(myChart.setOption(option);)
废话不多讲上图:
function ZX_bottom (thisId,titleName){
var myChart = echarts.init(document.getElementById(thisId)); option = {
tooltip : {
trigger: 'axis',
/*show:false,//添加鼠标浮动窗口就消失了*/
axisPointer: { type: 'line',//指示器类型。 cross' 十字准星指示器 其他选项 line shadow
label: {
backgroundColor: 'rgba(255, 255, 255, .5)'//XY轴显示的小方块
},
crossStyle: {//线的颜色 axisPointer.type 为 'cross' 时有效。
color: '#fff'
}
}
},
backgroundColor : 'rgba(43, 62, 75, .5)',//背景颜色
toolbox: {//工具栏
show: false//是否显示工具栏组件
},
legend: {
data:['营销流量','自然流量'],
textStyle : {
color : '#FFF',
fontSize: 15
}
},
grid : {
left : '2%',
right : '7%',
bottom : '3%',
containLabel : true, },
xAxis : [
{
type : 'category',
boundaryGap : false,//x轴两侧留白策略
axisLabel : {
show : true,
textStyle : {
color : '#FFF',
fontSize: 15
}
},
splitLine : {//去掉网格线
show : false
},
axisLine : {
lineStyle : {
color : '#FFF',
fontSize: 15
}
},
axisTick : {
lineStyle : {
color : '#FFF',
fontSize: 15
}
},
data : ['周一','周二','周三','周四','周五','周六','周日'],
}
],
yAxis : [
{
type : 'value',
axisLabel : {
show : true,
textStyle : {
color : '#FFF',
fontSize: 15
}
},
splitLine : {//去掉网格线
show : false
},
axisLine : {
lineStyle : {
color : '#FFF',
fontSize: 15
}
},
axisTick : {
lineStyle : {
color : '#FFF',
fontSize: 15
}
}
}
],
series : [ {
name:'自然流量',
type:'line',
stack: '总量',
areaStyle: {normal: {}},
color:['#ff907f'],//对应上面data的背景色
data:[220, 182, 191, 234, 290, 330, 310]
},{
name:'营销流量',
type:'line',
stack: '总量',
areaStyle: {normal: {}},
color:['#52d2dd'],//对应上面data的背景色
data:[120, 132, 101, 134, 90, 230, 210]
}
]
};
myChart.setOption(option);
}
echarts_部分图表配置_堆叠折线图的更多相关文章
- Android绘图机制(四)——使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美
Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...
- excel在一个图表内,显示折线图和柱状图
折线图和柱状图,在同一个图表中拆分显示 一个图,设置主坐标轴 另外一个图,设置次坐标轴 拆分,通过调整纵坐标的最小值和最大值来实现 关于图表的标题,选中图表,选择布局,然后图表 ...
- DevExpress使用之ChartControl控件绘制图表(多坐标折线图、柱状图、饼状图)
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
- Android图表引擎AChartEngine之折线图使用
最近在帮老师做一个课题,其中app端需要显示折线图以便直观地看数据波动,上网查了些资料后发现了这款图标引擎,另外感谢李坤老师的博客,帮助很大. 废话不多说,下面写代码. 一.AChartEngine是 ...
- jqPlot图表插件学习之折线图-散点图-series属性
一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载 ...
- 数据可视化基础专题(十一):Matplotlib 基础(三)常用图表(一)折线图、散点图、柱状图
1 折线图 折线图主要用于表现随着时间的推移而产生的某种趋势. cat = ["bored", "happy", "bored", &quo ...
- echarts_部分图表配置简介_横向柱状图
横向柱状图主要配置x位置x轴类型y轴类型(轴的类型分两种 1.category(类别)2.value(值)),代码简单(里面有注释)效果如下: var myChart = echarts.init(d ...
- echarts_部分图表配置_dataZoom精确控制显示数据数量
echarts为我们提供了dataZoom组件,当数据过多时就有了它的用武之地,业务场景:数据返回100调可是为了前端显示效果默认只显示20条,其他数据由dataZoom控制显示隐藏: functio ...
- 最牛逼android上的图表库MpChart(二) 折线图
最牛逼android上的图表库MpChart二 折线图 MpChart折线图介绍 MpChart折线图实例 MpChart效果 最牛逼android上的图表库MpChart(二) 折线图 最近工作中, ...
随机推荐
- BarTender 通过ZPL命令操作打印机打印条码, 操作RFID标签
注: 由于工作需要, 也是第一次接触到打印机的相关内容, 凑巧, 通过找了很多资料和帮助后, 也顺利的解决了打印标签的问题 (标签的表面信息[二维码,条形码, 文字] 和 RFID标签的EPC写 ...
- Java 基础 程序流程控制 (上)
Java程序流程控制 (上) Java程序大体分为三种流程控制结构:顺序结构.分支结构.循环结构 顺序结构 程序由上到下的逐行执行,中间没有任何跳转和判断语句. 示例代码如下: public clas ...
- JS面向对象一
面向对象分为三大类 封装,继承,多态! 封装就是在一个函数方法中嵌套另外一个函数方法,外层函数方法返回内层函数方法里面的结果,其中内层函数要调用外层函数定义的局部变量 每个函数方法就是一个局部作用域, ...
- session或memcache过期之后跳转到登陆页面并跳出iframe框架
<!--在你想控制跳转的页面,比如login.html中的<head>与</head>之间加入以下代码:--> <script> if (window ...
- [leetcode-581-Shortest Unsorted Continuous Subarray]
Given an integer array, you need to find one continuous subarray that if you only sort this subarray ...
- Apollo框架试玩
2017年7月5日,百度举行了AI开发者大会,在会上发布了Apollo项目,并进行了演示,该项目在Github上已经能够被访问.出于一个程序员的好奇,昨天试玩了一把,确实不错. http://apol ...
- QQ信鸽推送
闲来无事,看看腾讯的信鸽推送! 优点: 1.毕竟大腿出的东西,不会太差 2.集成快 3.推送效率高,功能强,APP后台被杀的情况下同样能接受到推送. 废话少说,直接上代码: 源代码.zip
- 2017寒假零基础学习Python系列之函数之 递归函数
什么是递归函数? 在函数内部,也可以继续调用其他函数,如果一个函数在内部调用本身,这个函数为递归函数举一个求n的阶乘的例子: def fact(n): if n == 1: return 1; els ...
- Android精品源码与技术博文
Android精品源码android遵循Material Design风格天气源码基于exoplay 自定义播放器 支持直播 1 ExoUserPlayer 基本播放器...几种动画效果Animati ...
- CodeM美团点评编程大赛复赛 做题感悟&题解
[T1] [简要题意] 长度为N的括号序列,随机确定括号的方向:对于一个已确定的序列,每次消除相邻的左右括号(右左不行),消除后可以进一步合并和消除直到不能消为止.求剩下的括号的期望.\(N \l ...