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 ...
随机推荐
- [leetcode] H-Index (Hash Table)
题目: Given an array of citations (each citation is a non-negative integer) of a researcher, write a f ...
- SQL语句中将形式（12/10/19 4:13:21 PM）转化为（2019-12-10）
convert(char(10),convert(datetime, H.TOEX_FIN_REJECT_TIMR)+1,20),
- Reveal分析工具的使用
首先:在reveal官网http://revealapp.com/下载适用版本.试用版本是30天免费,可以选择破解.破解链接http://pan.baidu.com/s/1bnc5wwn?errno= ...
- CF595 Div31249A,1249B1,1249B2,1249C1,1249C2,1249D1,1249D2,1249E,1249F）题解
A:水题,先排序,有相连的输出2,否则输出1. #include<bits/stdc++.h> using namespace std; #define pii pair<int,i ...
- BZOJ 1003[ZJOI2006]物流运输(SPFA+DP)
Problem 1003. -- [ZJOI2006]物流运输 1003: [ZJOI2006]物流运输 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: ...
- 当用python读取几十万行文本时，会出现什么状况？
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:accumulate_zhang 我在使用python读取几十 ...
- VS2013 MFC 库冲突引起的错误解决
http://www.cnblogs.com/rainbowzc/archive/2010/06/29/1767248.html 7 1>LIBCMT.lib(crt0dat.obj) : er ...
- 关注图像采集视频传输之USB3.0 应用
参考文献 百度文库 http://baike.baidu.com/link?url=82OyhoL1AsNaT35CvscmeZqHjlggtFw-Cez2qYwjLHNXGhXfv38pUlsIJB ...
- Callable接口实现线程
public class CallableDemo { public static void main(String[] args) throws Exception, ExecutionExcept ...
- 服务网格数据平面的关键：层层剖析Envoy配置
Envoy是一种高性能C++分布式代理,专为单个服务和应用程序设计.作为Service Mesh中的重要组件,充分理解其配置就显得尤为重要.本文列出了使用Envoy而不用其他代理的原因.并给出了Env ...