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. c++复习——类(2)

    1.this指针 this指针是一个指向对象的指针.  this指针是一个隐含于成员函数中的对象指针.  this指针是一个指向正在调用成员函数的对象的指针.  类的静态成员函数没有this指针 ...

  2. Leetcode 7. Reverse Integer(水)

    7. Reverse Integer Easy Given a 32-bit signed integer, reverse digits of an integer. Example 1: Inpu ...

  3. Python_021(内置方法讲解二)

    一.内置方法二 1.__del__方法: a:构造方法:创建一个空间,  析构方法;释放一个空间; b:触发del的情况:Python解释器的垃圾回收机制,和遇到 del 对象名 c:析构方法的思想: ...

  4. HPU personal training

    K - Two Contests 原题链接:https://agc040.contest.atcoder.jp/tasks/agc040_b?lang=en 题目大意: 给一个区间集合,将这些区间分为 ...

  5. Knapsack Cryptosystem

    Knapsack Cryptosystem 超大背包 折半查找 #include<bits/stdc++.h> using namespace std; typedef long long ...

  6. How to call javascript function on page load in asp.net

    How to call javascript function on page load in asp.net 解答1,使用RegisterStartupScript来运行 需要注意的是,下面的dem ...

  7. Ehrenfeucht–Fraïssé game back-and-forth games

    w https://en.wikipedia.org/wiki/Ehrenfeucht–Fraïssé game

  8. thinkphp5.0学习笔记(二)API后台处理与命名空间

    命名空间 先来看命名空间吧: 命名空间是学习TP的基础, <?php namespace app\lian\c1; class yi{ public $obj = "这是第一个空间里面 ...

  9. Java ——数组 选择排序 冒泡排序

    本节重点思维导图 数组 public static void main(String[] args) { int a ; a=3; int[] b; b = new int[3];//强制开辟内存空间 ...

  10. C++笔记(4)——引用及结构体

    引用 C++中有一个很方便的语法叫做引用,作用就是使得函数能够对传入的参数作出全局有效的改动.用法很简单,就是在传入参数的类型后面加上&就可以指明传入的参数是引用. 例子: #include ...