echart 图表问题

最新推荐文章于 2024-03-15 16:04:32 发布
最新推荐文章于 2024-03-15 16:04:32 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： echart 文章标签： 函数 echarts3-0-柱状图-斜
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/this_tall_people/article/details/74212012
版权

echart 网址 : http://echarts.baidu.com/index.html

纵坐标的最大值

//计算最大值
    var getMax=function(arr,ifnumber){
        var newArr=[];
        for (var i = 0; i < arr.length; i++) {
            newArr.push(arr[i]);
        }
        for (var i = 0; i < newArr.length; i++) {
            if(isNaN(newArr[i])){
                newArr[i]=0;
            }
        }
        if (isNaN(Math.max.apply(null,newArr))||Math.max.apply(null,newArr)<=1) {
            if(ifnumber==undefined || ifnumber==''){
                return 1;
            }else{
                return 10;
            }
        }else if(isNaN(Math.max.apply(null,newArr))||Math.max.apply(null,newArr)<=10){
            return 10;
        }else{
            var max = Math.max.apply(null,newArr); 
            //获得数组的最大值
            var num = Math.ceil(max / Math.pow(10,String(Math.ceil(max)).length-1) );
            max = Math.pow(10,String(Math.ceil(max)).length-1 )*num;
            return max;
        }
    }

堆叠柱状图

比较完整

任何要显示给用户看的数据或者数据格式都要在tooltips设置 formatter: function (params)，params参数是个神奇的参数

data:[
        [日期],
        [数据百分比],
        [数据总量],
        [legend 值]
    ]
var allSeries=[],
        lengdata = [],
        biao=[],
        all=[],
        topp='',
        len = data.length,
        lenfo = data[len-1].length;
        var j=0;
        //Series显示的数据
        for(var i=0;i<lenfo-1;i++){
              lengdata[i] = data[len-1][i+1];
              allSeries[i] = {};
              allSeries[i].name =data[len-1][i+1];
              allSeries[i].type = 'bar';
              //类型为柱状图
              allSeries[i].stack = '总量';
              allSeries[i].barMinWidth = 10;
              柱子的大小
              allSeries[i].barMaxWidth =28;
              allSeries[i].barGap =3;
              allSeries[i].left =20;
              allSeries[i].itemStyle =   {"normal":{"barBorderRadius":0}};
              allSeries[i].data = data[i+1];
     }

    for(var i=lenfo;i<len-1;i++){
        //显示的数量值
        biao[j] = data[i];
        j++;
    }
    if (data[len-1][0].search('TM Number') == '-1' ) {
        topp = 25; }
    else{
        topp =22;
    }
        var chart = echarts.init(document.getElementById(containerId, 'infographic'));
        chart.setOption({
            tooltip : {
                 trigger: 'axis',
                 //指示器
                 axisPointer:{
                    type: 'line',
                    lineStyle: {
                      color: '#008FD4',
                      width: '2'
                    }
                 },
                 position: function (point, params, dom, rect, size) {
                    // 固定在顶部
                    return [point[0]+15, point[1]+15];
                },
                //鼠标移入显示的值
                formatter: function (params) {

                 var jj="";
                for (var i = 0; i < params.length; i++) {
                    var index = params[i].dataIndex;
                    var biaodata='';
                      if (params[i].seriesName =='other' || params[i].seriesName =='sone' ) {
                          biaodata = biao[0][index] ;
                      }

                      else
                         biaodata = biao[6][index];
                    jj +='<br/>' + '<div style="width: 15px;height: 10px;border-radius:2px;background:'+params[i].color+';display: inline-block;"></div>'+' '+params[i].seriesName+':'+params[i].value+'%('+biaodata+')';
                }

                  return params[0].name+ jj;}
            },
            //左上角的标题
            title:{
              text:data[len-1][0],
              x:'left',

              textStyle:{
                color:data[len-1][0]=='Abnormal server!'?'red':'#000',
                fontSize:14,
                fontWeight:'normal'
              }

            },
            color:['#218ce7','#9127fd' ,'#37b44a',  '#f99a13', '#fdf027',  '#f31f3d', '#20ebb9' , '#585eaa','#b22c46', '#96582a'],
            //右上角显示的各种类型
            legend: {
                data:lengdata,
                itemHeight:8,
                itemGap:8,
                width: '100%',
                itemWidth: 16,
                left:'right',
                top:topp,
                // bottom:bott,
                formatter: function (name) {
                    return echarts.format.truncateText(name, 70, '14px Microsoft Yahei', '…');
                },
                tooltip: {
                    show: true
                }
            },
            grid: {
                left: 20,
                right:25,
                bottom: '7%',
                containLabel: true
            },
           yAxis:  {
                type: 'value',
                axisLine:{
                    lineStyle:{
                    color:'#cccccc',
                    }
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                    color:'#e5e5e5',
                    }
                },
                max:100,

                axisLabel:{
                //显示y轴的格式和颜色
                    textStyle:{color:'#666666'},
                    formatter: function (value) {

                  return  value +'%';
            }
                        }
            },
            xAxis: {
                type: 'category',
                splitLine:{
                    show:true,
                    lineStyle:{
                    color:'#e5e5e5',
                        }
                },
                data:data[0],
                //minInterval: 0,\

                axisLabel:{
                    textStyle:{color:'#666666'},
                    interval: 6,
                    splitNumber: 15,
                },
                axisLine:{
                    lineStyle:{
                        color:'#cccccc',
                    }
                }
            },
            series: allSeries
        });
}

