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 ...
随机推荐
- 安卓手机已保存WiFi密码查看助手(开源)
一.需求分析 最近电脑需要连接WiFi,却发现WiFi密码给忘记了.而手机里有保存过的WiFi密码,但是在手机的设置界面看不到. 虽然已经有一些可以查看WiFi密码的app,但是主要还是担心密码被那些 ...
- class 函数
cocos2d-x 3.3 lua 版本的class函数用法: local FightScene = class("FightScene", function() return c ...
- 创建Visual studio项目模板 vstemplate关键点纪要
from:http://www.cnblogs.com/stickman/p/3454719.html 经过多次的实验,终于完美生成一个.VSIX的项目模板安装包,其中遇到不少问题与挫折,久经goog ...
- C# 根据正则表达式来判断输入的是不是数字
最近在做输入判断的时候出现了一个需要判断输入合法性的问题,就是判断输入的是不是数字,判断方法是根据正则表达式来判断,具体方法如下: private bool IsRightNum(string str ...
- some basic graph theoretical measures
· mean characteristic path length calculated as the average length of the shortest path between two ...
- Linux虚拟机突然不能上网了
之前是可以的,然后这次打开突然不能上网了. 更改配置后就好了: 配置如下: 我的问题是打开打开之后变成了OFF不是ON了.然后不管怎么改变O都失败了. 改为: 这样虚拟机这边就好了. 我们看下wind ...
- Fragment生命周期
- Canvas之打字机游戏
最近针对粒子化作了一点点的探究,决定结合其做个小游戏,于是这个简单的打字游戏出世了. 试玩地址:Typewriter game 仅在chrome下测试,请谨慎使用其他浏览器(特别是ff):加载速度有 ...
- 知乎UWP 预览
又是很久都没有写博客了,为了表达歉意,奉上一个新的App,O(∩_∩)O! 因为商店的知乎太多了,然而,,所以一直打算自己动手写一个. 近段时间有些假期加上课程不是很忙,抽时间写了这个知乎.商店链接 ...
- JavaScript学习笔记-选择器集合调用方法
<script type="text/javascript"> function uu(namePd) { //判断id var reId = new RegExp(/ ...