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 ...
随机推荐
- C#中的Stopwatch类简单使用
Stopwatch实例可以度量一个间隔的运行时间, 或度量多个间隔内所用时间的总和. 命名空间System.Diagnostics. 简单使用 using System; using System.D ...
- MyBatis系列（一） MyBatis入门
前言 MyBatis官方文档:https://mybatis.org/mybatis-3/zh/index.html MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由 ...
- shell 数组作为函数形参
问题描述: 把字符串tarFile和数组slaves_hostIP传入函数processArray中并输出结果. #!/bin/bash function processArray() { tarFi ...
- 微服务管理平台nacos虚拟ip负载均衡集群模式搭建
一.Nacos简介 Nacos是用于微服务管理的平台,其核心功能是服务注册与发现.服务配置管理. Nacos作为服务注册发现组件,可以替换Spring Cloud应用中传统的服务注册于发现组件,如:E ...
- Cannot forward after response has been committed问题的解决
Cannot forward after response has been committed问题解决及分析 通过TOMCAT把系统启动,可以正常登陆门户,登陆进去选择子系统的时候点击登陆的时候,可 ...
- Linux IO多路复用之epoll网络编程
前言 本章节是用基本的Linux基本函数加上epoll调用编写一个完整的服务器和客户端例子,可在Linux上运行,客户端和服务端的功能如下: 客户端从标准输入读入一行,发送到服务端 服务端从网络读取一 ...
- Linux-（2）Linux安装
二.Linux 安装 2.1 物理机安装 使用相关镜像制作软件(软碟通等)制作U盘启动盘即可,按照正常的安装步骤安装即可,一般来说(迷你版本)有线网卡直接会有驱动,无线网卡的驱动需要自行编译或者查找. ...
- Python操作redis和mongoDB
一.操作redis redis是一个key-value存储系统,value的类型包括string(字符串),list(链表),set(集合),zset(有序集合),hash(哈希类型).为了保证效率, ...
- 3年java开发竟然还不知道Lambda的这个坑
背景 有朋友反馈zk连接很慢.整理出zk连接的关键逻辑如下: 上面的代码造成第一次调用ClientZkAgent.getInstance的时候,需耗时10s, 这个时间恰好跟semaphore的超时时 ...
- native C++ 动态调用.NET DLL
关于这个问题找了好多地方,都只有第二种解决办法,可是我要返回一个字符串,没办法,继续找,最后还是在http://blogs.msdn.com/b/msdnforum/archive/2010/07/0 ...