导入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. 搞netty

    开始搞netty了 查了下资料 在使用NIO 的时候,最好不要配置 SO_LINGER,假设设置了该參数,在 close的时候如缓冲区有数据待写出,会抛出 IOException. // 在netty ...

  2. 调用newtonsoft.json反序列出错

    调用newtonsoft.json反序列出错: Newtonsoft.Json.JsonSerializationException: Cannot deserialize the current J ...

  3. [No000031]操作系统 Operating Systems 之Open the OS!

    从打开电源开始… 这神秘的黑色背后发生着什么?… 打开电源,计算机执行的第一句指令什么? 计算模型(图灵机) ⇒ 我们要 关注 指针IP 及其 指向的内容 看看x86 PC (1) 刚开机时CPU 处 ...

  4. maya 专家模式

    maya中按ctrl + 空格 可以在普通模式与专家模式之间切换,如图 普通模式 按ctrl+空格后进入专家模式 来自为知笔记(Wiz)

  5. django自带wsgi server vs 部署uwsgi+nginx后的性能对比

    一.下面先交代一下测试云主机 cpu: root@alexknight:/tmp/webbench-1.5# cat /proc/cpuinfo |grep model model : model n ...

  6. JS常用自定义方法

    1,JS生成随机数方法 getRandom(100),表示生成0-100的数 function getRandom(n){ return Math.floor(Math.random()*n+1) } ...

  7. MVC 图片预览

    1.页面cshtml <form name="frmInput" id="frmInput" method="post" action ...

  8. pip安装包报错:Microsoft Visual C++ 9.0 is required Unable to find vcvarsall.bat

    pip安装包报错:Microsoft Visual C++ 9.0 is required Unable to find vcvarsall.bat Windows7下pip安装包报错:Microso ...

  9. NOI2018准备 Day9

    tjvj清北入学测试又打了一上午,暴力搜索得了部分分,dp全崩了,8道题凑了500分. 下午打了个速度赛,成绩未知,另外又做了1道题,这效率low到爆!!!

  10. Windows 8的本地化应用程序清单

    I need to localize some data in application manifest (like name, description, splashscreen images et ...