echarts柱状图怎么显示数值

这是我的jsp页面

    <script type="text/javascript">
    //这里的内容会在文档加载完毕时执行 
    mini.parse();
    $(function(){
            $.ajax({
                url:"../servlet/ServletTransmit?action=GSPXJA",//要请求的服务器url 
                //这是一个对象,表示请求的参数,两个参数:method=ajax&val=xxx,服务器可以通过request.getParameter()来获取 
                //data:{method:"ajaxTest",val:value},  
                //data:{email:value},  //这里的email对应表单中的name="email",也是发送url中的email=value(GET方式)
                async:true,   //是否为异步请求
                cache:false,  //是否缓存结果
                type:"get", //请求方式为POST
                dataType:"json",   //服务器返回的数据是什么类型 
                success:function(result){  //这个方法会在服务器执行成功是被调用 ,参数result就是服务器返回的值(现在是json类型) 
                    var xAxis="\[";

// var legend="[\'新收\',\'旧存\',\'已结\']";
var legend="[\'新收\',\'已结\']";
var data="[";
for(var i=0;i xAxis+="\'"+result[i].bmmc+"\',";
}
legend=mini.decode(legend);
for(var i=0;i data+="\{name:'"+legend[i]+"',type:'bar',";
var temp="\[";
for(var j=0;j if(legend[i]=="新收")
temp+=result[j].xs+",";
// else if(legend[i]=="旧存")
// temp+=result[j].jc+",";
else if(legend[i]=="已结")
temp+=result[j].yj+",";
}
temp=temp.substring(0, temp.length-1)+"\]";
data+="data:"+temp+"},";
}
xAxis=xAxis.substring(0, xAxis.length-1)+"\]";
data=data.substring(0, data.length-1)+"\]";
// alert(data);
LoadingChart("2016年1月1日至各审判业务部门收结案数情况",legend,mini.decode(xAxis),mini.decode(data),"div1","1");

                }
            })
        });
    </script>

        ---------------------------------------------------------------------------------
        这是我的 js
        mini.parse();

function LoadingChart(text,legend,xAxis,series,div,type){
var xValue="";
var yValue="";
if(type=="1"){
xValue=[{"data":xAxis,"boundaryGap" : [ '80%', '80%' ],"axisLabel" : {"show":true,"rotate": 30,"interval": '0'},"type":'category'}];
yValue={"type" : 'value'};

}
else{
    yValue=[{"data":xAxis,"boundaryGap" : [ '80%', '80%' ],"axisLabel" : {"show":true,"rotate": 30,"interval": '0'},"type":'category'}];
    xValue=[{"type" : 'value'}];

}
var json = 
    {
        "animationDuration":3500,
        "title" : 
        {
            "text" : text,
            "x" : 'center',
            "textStyle":
            {
                "fontSize":'24px',
                "color":'#34A1D6',
                "fontFamily":'宋体'
            }
        },
        "color":['#0a6db3','#fb7c00','#D97A80','#2EC8CA','#FEB980','#cd5c5c','#ffa500','#40e0d0','#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700','#6b8e23','#ff00ff','#3cb371','#b8860b','#30e0e0'],
        "backgroundColor":'#E7F3FF',
        "tooltip" : {
            "trigger": 'axis',
            "textStyle":
             {
                "fontSize":15,
                "fontFamily":'宋体'
             }
        },
     "calculable" : true,
     "legend" : 
     {
        "show" : (legend.length > 1 ? true : false),
        "orient" : 'horizontal',
        "x" : 'center',
        "y":'30',
        "data" : legend,
        "itemWidth": 14,
        "itemHeight":10,
        "padding":3,
        "itemGap":3,
        "textStyle":
        {
            "fontSize":"16px",
            "fontFamily":'宋体'
        }
      },
     "toolbox": 
    {
        "show" : true,
        "x":'right',
        "y":'top',
        "itemSize":14,
        "itemGap":5,
        "feature" : 
        {
            "dataView" : 
            {
                "show" : true,
                "readOnly": true,
            },
            "saveAsImage" : 
            {
                "show" : true
            }
        }
    },
        "xAxis" :xValue,
        "yAxis" : yValue,
        "series" : series,
        "series" : { itemStyle: { normal: {label : {show: true, position: 'top'}}}}


    };
var myChart = echarts.init(document.getElementById(div));
myChart.setOption(json);

}

        在线等

