Echarts-画叠加柱状图,双折线图
导入echarts包
<script src='../scripts/libraries/echarts/echarts-all.js'></script>
js如下
loadhyzsxygpsldjzzt_pjjlrzxt();
function loadhyzsxygpsldjzzt_pjjlrzxt(){
$.ajax({
url : webPath + '/neeqgpqy/zjghyzsxygpslAndnpjjlr',
type : 'post',
dataType : 'json',
data:{
},
success : function(data) {
console.log(data);
var names=[];
var xycounts=[];
var zscounts=[];
var xypjjlrs=[];
var zspjjlrs=[];
for(var i=(data.list.length-1);i>=0;i--){
names.push(data.list[i].name);
xycounts.push(data.list[i].xycount == null ?0:data.list[i].xycount);
zscounts.push(data.list[i].zscount == null ?0:data.list[i].zscount);
xypjjlrs.push(data.list[i].xypjjlr == null ?0:data.list[i].xypjjlr);
zspjjlrs.push(data.list[i].zspjjlr == null ?0:data.list[i].zspjjlr);
}
drawZZTZXTBJ(names,xycounts,zscounts,xypjjlrs,zspjjlrs);
}
}); } function drawZZTZXTBJ(names,xycounts,zscounts,xypjjlrs,zspjjlrs){
console.log(zspjjlrs);
var myChart = echarts.init(document.getElementById('main2'));
myChart.setOption({
title : {
text : ""
},
tooltip : {
trigger : 'axis',
showDelay : 0, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data:['做市','协议','做市平均净利润','协议平均净利润']
},
xAxis : [
{
type : 'category',
data : names
}
],
yAxis : [
{
type : 'value',
name : '企业数量',
axisLabel : {
formatter: '{value}'
}
},
{
type : 'value',
name : '净利润',
axisLabel : {
formatter: '{value}'
}
}],
series : [ {
name:'做市',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:zscounts
},
{
name:'协议',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:xycounts
},
{
name:'做市平均净利润',
type:'line',
yAxisIndex: 1,
data:zspjjlrs
},
{
name:'协议平均净利润',
type:'line',
yAxisIndex: 1,
data:xypjjlrs
}
]
});
}
html
<div class="chart" id="main2" style="margin-bottom:-70px;margin-top:-50px;"></div>
Echarts-画叠加柱状图,双折线图的更多相关文章
- Vue中使用ECharts画散点图加均值线与阴影区域
[本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...
- FusionCharts,双折线图和双柱状图
一个电商项目中,用到了"双柱状图",对比 当前库存和累计库存. 网上找了好几个贴子,才找到具体用法. 代码整理下,以备不时之需. 效果图-双折线图 效果图-双柱状图 <%@ ...
- 使用echarts画一个类似组织结构图的图表
昨天,写了一篇关于圆环进度条的博客(请移步:Vue/React圆环进度条),已经烦不胜烦,今天又遇到了需要展示类似公司的组织结构图的功能需求,要冒了!!! 这种需求,自己用div+css也是可以实现的 ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- Asp.net 用 Graphics 统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- WPF用SkewTransform画3D柱状图
WPF用SkewTransform画3D柱状图 SkewTransform主要是对控件实现一种2-D扭曲,具体内容可以查看以下链接: http://msdn.microsoft.com/zh-cn/l ...
- Echarts数据可视化series-radar雷达图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-line线图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-graph关系图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
随机推荐
- HOLOLENS的空间管理
http://blog.csdn.net/sun_t89/article/details/52460272
- [No000035]操作系统Operating System之OS Interface操作系统接口
接口(Interface) 仍然从常识开始… 日常生活中有很多接口:电源插座:汽车油门… 那什么是接口? 连接两个东西.信号转换.屏蔽细节… Interface: electrical circuit ...
- 转:软件架构入门 (from 阮一峰)
说明:其中讲到了 5 种的架构模型,很不错. from: http://www.ruanyifeng.com/blog/2016/09/software-architecture.html
- 基于JSch的Sftp工具类
本Sftp工具类的API如下所示. 1)构造方法摘要 Sftp(String host, int port, int timeout, String username, String password ...
- 十大经典排序算法总结——JavaScrip版
首先,对于评述算法优劣术语的说明: 稳定:如果a原本在b前面,而a=b,排序之后a仍然在b的前面:即排序后2个相等键值的顺序和排序之前它们的顺序相同 不稳定:如果a原本在b的前面,而a=b,排序之后a ...
- SEO初级优化--HTML、CSS、JS
HTML: 1.标签的有开有合. 2.避免冗余代码,例如去除空格字符. 3.合理利用标签语义化. 4.合理的嵌套规则,避免行元素内嵌套块元素. 5.img标签内需要添加title属性和alt属性. 6 ...
- 【转】aspx与aspx.cs的关系
原文地址: http://www.cnblogs.com/axzxs2001/archive/2009/01/19/1378383.html 在vs中,有很多朋友问起,在一个网站项目中的aspx和as ...
- 【分布式协调器】Paxos的工程实现-cocklebur简介(二)
Cocklebur集群的工作原理 在集群正常工作时,整个集群只会有一个Leader,其他都是Follower.Client可以注册到某个Follower,当然也可以注册到Leader,为了减轻Lead ...
- [PGM] I-map和D-separation
之前在概率图模型对概率图模型做了简要的介绍.此处介绍有向图模型中几个常常提到的概念,之前参考的多为英文资料,本文参考的是<概率图模型-原理与技术的>中译版本.很新的书,纸质很好,翻译没有很 ...
- 学习SQLite之路(二)
下面就是真正关于数据库的一些知识了: 20160614更新 参考: http://www.runoob.com/sqlite/sqlite-tutorial.html 1. SQLite创建表: 基本 ...