折线图

       if(data==''){
                data=[[],[],[]]
            }
            var percentage = '';
            var nameType = '';
            var titleName = data[2][0];
            if(data[2][0].search('比例')!='-1'){
                percentage = '%' ;
                nameType = 'Ratio';
            }else(data[2][0].search('AvgRat') !='-1'|| data[2][0].search('平均比')!='-1'){
                percentage = '%' ;
                nameType = 'Average';
                if(data[2][0].search('AvgRat')){
                    titleName = data[2][0].replace(/AvgRat/,'Average');
                }
            }
            var chart = echarts.init(document.getElementById(containerId), 'infographic');
            chart.setOption({
            title:{
              text:titleName,
              x:'left',
              textStyle:{
                color:data[2][0]=='Abnormal server!'?'red':'#000'
              }
            },
            grid:{
                top:50,
                left:20,
                right:25
            },
            legend:{
                data:[data[2][1]],
                x:'right',
                selectedMode:false
            },
            tooltip:{
                trigger: 'axis',
                formatter: function (params, ticket, callback) {
                    var res = params[0].name;
                    for (var i = 0; i < params.length; i++) {
                        if (isNaN(params[i].value)) {
                            params[i].value='--';
                        }
                        res += '<br/><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + params[i].color + '"></div>&nbsp;&nbsp' + params[i].seriesName + ' : ' + params[i].value+percentage;
                    }
                    setTimeout(function () {
                        // 仅为了模拟异步回调
                        callback(ticket, res);
                    }, 0)
                    return 'loading';
                }
            },
            xAxis:[{
                type : 'category',
                data : data[0],
                axisLabel:{
                    interval: 6,
                    //rotate: 32, x轴旋转的角度
                },
            }],
            yAxis:[{
                type:'value',
                min:0,
                name:nameType,
                nameGap:12,
                axisLabel: {
                    formatter: function (value) {
                        return value  + percentage;
                    }
                },
                //max为null 就是自动显示最大值；
                max:percentage=="%"?getMax(data[1]):null,
            }],
            series:[{
               name:data[2][1],
               itemStyle:{
                 normal:{
                    color:"#54acd5"
                 }
               },
               silent:true,
               type:'line',
               data:data[1],
               showAllSymbol:true
            }]
         });

双曲线折线图

