echarts 双Y轴图表
直接代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js?_v_=1571424732409"></script>
</head>
<body>
<!--支出表-->
<div style="width: 1000px;height: 500px;background-color: #222222" id="test1">
</div>
</body> <script>
var chart1 = echarts.init(document.getElementById('test1'));
var option = {
title: [
{
top: '40%',
left: 10,
subtextStyle: {
align: 'left',
color: '#ffffff',
fontSize: 12,
},
subtext: '每\n月\n执\n行\n金\n额'// \n换行
},
{
top: '40%',
right: 10,
subtextStyle: {
align: 'right',
color: '#ffffff',
fontSize: 12,
},
subtext: '累\n计\n执\n行\n金\n额'
},
],
grid: {
top: 100
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(70, 131, 254, 0)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(70, 131, 254, 0.5)' // 100% 处的颜色
}],
global: false // 缺省为 false
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: [
{name: '每月预计支出', icon: 'circle'},
{name: '每月实际支出', icon: 'circle'},
{name: '累计预计支出'},
{name: '累计实际支出'}
],
textStyle: {
color: '#ffffff',
fontSize: 11
},
y: 'bottom',
x: 'center',
},
xAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
color: '#1F7EFF',
width: 1
}
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisPointer: {
type: 'shadow'
},
axisLabel: {
interval: 0,//横轴信息全部显示
textStyle: {
color: '#fff'
},
fontSize: 11,
// rotate:45,//度角倾斜显示
formatter: function (value) {
return value.length > 5 ? value.substring(0, 5) + '...' : value;
}
}
}
],
yAxis: [//这里配置两条Y轴
{
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: '#021439',
width: 1
}
},
axisLine: {
lineStyle: {
color: '#1F7EFF',
width: 1
}
},
axisLabel: {
show: true,
textStyle: {
color: '#fff'
},
fontSize: 11,
interval: 'auto',
formatter: '{value}'
},
name: '单位（万）',
nameTextStyle: {
color: '#fff'
}
},
{
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: '#021439',
width: 1
}
},
axisLine: {
lineStyle: {
color: '#1F7EFF',
width: 1
}
},
axisLabel: {
show: true,
textStyle: {
color: '#fff'
},
fontSize: 11,
interval: 'auto',
formatter: '{value}'
},
name: '单位（万）',
nameTextStyle: {
color: '#fff',
fontSize: 11,
}
}
],
series: [
{
name: '每月预计支出',
barWidth: '30%',
type: 'bar',
itemStyle: {
normal: {
lineStyle: {
color: '#E09C19'
},
color: '#5184F2',
}
},
yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
data: [
0
, 0
, 6
, 17
, 22
, 26
, 41
, 48
, 59
, 69
, 75
, 90
]
},
{
name: '每月实际支出',
barWidth: '30%',
type: 'bar',
itemStyle: {
normal: {
lineStyle: {
color: '#E09C19'
},
color: '#FF991E',
}
},
yAxisIndex: 0,
data: [
0
, 0
, 10
, 15
, 25
, 30
, 35
, 50
, 55
, 70
, 80
, 85
]
},
{
name: '累计预计支出',
barWidth: '30%',
type: 'line',
itemStyle: {
normal: {
lineStyle: {
color: '#E63234'
},
fontSize: 11,
color: '#E63234',
}
},
symbol: 'circle',
symbolSize: 10, //折线点的大小
yAxisIndex: 1, ////使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
data: [
0
, 0
, 6
, 23
, 45
, 71
, 112
, 160
, 219
, 288
, 363
, 453]
},
{
name: '累计实际支出',
barWidth: '30%',
type: 'line',
itemStyle: {
normal: {
lineStyle: {
color: '#42C96E'
},
fontSize: 11,
color: '#6AC3F1',
}
},
symbol: 'circle',
symbolSize: 10, //折线点的大小
yAxisIndex: 1,
data: [
0
, 0
, 10
, 25
, 50
, 80
, 115
, 165
, 220
, 290
, 370
, 455
]
},
],
}
;
chart1.setOption(option);
</script> </html>
echarts 双Y轴图表的更多相关文章
- echarts双y轴折线图柱状图混合实时更新图
先看下效果,自己用ps做了张gif图,发现很好玩啊..不喜勿喷 自己下载个echarts.min.js 直接上代码: <!DOCTYPE html><html><head ...
- echarts使用笔记四:双Y轴
1.双Y轴显示数量和占比 app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '数量和占比图 ...
- highchart 设置双Y轴坐标 双x轴坐标方法
我们的图表一旦引入了两种不同单位或者数量级相差很大的数据以后,这时候需要两种坐标对其进行计量. 下面以设置双Y轴为例, y轴坐标的参数设置成: yAxis: [{ title: { text: '坐标 ...
- Python教程：matplotlib 绘制双Y轴曲线图
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:数据皮皮侠 双X轴的可以理解为共享y轴 ax1=ax.twiny() ...
- Python实现双X轴双Y轴绘图
诈尸人口回归.这一年忙着灌水忙到头都掉了,最近在女朋友的提醒下终于想起来博客的账号密码,正好今天灌水的时候需要画一个双X轴双Y轴的图,研究了两小时终于用Py实现了.找资料的过程中没有发现有系统的文章, ...
- 绘制复数图形和双y轴图形
clearclct=0:0.1:2*pi;x=sin(t);y=cos(t);z=x+i*y;subplot(1,3,1)plot(t,z,'r') %注:这种方式下,不论参数t,z哪个是复数,都将忽 ...
- Jqplot使用总结之二(双Y轴)
最近需要用Jqplot做双Y轴的Chart图,首先我找到了文档上的例子并对数据做了一些调整: 1.例子展示: var s1 = [["2002-01-01", 112000], [ ...
- MSChart使用之双Y轴使用
protected void SearchChart() { Chart1.ChartAreas.Clear(); Chart1.Series.Clear(); ChartArea _ChartAre ...
- echarts统计图Y轴（或X轴）文字过长问题解决
echarts 统计图Y轴文字过长 在使用echarts时,出现数值非常大,Y轴又显示不下的情况就需要压缩Y轴数值刻度. 解决方法: yAxis: { type: 'value', axisLabel ...
随机推荐
- eclipse color theme 离线安装方法以及jar包
1. 用户可以点击下载eclipse-color-theme-update-site.zip或者下载我已经下载好的color jar包 2. 把文件com.github.eclipseco ...
- Docker系列之常用命令操作手册
目录 1.安装虚拟机 2.安装Docker 3.Docker镜像操作 4.Docker容器操作 Docker系列之常用命令操作手册 继上一篇博客Docker系列之原理简单介绍之后,本博客对常用的Doc ...
- 小白学 Python 爬虫（17）：Requests 基础使用
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...
- TableView 的优化
TableView 的优化 1 TableView 优化的原理: 当我们用APP 访问新闻的时候,新闻中的内容并不是我们都喜欢的内容,因此我们会快速的滑过,但是TableView的加载机制是 ...
- SQL Server 2019 深度解读：微软数据平台的野望
本文为笔者在InfoQ首发的原创文章,主要利用周末时间陆续写成,也算近期用心之作.现转载回自己的公众号,请大家多多指教. 11 月 4 日,微软正式发布了其新一代数据库产品 SQL Server 20 ...
- 一元建站-基于函数计算 + wordpress 构建 serverless 网站
前言 本文旨在通过 快速部署一个 wordpress 网站到阿里云函数计算平台 这个示例来展示 serverless web 新的开发模式, 包括 FUN 工具一键初始化 NAS, 同步网站到 NAS ...
- autocad 二次开发 最小包围圆算法
autocad 二次开发 最小包围圆算法 主要实现了在模型空间下的得到一个包围所有图元的最小圆,该算法的思路是这样:1.从点集中随机选出两个点作为直径对圆进行初始化.2.判断下一个点p是否在圆中,如果 ...
- python爬虫--数据解析
数据解析 什么是数据解析及作用 概念:就是将一组数据中的局部数据进行提取 作用:来实现聚焦爬虫 数据解析的通用原理 标签定位 取文本或者属性 正则解析 正则回顾 单字符: . : 除换行以外所有字符 ...
- 这道Java基础题真的有坑！我求求你，认真思考后再回答。
本文目录 一.题是什么题? 二.阿里Java开发规范. 2.1 正例代码. 2.2 反例代码. 三.层层揭秘,为什么发生异常了呢? 3.1 第一层:异常信息解读. 3.2 第二层:抛出异常的条件解读. ...
- PostgreSQL 、springboot 、spring data jpa 集成
项目地址:https://gitee.com/zhxs_code/PostgreSQL_springboot_jpa_demo.git 增删查改都已经实现. 重点部分: 1.定义自己的方言. pack ...