app.title = '折柱混合';

option = {
grid: {
left: '5%', //距离左边的距离
right: '5%', //距离右边的距离
top:'8%',
bottom:'5%',
containLabel: true
},
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(0,0,0,0.75)',
axisPointer: {
crossStyle: {
color: '#999'
},
label: {
backgroundColor: 'rgba(0,0,0,0.75)'
}
}, },
xAxis: [{
type: 'category',
data: ["小于18岁", "18-23岁", "24-32岁", "33-40岁", "41-50岁", "51-60岁", "大于61岁", "未知年龄"],
axisPointer: {
type: ''
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#f5f5f5',//左边线的颜色
width:'1'//坐标线的宽度
}
},
axisLabel: {
interval:0,
rotate:45,
textStyle: {
color:'#999',
fontSize:'10'
}
},
}],
yAxis: [
{
type: 'value',
name: '',
splitNumber :8,
axisPointer: {
type: ''
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#f5f5f5',//左边线的颜色
width:'1'//坐标线的宽度
}
},
position:'left',
splitLine: {
show:false,
lineStyle: {
color: ['#f5f5f5']
}
},
axisLabel: {
textStyle: {
color:'#999',
fontSize:'10'
},
formatter: function (value) {
// var hh = Math.floor(value % 3600 / 60 / 60)
var mm = Math.floor(value % 3600 / 60);
var ss = Math.floor(value % 60);
if(value>3500){
return mm + 60 + "'" + ss + "''";
}else{
return mm + "'" + ss + "''";
}
}
}
},
{
type: 'value',
name: '',
splitNumber :8,
axisPointer: {
type: ''
},
axisLine: {
show:'false',
lineStyle: {
type: 'solid',
color: '#f5f5f5',//左边线的颜色
width:'1'//坐标线的宽度
}
},
splitLine: {
show:'false',
lineStyle: {
color: ['#f5f5f5']
}
},
axisLabel: {
textStyle: {
color:'#999',
fontSize:'10'
},
}
}
],
series: [
{
name:'男',
type:'bar',
data: [117.3005, 107.2594, 84.4112, 83.3266, 95.9611, 54.8313, 29.0411, 0],
barWidth : 12,
itemStyle: {
normal: {
color:'#7299CF'
}
}
},
{
name:'女',
type:'bar',
data:[324.082, 382.1394, 340.01627, 1289.3278, 3501.2786, 216.18571, 0, 0],
barWidth : 12,
itemStyle: {
normal: {
color:'#DB7272'
}
}
},
{
name:'男',
type:'line',
yAxisIndex: 2,
symbol:'circle',
yAxisIndex: 1,
data:[50, 62, 71, 59, 52, 57, 38, 30],
itemStyle: {
normal: {
color: "#fff",
borderColor: '#1FC3E4',
borderWidth: 1,
lineStyle: {
color:'#1FC3E4',
width:1
}
},
emphasis:{
color:'#1FC3E4',
}
},
areaStyle:{
normal:{
opacity:'0.3',
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255,0,0,0.6)'
},{
offset: 1,
color: 'rgba(255,0,0,0.1)'
}])
}
}
},
{
name:'女',
type:'line',
yAxisIndex: 1,
symbol:'circle',
yAxisIndex: 1,
data:[40, 52, 61, 49, 32, 37, 18,38],
itemStyle: {
normal: {
color: "#fff",
borderColor: "#DB7272",
borderWidth: 1,
lineStyle: {
color:"#DB7272",
width:1
}
},
emphasis:{
color:"#DB7272",
}
},
areaStyle:{
normal:{
opacity:'0.3',
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255,203,0,0.8)'
},{
offset: 1,
color: 'rgba(255,203,0,0)'
}])
}
}
}
]
}