var chart = echarts.init(document.getElementById(containerId), 'infographic');
        chart.setOption({
            title:{
                text:data[4][0],
                textStyle:{
                    color:data[4][0]=='Abnormal server!'?'red':'#000'
                },
                itemGap:5,
                //subtext:revisableGloblePara.date,
            },
            grid:{
                top:70,
                right:25
            },
            legend:{
                top:20,
                data:[data[4][1],data[4][2],data[4][3]],
                x:"right"
            },
            tooltip:{
                trigger: 'axis',
                formatter: function (params, ticket, callback) {
                    var res = params[0].name;
                    for (var i = 0; i < params.length; i++) {
                        if (isNaN(params[i].value)) {
                            params[i].value='--';
                        }
                        if ( params[i].componentSubType=='bar') {
                            res += '<br/><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + params[i].color + '"></div>&nbsp;&nbsp' + params[i].seriesName + ' : ' + params[i].value;
                        } else {
                            res += '<br/><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + params[i].color + '"></div>&nbsp;&nbsp' + params[i].seriesName + ' : ' + params[i].value+'%';
                        }
                    }
                    setTimeout(function () {
                        // 仅为了模拟异步回调
                        callback(ticket, res);
                    }, 0)
                    return 'loading';
                    }
            },
            xAxis:[{
                type : 'category',
                axisLabel:{
                    interval: 6
                },
                data:data[0],
            }],
            yAxis:[
            {
                type: 'value',
                min:0,
                max:getMax([getMax(data[1]),getMax(data[2]),getMax(data[3])]),
                nameGap:12,
                name:'Ratio',
                axisLabel: {
                    formatter: function (value) {
                        return value  + '%';
                    }
                },
            }],
            series:[{
                name:data[4][1],
                type:'line',
                silent:true,
                barMinWidth:10,
                barMaxWidth:28,
                itemStyle:{
                    normal:{
                        color:"#54acd5"
                    }
                },
                data:data[1],
                showAllSymbol:true
            },
            {
                name:data[4][2],
                silent:true,
                itemStyle:{
                    normal:{
                        color:"#f99660"
                    }
                },
            type:'line',
            //yAxisIndex:1,
            data:data[2],
                showAllSymbol:true
            },
            {
                name:data[4][3],
                silent:true,
                itemStyle:{
                    normal:{
                        color:"#85c56c"
                    }
                },
                type:'line',
                //yAxisIndex:1,
                data:data[3],
                showAllSymbol:true
            }]
        });

柱状图和两条折线图

            var x=[];
            for (var i=0;i<data[0].length;i++) {
                var a='\n\n\n\n\n\n'+data[0][i];
                x.push(a);
            }
            var chart = echarts.init(document.getElementById(containerId), 'infographic');
            chart.setOption({
                title:{
                    text:data[4][0],
                    textStyle:{
                        color:data[4][0]=='Abnormal server!'?'red':'#000'
                    },
                    itemGap:5,
                    subtext:revisableGloblePara.date,
                },
                grid:{
                    top:70
                },
                legend:{
                    data:[data[4][1],data[4][2],data[4][3]],
                    x:"right",
                    top:15,

                },
                tooltip:{
                    trigger: 'axis',
                    formatter: function (params, ticket, callback) {
                        var res = params[0].name;
                        for (var i = 0; i < params.length; i++) {
                            if (isNaN(params[i].value)) {
                                params[i].value='--';
                            }
                            if ( params[i].componentSubType=='bar') {
                                res += '<br/><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + params[i].color + '"></div>&nbsp;&nbsp' + params[i].seriesName + ' : ' + params[i].value;
                            } else {
                                res += '<br/><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + params[i].color + '"></div>&nbsp;&nbsp' + params[i].seriesName + ' : ' + params[i].value+'%';
                            }
                        }
                        setTimeout(function () {
                            // 仅为了模拟异步回调
                            callback(ticket, res);
                        }, 0)
                        return 'loading';
                        }
                },
                xAxis:[{
                    type : 'category',
                    margin:-25,
                    axisLabel:{
                        margin:-25,
                        interval: 0,
                        rotate: 32,
                        splitNumber: 15,
                    },
                    data:x,
                }],
                yAxis:[{
                    type: 'value',
                    min:0,
                    max:getMax(data[1],true),
                    interval:getMax(data[1],true)/5,
                    name:'Number',
                    nameGap:12,
                },
                {
                    type: 'value',
                    min:0,
                    max:getMax([getMax(data[2]),getMax(data[3])]),
                    nameGap:12,
                    name:'Ratio',
                    axisLabel: {
                        formatter: function (value) {
                            return value  + '%';
                        }
                    },
                }],
                series:[{
                    name:data[4][1],
                    type:'bar',
                    silent:true,
                    barMinWidth:10,
                    barMaxWidth:28,
                    itemStyle:{
                        normal:{
                            color:"#54acd5"
                        }
                    },
                    data:data[1]
                },
                {
                    name:data[4][2],
                    silent:true,
                    itemStyle:{
                        normal:{
                            color:"#f99660"
                        }
                    },
                type:'line',
                yAxisIndex:1,
                data:data[2],
                    showAllSymbol:true
                },
                {
                    name:data[4][3],
                    silent:true,
                    itemStyle:{
                        normal:{
                            color:"#a4bf6a"
                        }
                    },
                    type:'line',
                    yAxisIndex:1,
                    data:data[3],
                    showAllSymbol:true
                }]
            });

