导入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-画叠加柱状图,双折线图的更多相关文章

  1. Vue中使用ECharts画散点图加均值线与阴影区域

    [本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...

  2. FusionCharts,双折线图和双柱状图

    一个电商项目中,用到了"双柱状图",对比 当前库存和累计库存. 网上找了好几个贴子,才找到具体用法. 代码整理下,以备不时之需. 效果图-双折线图 效果图-双柱状图 <%@ ...

  3. 使用echarts画一个类似组织结构图的图表

    昨天,写了一篇关于圆环进度条的博客(请移步:Vue/React圆环进度条),已经烦不胜烦,今天又遇到了需要展示类似公司的组织结构图的功能需求,要冒了!!! 这种需求,自己用div+css也是可以实现的 ...

  4. C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  5. C# 绘制统计图(柱状图, 折线图, 扇形图)

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  6. Asp.net 用 Graphics 统计图(柱状图, 折线图, 扇形图)

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  7. WPF用SkewTransform画3D柱状图

    WPF用SkewTransform画3D柱状图 SkewTransform主要是对控件实现一种2-D扭曲,具体内容可以查看以下链接: http://msdn.microsoft.com/zh-cn/l ...

  8. Echarts数据可视化series-radar雷达图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  9. Echarts数据可视化series-line线图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  10. Echarts数据可视化series-graph关系图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

随机推荐

  1. java中“@Deprecated”的意思

    例如:Java内在的File类中有如下方法 @Deprecatedpublic URL toURL() throws MalformedURLException {return new URL(&qu ...

  2. java的多线程总结

    在java中要想实现多线程,有两种手段,一种是继续Thread类,另外一种是实现Runable接口. 对于直接继承Thread的类来说,代码大致框架是: class 类名 extends Thread ...

  3. NOIP提高组2010 关押罪犯

    题目描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨气值”(一个正整数值)来表示 ...

  4. python-day02数据类型-字符串和列表的操作

    while循环: while True: 条件语句....... 关于break和continue,break:跳出当前的循环                               contnu ...

  5. Jenkins 安装

    1. 调整tomcat的jvm配置, 以免内存不够, 在catalina.sh中 #!bin/sh下添加 JAVA_OPTS="-server -Xms1024m -Xmx1024m -XX ...

  6. php中创建和调用webservice接口示例

    php中创建和调用webservice接口示例   这篇文章主要介绍了php中创建和调用webservice接口示例,包括webservice基本知识.webservice服务端例子.webservi ...

  7. noip2008 双栈排序

    题目描述 Description \(Tom\)最近在研究一个有趣的排序问题.如图所示,通过\(2\)个栈\(S_1\)和\(S_2\),\(Tom\)希望借助以下\(4\)种操作实现将输入序列升序排 ...

  8. BZOJ 1096 【ZJOI2007】 仓库建设

    Description L公司有N个工厂,由高到底分布在一座山上.如图所示,工厂1在山顶,工厂N在山脚.由于这座山处于高原内陆地区(干燥少雨),L公司一般把产品直接堆放在露天,以节省费用.突然有一天, ...

  9. Linux 信号详解二(信号分类,信号处理,kill)

    信号分类 信号分为可靠信号和不可靠信号 不可靠信号的缺点 ①:处理完信号,需要重新再注册信号:②信号可能丢失. Linux已经对缺点①做了优化,现在的不可靠问题主要指的是信号可能丢失 信号还可以分为实 ...

  10. noi题库(noi.openjudge.cn) 1.8编程基础之多维数组T11——T20

    T11 图像旋转 描述 输入一个n行m列的黑白图像,将它顺时针旋转90度后输出. 输入 第一行包含两个整数n和m,表示图像包含像素点的行数和列数.1 <= n <= 100,1 <= ...