echart 折线渐变 加柱形图结合图形,左右纵轴自设置格式,现行图北京渐变 ,x轴字体倾斜的更多相关文章

  1. 微信小程序echart 折线图legend不显示的问题

    最近使用小程序echart折线图,遇到表头一直不显示问题,查询之后解决方案:

  2. 现代3D图形编程学习-环境设置

    本书系列 现代3D图形编程学习 环境设置 由于本书中的例子,均是基于OpenGL实现的,因此你的工作环境需要能够运行OpenGL,为了读者能够更好的运行原文中的示例,此处简单地介绍了linux和win ...

  3. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

  4. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

  5. ajax-json,遇到的一个问题,jquery var ,加载顺序。JS对象,json格式转换。

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

  6. Highcharts 3D柱形图;Highcharts 堆叠3D柱形图;Highcharts 3D饼图;Highcharts 3D圆环图

    Highcharts 3D柱形图 配置 chart.options3d 配置 以下列出了 3D 图的基本配置,设置 chart 的 type 属性为 column,options3d 选项可设置三维效 ...

  7. R语言与医学统计图形【5】饼图、条件图

    R语言基础绘图系统 基础图形--饼图.克利夫兰点图.条件图 6.饼图 pie(rep(1,26),col=rainbow(26), labels = LETTERS[1:26], #标签 radius ...

  8. 用echartsjs 实现动态绘制折线、柱状等图形,并实现多图联动效果

    echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...

  9. echart折线图系列一:折线图基本配置

    引入echart插件 页面上准备一个容器:<div id="box" style="height:400px;width: 800px;padding: 20px& ...

随机推荐

  1. 触发器insert

    USE [stalentzx]GO/****** Object: Trigger [dbo].[GZ_HISTORY_INSERT] Script Date: 2019/12/24 13:11:40 ...

  2. (容量超大)or(容量及价值)超大背包问题 ( 折半枚举 || 改变 dp 意义 )

    题意 : 以下两个问题的物品都只能取有且只有一次 ① 给你 N 个物品,所有物品的价值总和不会超过 5000, 单个物品的价格就可达 10^10 ,背包容量为 B ② 给你 N (N ≤ 40 ) 个 ...

  3. 对拍程序 x

    一.介绍 在做题或者正式比赛过程中总会把水题做水做乱,但因为样例有坑所以直接过了样例,然后拿去评测结果发现全WA.那如何在这种情况下检查自己程序或算法的正确性呢?对拍是一个简便省事的方案. 所谓“对拍 ...

  4. Vue中的MVVM框架

    ViewModel:数据双向绑定 场景: 针对具有复杂交互逻辑的前段应用 提供基础的架构抽象 通过Ajax数据持久化,保证前端用户体验  什么是vue.js? 是一个轻量级的mvvm框架 数据驱动+组 ...

  5. 大数据笔记(三)——Hadoop2.0的安装与配置

    一.Hadoop安装部署的预备条件 准备:1.安装Linux和JDK. 安装JDK 解压:tar -zxvf jdk-8u144-linux-x64.tar.gz -C ~/training/ 设置环 ...

  6. Linux内核调试方法总结之序言

    本系列主要介绍Linux内核死机.异常重启类稳定性问题的调试方法. 在Linux系统中,一切皆为文件,而系统运行的载体,是一类特殊的文件,即进程.因此,我尝试从进程的角度分析Linux内核的死机.异常 ...

  7. 二进制安装MySQL5.6 MySQL5.7

    1:系统版本 [root@vhost1 ~]# cat /etc/redhat-release Red Hat Enterprise Linux Server release 6.5 (Santiag ...

  8. selinux的设置包括两个部分: 修改安全上下文和修改策略

    selinux的设置包括两个部分: 修改安全上下文和修改策略 修改安全上下文: chcon = change context: chcon 修改策略: setsebool 策略就是由很多boo类型的变 ...

  9. leetcode 46 全排列 (python)

    给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3]输出:[ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1]] ...

  10. 阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第2节 线程实现方式_1_并发与并行

    并发,相当于 一个人吃两个馒头,吃一口这个再吃一口另外一个.这里是cpu一会执行任务1,一会又执行任务2 并行,相当于两个人 吃两个馒头,各自吃各自的,这样速度就会快