柱状图和1条折线图

var chart = echarts.init( document.getElementById(containerId) , 'infographic' );
        chart.setOption({
             title:{
                text:data[3][0],
                x:'left',
                textStyle:{
                    color:data[3][0]=='Abnormal server!'?'red':'#000'
                }
             },
             grid:{
                top:50,
                right:25
             },
             legend: {
                 data:[data[3][1],data[3][2]],
                 x:"right"
             },
             tooltip:{
                 trigger: 'axis',
                 formatter: function (params, ticket, callback) {
                    var res = params[0].name;
                    for (var i = 0; i < params.length; i++) {
                        if (isNaN(params[i].value)) {
                            params[i].value='--';
                        }
                        if ( params[i].componentSubType=='bar') {
                            res += '<br/><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + params[i].color + '"></div>&nbsp;&nbsp' + params[i].seriesName + ' : ' + params[i].value;
                        } else {
                            res += '<br/><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + params[i].color + '"></div>&nbsp;&nbsp' + params[i].seriesName + ' : ' + params[i].value+'%';
                        }
                    }
                    setTimeout(function () {
                        // 仅为了模拟异步回调
                        callback(ticket, res);
                    }, 0)
                    return 'loading';
                }
              },
              xAxis:[{
                 type : 'category',
                 data : data[0],
                 axisLabel:{
                    interval:6,
                 }
              }],
              yAxis:[{
                 type:'value',
                 min:0,
                 max:getMax(data[1],true),
                 interval:getMax(data[1],true)/5,
                 name:'Number',
                 nameGap:12,
              },
              {
                 type : 'value',
                 min:0,
                 name:'Ratio',
                 axisLabel: {
                    formatter: function (value) {
                        return value  + '%';
                    }
                 },
                 nameGap:12,
                 interval:getMax(data[2])/5,
                 max:getMax(data[2]),
               }],
               series:[{
                  name:data[3][1],
                  silent:true,
                  type:'bar',
                  barMinWidth:10,
                  barMaxWidth:28,
                  itemStyle:{
                    normal:{
                        color:"#54acd5"
                    }
                  },
                  data:data[1]
                },
                {
                 name:data[3][2],
                 silent:true,
                 itemStyle:{
                    normal:{
                        color:"#f99660"
                    }
                },
                 type:'line',
                 yAxisIndex:1,
                 data:data[2],
                 showAllSymbol:true
                }]
        });

圆环

var mark=[];
        for(var i=0;i<frdata.length;i++){
            mark.push(frdata[i].name);
        }
        var chart = echarts.init(document.getElementById(containerId1), 'infographic');
        var option={
            title:{
                text:'Cause\nClass',
                x:'center',
                y:'50px',
                textStyle:{
                    color:"#333",
                    fontSize:14
                }
            },
            tooltip:{
                position:['0%','100px'],
                trigger:'item',
                formatter:"{b}<br>{c}({d}%)",
          },
          legend:{
              orient : 'vertical',
              y:'bottom',
              data:mark,
              selectedMode:false,
                formatter: function (name) {
                    return echarts.format.truncateText(name, 200, '…');
                },
              tooltip: {
                    show: true
              }
          },
          toolbox:{
              show:false,
              feature:{
              mark : {show: true},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option:{
                        funnel:{
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'center',
                            max: 1548
                        }
                    }
                },
             }
          },
          series : [
              {
                  type:'pie',
                  minAngle:3,
                  center:['50%',"70"],
                  radius : ['45px', '61px'],
                  itemStyle : {
                      normal : {
                          label : {
                              show : false
                          },
                      },
                      emphasis : {
                          label : {
                              show : false,
                          }
                      }
                  },
                  data:frdata
              }
          ]
        };
