echart 折线渐变 加柱形图结合图形,左右纵轴自设置格式,现行图北京渐变 ,x轴字体倾斜
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轴字体倾斜的更多相关文章
- 微信小程序echart 折线图legend不显示的问题
最近使用小程序echart折线图,遇到表头一直不显示问题,查询之后解决方案:
- 现代3D图形编程学习-环境设置
本书系列 现代3D图形编程学习 环境设置 由于本书中的例子,均是基于OpenGL实现的,因此你的工作环境需要能够运行OpenGL,为了读者能够更好的运行原文中的示例,此处简单地介绍了linux和win ...
- HighCharts之2D柱状图、折线图的组合多轴图
HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...
- HighCharts之2D柱状图、折线图的组合双轴图
HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...
- ajax-json,遇到的一个问题,jquery var ,加载顺序。JS对象,json格式转换。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Highcharts 3D柱形图;Highcharts 堆叠3D柱形图;Highcharts 3D饼图;Highcharts 3D圆环图
Highcharts 3D柱形图 配置 chart.options3d 配置 以下列出了 3D 图的基本配置,设置 chart 的 type 属性为 column,options3d 选项可设置三维效 ...
- R语言与医学统计图形【5】饼图、条件图
R语言基础绘图系统 基础图形--饼图.克利夫兰点图.条件图 6.饼图 pie(rep(1,26),col=rainbow(26), labels = LETTERS[1:26], #标签 radius ...
- 用echartsjs 实现动态绘制折线、柱状等图形,并实现多图联动效果
echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...
- echart折线图系列一:折线图基本配置
引入echart插件 页面上准备一个容器:<div id="box" style="height:400px;width: 800px;padding: 20px& ...
随机推荐
- 【30分钟学完】canvas动画|游戏基础(2):从零开始画画
前言 上篇主要是理论的概述,本篇会多些实践,来讲讲canvas的基础用法,并包含一些基础三角函数的应用,推荐没有canvas基础的朋友阅读,熟悉的朋友可以跳过. 本人能力有限,欢迎牛人共同讨论,批评指 ...
- 在Ubuntu18.04下安装Java 11
一直以来,本人都使用第三方软件包"ppa:linuxuprising/java"安装Java JDK,最近一次安装时发现无法成功.这是由于现在无法直接从Oracle官网下载Java ...
- GitHub最著名的20个Python机器学习项目
GitHub最著名的20个Python机器学习项目 我们分析了GitHub上的前20名Python机器学习项目,发现scikit-Learn,PyLearn2和NuPic是贡献最积极的项目.让我们一起 ...
- 关于 Visual stdio 编译报错:error MSB6006: “CL.exe”已退出
网上查看,原因有多种. 1,我自己遇到的是这样的: 环境:VS2019,编译项目 image-master,中间自己重整了原来的目录,移动了很多文件.编译报错:error MSB6006: “CL.e ...
- OKHttp3 简介与使用
一.简介 Android系统提供了两种HTTP通信类:HttpURLConnection和HttpClient,前者对比后者十分难用. 网络请求进化:HttpURLConnection --- Apa ...
- Delphi XE2 之 FireMonkey 入门(15) - 滤镜: 获取滤镜信息
滤镜类的继承关系: TObject -> TPersistent -> TFilter -> TShaderFilter -> { 具体的滤镜类 } //下面例子首先会用到 F ...
- 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_02 泛型_1_泛型的概念
ArrayList的源码,.在定义的时候用到了E这个E就是一个未知类型 ArrayList里面的add方法,参数也是E 包括我们之前常用的get方法 返回值也是E 类型什么时候可以确定呢?创建集合对象 ...
- Docker安装及部署实例.Net Core
1.什么是Docker Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱 ...
- sudo: pip:找不到命令
https://blog.csdn.net/fcku_88/article/details/84191288
- R语言平均值,中位数和众数
R语言平均值,中位数和众数 R中的统计分析通过使用许多内置函数来执行的.这些函数大部分是R基础包的一部分.这些函数将R向量与参数一起作为输入,并在执行计算后给出结果. 我们在本章中讨论的是如何求平均值 ...