1、效果

2、jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%String path = request.getContextPath();%><!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml"><head><title>案件推送列表</title><jsp:include page="/page/hcbh/api/module.jsp"></jsp:include><script type="text/javascript" src="<%=path %>/page/hcbh/api/taskpush/stats/echarts-5.3.1.js"></script><script type="text/javascript" src="<%=path %>/page/hcbh/api/taskpush/stats/zhzx.js"></script></head><body><%--    <div id="status" style="width: 600px;height:400px;"></div>--%><div id="zt" style="width: 600px;height:400px;"></div></body>

3、javascript

$(document).ready(function() {stats_zt();});/*** 按专题统计*/function stats_zt(){var url = "/gds/query/list.do";var data = {"c":"stats_ztmc"};var res =  ajaxData(url,data);// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('zt'));if(res.length === 0){//无数据展示myChart.setOption({title: {text: '暂无数据',x: 'center',y: 'center',textStyle: {color: '#65ABE7',fontWeight: 'normal',fontSize: 16}}});}else{var dataAxis = []; //X轴namevar dataYcz = []; //y轴-已处置var dataWcz = [];//y轴-未处置for (var i in res) {dataAxis.push(res[i].ztmc);dataYcz.push(res[i].ycz);dataWcz.push(res[i].wcz)}//绘制图表myChart.setOption({title:{text: '各专题处置情况统计',textAlign:'center',top:'4%',left:'50%'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},formatter: function (params) {var relVal = params[0].name;for (var i = 0, l = params.length; i < l; i++) {relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%'}return relVal;}},legend: {top:'90%' //图例置底},grid: {left: '3%',containLabel: true},xAxis: [{type: 'category',axisLabel: {//x轴文字的配置show: true,interval: 0,//使x轴文字显示全},data: dataAxis}],yAxis: [{type: 'value',axisLabel: {show: true,interval: 'auto',formatter: '{value}.0%'},show: true}],series: [{name: '已处置',type: 'bar',stack: 'Ad',emphasis: {focus: 'series'},label:{show:true,formatter:function(params){return params.value+'%';}},data:dataYcz},{name: '未处置',type: 'bar',stack: 'Ad',emphasis: {focus: 'series'},label:{show:true,color:'#fff',formatter:function(params){return params.value+'%';}},itemStyle:{ //修改柱状图颜色normal:{color:'#E98344'}},data: dataWcz}]});}window.onresize = myChart.resize;}

4、数据

【Echarts】堆积柱状图相关推荐

echarts堆积柱状图
第一次写echarts 堆积柱状图,需求的这样的: x轴有两列,并且鼠标移上去显示不同的内容. import * as echarts from 'echarts';var chartDom = do ...
Pyecharts 折线图与堆积柱状图结合的组合图绘画，折线图数据点在柱状图柱中心
问题/背景最近因科研需要,开始浅浅学习pyecharts,并记录在这个过程遇到的问题以及简单的解决办法. 在使用pyecharts画组合图时遇到了折线图的点无法对准柱状图中心的问题,在网上的文章只找 ...
ECharts系列 - 柱状图（条形图）实例一
ECharts主页: http://echarts.baidu.com/index.html ECharts-2.1.8下载地址: http://echarts.baidu.com/build/e ...
Vue：echarts的柱状图怎样按照比例缩小？
Vue:echarts的柱状图怎样按照比例缩小? 资源: vue制作echart图表随着画面等比例放大缩小第二种方法:在div中使用echarts,利用div的参数来限制echarts生成的图表的大 ...
Vue：echarts的柱状图为什么X轴上的文字不显示？
Vue:echarts的柱状图为什么X轴上的文字不显示? 资源: echarts x轴文字显示不全(解决方案) echarts柱状图X轴底部文字有的不显示出来?
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决参考文章: (1)ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决 (2)https://ww ...
前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图
Vue接入Echarts 显示柱状图饼图使用CLI接入 npm install echarts --save 1.可以全局引入(在main.js) // 引入echarts import echar ...
echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图
在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 在相应的vue中导入echarts ...
android 自定义横向堆积柱形图,MPAndroidChart项目实战（八）——自定义分段堆积柱状图...
一丶效果图 image.png 二丶需求分析及技术点 1.如效果图显示,当一样产品评论越多柱子越高可以展现热度,同一柱子不同颜色不同长度展示评论好坏对比, 自定义MarkView则显示详细数据,这就是 ...
circos 中堆积柱状图的画法
欢迎关注微信公众号<生信修炼手册>! 在之前的文章,我们介绍了如何使用histograms来构建普通的柱状图,今天看下如何构建堆积柱状图.先来看一个堆积柱状图的例子对应的数据如下: 和普 ...

【Echarts】堆积柱状图

1、效果

2、jsp

3、javascript

4、数据

【Echarts】堆积柱状图相关推荐

最新文章

热门文章