青梅煮酒论英雄
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts笔记总结
11-12
关于Echarts的总结，重要是以柱状图为例子，附带截图和源码，基本一看就懂了！！
Echarts饼图图例太长解决方案
小轩的学习日志
09-26 1945
解决饼图图例文本太长 问题 方案 formatter: function(name) { return echarts.format.truncateText(name, 50, '12px Microsoft Yahei', '…') }, tooltip: { show: true } 完整代码 legend: { type: 'scroll', orient: 'vertical', right: 0,
echarts lengend 换行
weixin_45152848的博客
07-02 1134
legend: { type: 'scroll', orient: 'vertical', icon: 'circle', formatter: function (name) { if(name && name.length > 26){ var str1 = name.substring(0, 26) var str2 = name.substring(26) na
【数据可视化】Echarts最常用图表
最新发布
zxctsclrjjjcph的博客
03-15 1339
在上一篇博客中提到了【数据可视化】数据可视化入门前的了解，这次来看看Echarts最常用图表有哪些，和作用是什么?
遇到的各种echarts属性—难找：写一篇博客长期记录
m0_62823653的博客
10-25 2559
以 官网图为例： 造成后果：Y轴显示不全修改前的效果：左侧紧凑，下方显示不全 修改后的效果： 代码如下 第四部分：提示框组件样式调整 第五部分：环形图基础样式调整
ECharts legend属性 换行字多隐藏
XXXTENTACIONXXXX的博客
05-19 727
【代码】ECharts legend属性 换行字多隐藏。
echarts自定义图例（legend）样式
qq_39905409的博客
06-30 2万+
echarts自定义图例（legend）样式
echarts 饼图 lengend 对齐并截断文本
宅神的博客
12-21 554
let baseLengend = { width: 240, bottom: 20, right: 30, textStyle: { rich: { a: { color: '#fff', fontSize: 12, lineHeight: 12, width: 60 } } }, formatter: function(name){ return ["{a|" + e.
echart图表问题
12-05
echart图表问题
echart统计图表
03-27
echart统计图表：饼状图，折线图，柱状图，echart所需js
echart 图表
09-18
一款十分好用的图表插件，功能强大，显示效果很好，大家赶紧下载啊，需要用的直接可以用，不用的可以研究一下，说不定以后就会用到了
echart图表移动端应用
11-29
手机端应用echart 柱状图 饼图...
SSM+Echart图表实例
08-25
Spring MVC+Mybatis结合Echarts图表插件展示数据
ECharts总结
aliyun3的博客
04-13 1013
echarts总结 一.初步实现echarts 1.npm install echarts --save 2.import * as echarts from 'echarts'; 3. <div class="map" ref="myEchart" style="width: 800px;height:600px;"></div> 4. <template> <div class="map" ref="myEchart" style=
Echarts legend 文本过长显示省略号解决方案
amy1019的博客
10-27 697
【代码】Echarts legend 文本过长显示省略号解决方案。
Echarts在项目中的使用
北寻北爱
10-22 553
Echarts的基本使用 获取 npm install echarts --save 引入 //main.js import echarts from 'echarts' Vue.prototype.$echarts= echarts 使用 <template> <!--为Echarts准备一个具备宽度的DOM容器--> <div ref='pro...
R可视化08|ggplot2图层-标度图层（scale layer）-图例篇
qq_21478261的博客
10-10 1390
详细介绍ggplot2中图例设置
ECharts图表中级入门之formatter：夜谈关于ECharts图表内的数据格式化方法
热门推荐
mengxiangfeiyang的专栏
04-01 5万+
[摘要]： 格式化之所以存在，主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化，便于用户更好地理解内容。ECharts图表组件内的格式化方法formatter比起highcharts图表组件内的格式化方法差异还是有一些的，这里就不做它们之间的比较了。ECharts图表组件内的格式化常用的地方也不是很多，就来一起看看吧！ 一、tooltip 图表内数据点的悬浮框提示框信息展现的时候我们
Echarts插件axisLabel增加tooltip接口
之毅的博客
09-12 5710
Echarts插件，默认情况下无法设置axisLabel的tooltip接口，即坐标轴的label悬浮上去没有显示效果。 本文主要讲述如何给坐标轴label添加tooltip接口。
echart 图表切换
05-30
可以通过 EChart 提供的 API，使用事件绑定的方式实现图表切换。具体步骤如下： 1. 在页面中添加多个图表容器，用来存放不同类型的图表。 2. 在 JS 代码中，使用 EChart 的实例化对象创建对应的图表，并将其放置在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值