2个回答

有个参数叫toolTip好像 具体你看官网 API介绍很详细

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
echarts柱状图显示数值
echarts2: itemStyle : { normal: {label : {show: true, position: ‘top’}}},echarts3: label:{ normal:{ show: true, position: ‘inside’} },
【echarts】柱状图上方显示数值
使用官网的例子,只不过加了itemStyle属性 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;ECharts&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;!-- 为ECharts准备一个具备大小(宽高)
echarts柱状图不同颜色与显示数值
这几天要用echarts做一个井盖数量查询的柱状图,有几个要求: 1、要将柱体代表的数值显示在柱体顶部。 2、每个柱体要用不同的颜色显示。
在线等~请教echarts柱状图怎么显示数值
这是我的jsp页面rn rnrnrn-----------------------------------------------------------------------------------------------------------------------------------------------------------------rnrn 这是我的 jsrnrn mini.parse();rnfunction LoadingChart(text,legend,xAxis,series,div,type)rnvar xValue="";rnvar yValue="";rnif(type=="1")rnxValue=["data":xAxis,"boundaryGap" : [ '80%', '80%' ],"axisLabel" : "show":true,"rotate": 30,"interval": '0',"type":'category'];rnyValue="type" : 'value';rnrnelsern yValue=["data":xAxis,"boundaryGap" : [ '80%', '80%' ],"axisLabel" : "show":true,"rotate": 30,"interval": '0',"type":'category'];rn xValue=["type" : 'value'];rnrnrnvar json = rn rn "animationDuration":3500,rn "title" : rn rn "text" : text,rn "x" : 'center',rn "textStyle":rn rn "fontSize":'24px',rn "color":'#34A1D6',rn "fontFamily":'宋体'rn rn ,rn "color":['#0a6db3','#fb7c00','#D97A80','#2EC8CA','#FEB980','#cd5c5c','#ffa500','#40e0d0','#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700','#6b8e23','#ff00ff','#3cb371','#b8860b','#30e0e0'],rn "backgroundColor":'#E7F3FF',rn "tooltip" : rn "trigger": 'axis',rn "textStyle":rn rn "fontSize":15,rn "fontFamily":'宋体'rn rn ,rn "calculable" : true,rn "legend" : rn rn "show" : (legend.length > 1 ? true : false),rn "orient" : 'horizontal',rn "x" : 'center',rn "y":'30',rn "data" : legend,rn "itemWidth": 14,rn "itemHeight":10,rn "padding":3,rn "itemGap":3,rn "textStyle":rn rn "fontSize":"16px",rn "fontFamily":'宋体'rn rn ,rn "toolbox": rn rn "show" : true,rn "x":'right',rn "y":'top',rn "itemSize":14,rn "itemGap":5,rn "feature" : rn rn "dataView" : rn rn "show" : true,rn "readOnly": true,rn ,rn "saveAsImage" : rn rn "show" : truern rn rn ,rn "xAxis" :xValue,rn "yAxis" : yValue,rn "series" : series,rn "series" : itemStyle: normal: label : show: true, position: 'top'rnrnrn ;rnvar myChart = echarts.init(document.getElementById(div));rnmyChart.setOption(json);rnrnrn求大神帮忙,小女子万分感激
echarts柱状图显示百分比
1.没有百分比的源码: &lt;!DOCTYPE html&gt; &lt;html style="height: 100%"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body style="height: 100%; margin: 0"&gt; &lt;di...
echarts 显示柱状图
1、引入 &amp;lt;script type=&quot;text/javascript&quot; src=&quot;/Common/echarts/echarts.js?v=636474012741000281&quot;&amp;gt;&amp;lt;/script&amp;gt; 2、添加容器 &amp;lt;div id=&quot;main&quot; style=&quot;height:100%;width:100%&quot;&amp;gt;&amp;lt;/div&amp
Echarts显示柱状图与饼状图
&amp;lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=UTF-8&quot; pageEncoding=&quot;UTF-8&quot;%&amp;gt; &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;日志信息图&amp;lt;/title&amp;gt; &amp
echarts柱状图虚线显示
最后一个柱状图虚线显示 option = {     color: ['#3398DB'],     tooltip : {         trigger: 'axis',         axisPointer : {            // 坐标轴指示器,坐标轴触发有效             type : 'shadow'        // 默认为直线,可选为:'
ECharts柱状图百分比显示
ECharts柱状图百分比显示 //shop为div的id var city_all_bar =  echarts.init(document.getElementById("shop")); city_all_bar.setOption({ tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 's
ireport柱状图显示数值
设置如下属性即可:
echarts雷达图显示数值
echarts雷达图显示数值: label用于显示数值,具体代码如下: option = { title: { text: '基础雷达图' }, tooltip: {}, radar: { indicator: [ { name: '苹果', max: 6500}, { name: '西
echarts 为柱状图添加数值线
情景:需要给柱状图的数据加个比较强烈的对比 如图 思路是给加上两条最大最小的markline,并根据具体数值大小来改变线的颜色 js控制方法 var colorList = []; if(_seriesData[0]>_seriesData[1]){ colorList = ['#00D8CD','#FA8565']; }else{ colorList = ['#FA8565','#00
echarts 柱状图头部显示头像
var app = angular.module("app", ['ngDatepicker']);     app.controller("AppController", function ($scope, $http) {         //搜索         $scope.searchData = function () {             try {
echarts 柱状图数字在顶部显示
代码: series: [ { name: '协助缴费次数', type: 'bar', data: dataArray }, { name: '协助缴费金额', type: 'line', data: dataArray2 ...
echarts柱状图显示太靠左
[javascript]view plaincopy 如下图所示: [javascript]view plaincopy 解决方案: grid: { x: '30%', //相当于距离左边效果:padding-left y: '30%', //相当于距离上边效果:padding-top bottom: '3%', ...
echarts成绩柱状图显示代码
echarts成绩柱状图显示代码
echarts,柱状图不显示0
echarts,柱状图,数据为0时,不显示0 1: 数据传入时判断如果为0替换成“”。 2: series-&amp;gt;label–&amp;gt;formatter里可以配置(回调函数) formatter: function(params) { if (params.value &amp;gt; 0) { return params.value; } else { return ‘’; } }, 亲测有效,第二...
echarts 柱状图
    初始化柱状图 JS方法: var unitsAbnormalVol; var htmlFs = $(&quot;html&quot;).css(&quot;font-size&quot;).replace(&quot;px&quot;, &quot;&quot;) * 1; function initSpecialLeft(){ var url = CONTEXTPATH + '/widescreen/special/left'; var from...
echarts柱状图
引入echarts的js包echarts.min.js 事例地址:echarts.baidu.com/examples.html#chart-type-bar http://echarts.baidu.com/echarts2/doc/example.html 官网地址:http://echarts.baidu.com/index.htmlbody中<!-- 为 ECharts 准备一个具备大
echarts的柱状图
option = { width:766, backgroundColor: '#fff', legend: { data:['增量', '存量', ], x:'center' }, tooltip: { ...
jfreechart 柱状图显示数值。。急
[img=https://img-bbs.csdn.net/upload/201309/26/1380181880_832350.jpg][/img]rnrnrn如图,当显示100%,或者接近时,数值就被隐藏掉了。。。这个如何解决???求大神啊。。
Echarts折线图line-stack数值和数值显示不一致
官网的例子: https://echarts.baidu.com/examples/editor.html?c=line-stack 截取一小段代码 { name:'邮件营销', type:'line', stack: '总量', data:[120, 132, 101, 134, 90, 230, 210] }, 发现红色线条数值为0,却和覆盖了绿色的线条 百思...
echarts柱状图上显示数值
option = {     xAxis: {         type: 'category',         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']     },     yAxis: {         type: 'value'     },     series: [{          itemStyle: { ...
ECHarts柱状图、地图散点图并列显示练习
效果图 鼠标放上去显示数据   &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;The International DOTA2 Championships&amp;lt;/title&amp;gt; &amp;lt;!-- 引入 ech
echarts 柱状图 柱顶部显示数字
echarts 柱状图 柱顶部显示数字 series : [ { type:'bar', barWidth:50, data:[10, 52, 200, 334, 390, 330, 220], itemStyle: { ...
echarts 实现柱状图左右横向对比显示
重点看代码中的注释 : 处理负半轴的数据显示,后台传负数,代码中处理显示时为正数 接下来直接上代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;对比柱状图&lt;/title&gt; &lt;script type...
echarts 实现柱状图左右横向显示
具体实现代码如下 解决echarts 负轴,浮动负数,等的显示 function chart_rkk(){ var rkkchart=echarts.init(document.getElementById('rkkDiv')); var ageArea = [ '0~10','11~30','30~60','60~100','100以上']; var FbarData
echarts柱状图图例不显示的问题
要达到的效果如图: 废话不多说,直接上代码: 如果想要图例有效果,legend中数据要和series中name的值保持一致,切记切记,这是我曾经遇到的坑,不保持一致是没有效果的...
echarts柱状图的x轴文字纵向显示
在xAxisLabel中使用formatter回调函数实现换行,就能实现文字纵向显示。。 具体代码如下所示: axisLabel:{ formatter:function(value){ return value.split(&quot;&quot;).join(&quot;\n); } } 具体实现代码如下: 实现效果如下图: ...
echarts柱状图或折线顶端显示数字
在series 如果已经有itemStyle就在它里面添加 series : [ { name : '情报量', type : 'bar', barWidth : '50%', itemStyle : { normal : { label: { show: true, position: 'to...
Echarts实现柱状图显示部门分布
点击查看员工分布触发ajax请求 echarts请求被Controller层拦截解析跳转到Echarts.jsp &amp;lt;%-- Created by IntelliJ IDEA. User: 96384 Date: 2018/7/19 Time: 20:30 To change this template use File | Settings | File Tem...
Echarts中堆叠柱状图之百分比显示
需求:tooltip显示其数量之外,还需在旁边显示该数量所占总数的百分比,具体效果图如下: 相关资料 参考属性链接:http://echarts.baidu.com/option.html#tooltip.formatter echarts的tooltip中的一个属性formatter:提示框浮层内容格式器,支持字符串模板和回调函数两种形式。 # 字符串模板 折线(区域)图、柱状...
Echarts 柱状图x轴显示全部类目
xAxis : [ { type : 'category', data : ['类目1','类目2','类目3','类目4','类目5'], axisLabel :{
ECharts 没有数据时柱状图不显示
[img=https://img-bbs.csdn.net/upload/201705/19/1495176359_995468.jpg][/img]
echarts动态加载数据,显示柱状图,饼图图表
第一次写博客,有点小激动。公司正在开发的web版固定资产管理软件,需要做报表,需要直观的显示一些领导感兴趣的数据。就想到百度的echarts啦,关于echarts,请移步echarts首页
Mui popover 弹框显示Echarts柱状图
Mui作为应用于App开发的前端框架,确实强大.今天,就来分享在Mui popover弹框这一强大功能中遇到的问题,以及解决办法. 首先,HBuilder X中提供有来自官网的HelloMui项目,里面有各种功能的实例,只不过都是一些静态数据,和Echarts官网实例一样.在实际开发中,我们遇到的问题,基本上不会是静态数据(ps:静态数据copy总不会错吧),对于处理动态数据,跟静态数据还是有很大...
echarts柱状图 显示数量和所占比例
需求:用echarts制作柱状图,鼠标放到柱上时显示人数和所占比例 js代码: 先引入echarts.min js依赖 后: var tradenum = '${tradenum}'; var option = { tooltip : { trigger: 'item', formatter: f...
echarts中国地图上显示柱状图,并且柱状图可点击
先放效果图~~点击之后~~(数据和标题可动态变化)话不多说,直接上代码&amp;lt;link rel=&quot;shortcut icon&quot; href=&quot;${ctx}/static/img/favicon.ico&quot;&amp;gt; &amp;lt;link rel=&quot;stylesheet&quot; href=&quot;${ctx}/static/layui_v2/css/layui.css&quot;&amp;gt; &amp;lt;link rel=&am
ECharts 更新柱状图数据
ECharts 更新柱状图数据最近使用Echarts的时候,想要先加载出图表的大概框架样式,再加载数据,之后再定时刷新数据,这样就不用每次重新加载样式,减轻浏览器负担。 之前像pie类型都可以先initOption,再setData进去。 可是现在的bar类型却不可以,弄了很久找到一个方案,要先给他一个默认的初始值,之后再setData就可以了。这是失败的图表,没有给赋初值的时候。这是成功的图
ECharts浮动柱状图
function cityTimeCount(){     var myChartOne = echarts.init(document.getElementById('cityTimeCount'));     optionOne = {         tooltip : {             trigger: 'axis',             axisPointer :
相关热词 c# 标准差 计算 c#siki第五季 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池