精华内容
下载资源
问答
  • echarts 占比条形图

    千次阅读 2020-03-11 14:57:01
    option = { backgroundColor:'#000E1B', title:{ show: false, text:'本市危货种类占比', textStyle:{ color:'#FFFFFF' }, left:'300px', top: '30...

    option = {
        backgroundColor:'#000E1B',
        title:{
            show: false,
            text:'本市危货种类占比',
            textStyle:{
              color:'#FFFFFF'  
            },
            left:'300px',
            top: '300'
            
        },
        tooltip: {
            show: false,
            formatter: "{b} <br> {c}%"
    
        },
        legend: {
            icon: "circle", 
            bottom: '43%',
            left:'10%',
            itemWidth: 7,
            itemHeight: 7,
            itemGap: 40,
            textStyle:{
                color:'#89A7AF',
            },
            data:[{
                    name :'油车'
                 },
                 {
                    name :'危化品'
                 },
                 {
                    name :'其他'
                 }
                ]
        },
        xAxis: [{
            type :'value',
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false,
            }
        }],
        yAxis: [{
            //type: 'category',
            data: [''],
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                }
            }
    
        }],
        series: [
            {
                name:'油车',
                type:'bar',
                barWidth:16,
                stack: '危货种类占比',
                label: {
                    normal: {
                        borderWidth: 10,
                        distance: 20,
                        align: 'center',
                        verticalAlign: 'middle',
                        borderRadius: 1,
                        borderColor: '#E8A61F',
                        backgroundColor: '#E8A61F',
                        show: true,
                        position: 'top',
                        formatter: '{c}%',
                        color: '#000'
                    }
                },
                itemStyle: {
                    color: '#E8A61F'
                },
                data:[{
                    value:53.1,
                    itemStyle: {
                    normal: {
                        color: {
                            type: 'bar',
                            colorStops: [{
                                offset: 0,
                                color: '#E8A61F' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#E8A61F' // 100% 处的颜色
                            }],
                            globalCoord: false, // 缺省为 false
    
                        }
                    }
                }
                }]
            },
            {
                name:'油车三角形',
                type:'line',
                barWidth:0,
                markPoint: {
                    symbol:'triangle',
                    symbolRotate:'180',
                    itemStyle:{
                      color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: '#E8A61F' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#E8A61F' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }  
                    },
                    symbolSize:[6,5],// 容器大小
                    symbolOffset:[0,-15],//位置偏移
                    data:[{
                        coord: [53.11/2]
                    }],
                    label: {
                        normal: {
                            show: false
                        },
                        offset: [0, 0],
                    }
                }
            },
            {
                name:'危化品',
                type:'bar',
                barWidth:16,
                stack: '危货种类占比',
                itemStyle: {
                    color: '#E67C26'
                },
                label: {
                    normal: {
                        borderWidth: 10,
                        distance: 20,
                        align: 'center',
                        verticalAlign: 'middle',
                        borderRadius: 1,
                        borderColor: '#E67C26',
                        backgroundColor: '#E67C26',
                        show: true,
                        position: 'top',
                        formatter: '{c}%',
                        color: '#000'
                    }
                },
                data:[{
                    value:23,
                    itemStyle: {
                    normal: {
                        color: {
                            type: 'bar',
                            colorStops: [{
                                offset: 0,
                                color: '#E67C26' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#E67C26' // 100% 处的颜色
                            }],
                            globalCoord: false, // 缺省为 false
    
                        }
                    }
                }
                }]
            },
            {
                name:'危化品三角形',
                type:'line',
                barWidth:0,
                markPoint: {
                    symbol:'triangle',
                    symbolRotate:'180',
                    itemStyle:{
                      color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: '#E67C26' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#E67C26' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }  
                    },
                    symbolSize:[6,5],// 容器大小
                    symbolOffset:[0,-15],//位置偏移
                    data:[{
                        coord: [53.11 + 23/2]
                    }],
                    label: {
                        normal: {
                            show: false
                        },
                        offset: [0, 0],
                    }
                }
            },
            {
                name:'其他',
                type:'bar',
                barWidth:16,
                stack: '危货种类占比',
                itemStyle: {
                    color: '#0CD8A7'
                },
                label: {
                    normal: {
                        borderWidth: 10,
                        distance: 20,
                        align: 'center',
                        verticalAlign: 'middle',
                        borderRadius: 1,
                        borderColor: '#0CD8A7',
                        backgroundColor: '#0CD8A7',
                        show: true,
                        position: 'top',
                        formatter: '{c}%',
                        color: '#000'
                    }
                },
                data:[{
                    value:1,
                    itemStyle: {
                    normal: {
                        color: {
                            type: 'bar',
                            colorStops: [{
                                offset: 0,
                                color: '#0CD8A7' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#0CD8A7' // 100% 处的颜色
                            }],
                            globalCoord: false, // 缺省为 false
    
                        }
                    }
                }
                }]
            },
            {
                name:'其他三角形',
                type:'line',
                barWidth:0,
                markPoint: {
                    symbol:'triangle',
                    symbolRotate:'180',
                    itemStyle:{
                      color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: '#0CD8A7' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#0CD8A7' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }  
                    },
                    symbolSize:[6,5],// 容器大小
                    symbolOffset:[0,-15],//位置偏移
                    data:[{
                        coord: [53.11 + 23 + 1/2]
                    }],
                    label: {
                        normal: {
                            show: false
                        },
                        offset: [0, 0],
                    }
                }
            }
        ]
    };

     

    展开全文
  • echarts 横向占比条状

    千次阅读 2017-05-26 16:20:01
    var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; ...app.title = '堆叠条形图'; option = {  // tooltip : {  // trigger: 'axis',
    <!DOCTYPE html>
    
    <html style="height: 100%">
       <head>
           <meta charset="utf-8">
       </head>
       <body style="height: 100%; margin: 0">
           <div id="container" style="height: 100%"></div>
           <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
           <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
           <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
           <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
           <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
           <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
           <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
           <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    app.title = '堆叠条形图';


    option = {
        // tooltip : {
        //     trigger: 'axis',
        //     axisPointer : {            // 坐标轴指示器,坐标轴触发有效
        //         type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        //     }
        // },
        // legend: {
        //     data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
        // },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis:  {
            type: 'value',
            show: false,
           
        },
        yAxis: {
            type: 'category',
            data: ['10 李四四','9 李四四','8 李四四','7 李四四','6 李四四','5 李四四','4 李四四','3 李四四','2 李四四','1 张三'],
            axisLine: { show: false},
            axisTick: {show: false},
        },
        series: [
            {
                name: '张三总业绩',
                type: 'bar',
                barWidth: 20,
                itemStyle: {
                        normal: {
                            barBorderRadius: 40,
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: '#2d3d69'
                            }, {
                                offset: 1,
                                color: '#2b3c67'
                            }]),
                            areaStyle: {type: 'default'},
                        },


                    },
                // stack: '1',
                barGap:'-100%',
             
                data: [920, 920, 920, 920, 920, 920, 920,920, 920, 920],
                 // barGap:'20%'
            },
            {
                name: '张三',
                type: 'bar',
                barWidth: 20,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 40,
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: '#0a6253'
                            }, {
                                offset: 1,
                                color: '#34b9a4'
                            }]),
                       
                            areaStyle: {type: 'default'},
                     label : {
                        show: true, 
                        position: 'right',
                        formatter: function (params) {
                          // console.log(params)//这里输出params所有参数 需要什么下面自己拼
                            // return params.name + params.data;
                           return "¥" + params.data;
                        },
                        
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                        },


                    },
             
                data: [400, 232, 301, 134, 506, 360, 840, 386, 298, 640],
                
            },
           
        ]
    };;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
           </script>
       </body>
    </html>
    展开全文
  • echarts 计算柱形总和以及单个占比

    千次阅读 2020-06-15 14:38:22
    <script> var option = { xAxis: { data: ["易制毒订单","易制爆订单","剧毒订单","麻醉药品订单","精神药品订单","其它"] }, yAxis: { splitLine:{ show:false} //改设置不显示坐标区域内的y轴分割线 ...
    <script>
    var option = {
        xAxis: {
            data: ["易制毒订单","易制爆订单","剧毒订单","麻醉药品订单","精神药品订单","其它"]  
        },
        yAxis: {
            splitLine:{ show:false}  //改设置不显示坐标区域内的y轴分割线
        },
        tooltip : {
            trigger: 'item',
            formatter: function(params){
             	var series = option["series"];
    //       	console.log(option["series"])
    //       	console.log(series[0].data)
             	var arr=series[0].data;
    			var sum =0 
    			for(var i=0;i<arr.length;i++){
    			    sum=sum+arr[i];
    			}
    //			console.log(sum)
    			//计算数组总和以及数组中单个数据的占比提取小数点后两位
            	return params.name + '<br />' + '订单总金额:¥'+sum+'<br />占比:'+(params.value/sum*100).toFixed(2) + '%';
            } 
    	},
        series: [{
            name: '手机品牌',
            type: 'bar',
            data: [100, 90, 70, 32 , 15, 5],
            //设置柱子的宽度
            barWidth : 50,
            //配置样式
            itemStyle: {   
                //通常情况下:
                    normal:{  
                //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['#3B9FFB','#5ECBCB','#65CB74','#FBD440','#ED5479','#9656E5','#752FCB'];
                        return colorList[params.dataIndex];
                    },
                    label: {
                        show: false,
                        position: 'top',
                        formatter: '{b}\n{c}%'    //这是关键,在需要的地方加上就行了
                    }
                },
                //鼠标悬停时:
                emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }],
         //控制边距 
        grid: {
                left: '0%',
                right:'10%',
                containLabel: true,
        }
    };  
    var myChart = echarts.init(document.getElementById('echartDemo'));
    myChart.setOption(option);
    </script>

     

    展开全文
  • echarts 横向条形图 对比

    千次阅读 2020-03-06 11:13:56
    横向条形图 对比 先看效果图 代码:需要改动的数据我都提在了最前面; let yList = ['2月','对比2月']; let collectingMediaList = [766, 350]; let dealerLists = [134, 31]; let regionalDelivery = [34, 31]; ...

    横向条形图 对比

    先看效果图
    在这里插入图片描述
    代码:需要改动的数据我都提在了最前面;

    
    let yList = ['2月','对比2月'];
    let collectingMediaList = [766, 350];
    let dealerLists = [134, 31];
    let regionalDelivery = [34, 31];
    
    option = {
        title: {
            text: '渠道集客量对比',
            left: 'center',
        },
        legend: {
            x: 'center',
            top:'30',
            data:['集采媒体','经销商','区域投放']
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis:  {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: yList
        },
        series: [
            {
                name: '集采媒体',
                type: 'bar',
                stack: '总量',
                barWidth: 100, // 宽度
                itemStyle:{
                    normal: {
                        color: '#BB0A30'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                z:  10,
                data: collectingMediaList
            } ,
            {
                name: '经销商',
                type: 'bar',
                stack: '总量',
                barWidth: 100,
                itemStyle:{
                    normal: {
                        color: '#333333'
                    }
                },
                label: {
                    // normal: {
                    //     show: true,
                    //     position: 'insideRight'
                    // }
                },
                z:  10,
                data: dealerLists
            } ,
            {
                name: '区域投放',
                type: 'bar',
                stack: '总量',
                barWidth: 100,
                itemStyle:{
                    normal: {
                        color: '#808080'
                    }
                },
                label: {
                    // normal: {
                    //     show: true,
                    //     position: 'insideRight'
                    // }
                },
                z:  10,
                data: regionalDelivery
            } 
        ]
    };
    

    可以在这个地址看看具体效果,还可以调试:
    https://gallery.echartsjs.com/editor.html?c=x_FX9ve5gO
    在这里插入图片描述

    展开全文
  • echarts 矩形填充占比图treemap

    千次阅读 2020-10-25 15:48:44
    value:n, 数值,根据同层所有数值的占比,构成百分比矩形 name:'显示内容', itemStyle:{ 当前矩形样式 }, children:[ { value:n, name:'显示内容' } ] }, { value:n, ...
  • 假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态:y轴用于展示各网口,x轴用于展示时间(分钟),使用条形图的不同颜色来表示不同时间区间段的状态,使用深蓝、浅蓝、橙色、红色分别代表正常、繁忙、...
  • <p><img alt="" height="585" src="https://img-ask.csdnimg.cn/upload/1622707723960.png" width="498" /></p> 如何根据绿灯占比从高到底排序呢?</p>
  • 主要介绍了vue使用echarts实现水平柱形实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • }, // 堆叠条形图 drawChart() { this.xAxis.data=[]; // 基于准备好的dom,初始化echarts实例 let textEcharts = this.$echarts.init(document.getElementById("textEcharts")); let item = this.dataItem; for ...
  • <!... <... <...堆叠</title> </head> <body> <div id="container" style="width:100%;height:600px;"></div> <!--其他样式自行加上即可--> ...
  • Echarts横向叠加柱形

    千次阅读 2018-08-29 17:41:01
    带有图例的横向柱形 数据获取的时候每一个柱形都要单独获取,具体代码如下: option ={ tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', }, }, legend: [{ ...
  • 横向柱形实现思路为将每个类别名称设置为y轴,然后将x轴隐藏 显示所占百分比思路为设置两个数据区域,然后让两个数据区域重叠,其中一个将数据都设置成100,另一个就设置自己所占百分比就行了 xAxis: { show: ...
  • echarts柱状统计

    千次阅读 2019-05-26 20:04:59
    一、简单的echarts柱状统计 二、柱状和折线混搭 三、一个项目里同时用不同版本的echarts画图 一、简单的echarts柱状统计 1、首先映入echarts所需的依赖包:echarts.js和echarts.min.js,以及jQuery.js;...
  • 在使用echarts的堆叠时,我们鼠标悬停的浮窗里的信息可能并不是我们想要的信息,这个时候需要我们配置一下,因为堆叠的trigger的类型是坐标轴触发的,数据是多组数据,所以我们需要遍历一下数据,进行编辑 tooltip: {...
  • let myChart = this.$echarts.init(document.getElementById("bar")); myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, } 3、在mounted中调用 mounted() { ...
  • 获取到数据后,将tooltip中的formatter修改 tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function(params) {//这里就是控制显示的样式 let relVal = params[0].name;...
  • echarts画柱状对比

    2019-01-18 16:01:24
    !... !... 第一张图是我做出来的 我只是希望Y轴的平分正负轴数不是0就好了,我想设置自己的起始轴,超过107.5分的就往上,低于107.5分的往下到它指定的位置,比如是105分,就往下面到105分的位置,超过107.5分的比如117.5...
  • Echarts--Js可视化实现[视觉盛宴]--动态三维条形图、柱状图、饼图、比例图、折线图1、前言2、案列(基于电影推荐系统)2.1 观众年龄分配占比`在这里插入代码片`2.2 不同职位观影情况2.3 电影类型分配占比2.4 观影...
  • 1.南丁格尔玫瑰 //今日客流到访数 dayVisited() { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById("dayVisited")); let option = { title: { text:...
  • echarts 条纹柱状横向
  • Echarts中堆叠柱状之百分比显示

    万次阅读 2018-07-23 17:22:37
    需求:tooltip显示其数量之外,还需在旁边显示该数量所占总数的百分比,具体效果如下: 相关资料 参考属性链接:http://echarts.baidu.com/option.html#tooltip.formatter echarts的tooltip中的一个属性...
  • 南丁格尔玫瑰 from pyecharts.charts import Pie from pyecharts import options as opts import random # 随机颜色生成 # def randomcolor(kind): # colors = [] # for i in range(kind): # colArr = ['1', '2'...
  • 效果 html部分 <div id="main" style="width: 600px;height:400px;"></div> js部分 var myChart = echarts.init(document.getElementById('main')); var colors = ['#2D9CFF','#5793f3', '#d14a61',...
  • 前端时间在前端岗位上要实现Vue项目中的echarts画图,今天来分享下vue+echarts折线、柱状和扇形的方法。每种echarts配置差不多一致,但根据种需进行指定选项的改动。 一、折线 折线中,series要包含...
  • 关于使用echarts堆叠柱状百分比显示的问题 平常工作没有涉及到echarts,所以平常也没有去关注图表这一块,然后碰到一个需求,要求使用堆叠柱状,但是数值是需要百分比显示的,不是在所获取到的数字后直接加%,...
  • echarts legend 排列问题

    2020-05-14 19:49:57
    legend 图例组件可以分组展示。详细说明:https://blog.csdn.net/qq_36437172/article/details/106125254
  • let myColor = ["#1089E7"]; //设定柱状颜色 let opt = { index: 0 }; myChart.setOption({ grid: { top: "1%", left: "10%", right: "15%", ...
  • Obiee+echarts实例之100%竖堆叠

    千次阅读 2016-12-07 13:49:03
    1、这是用Obiee + echarts做出来的堆叠,效果如:   2、数据(数据库随机生成的数,仅供参考),如: PS: 1、由于echarts不能识别带“%”的数字,所以就设为带两位小数的数字,然后再在代码里面...
  • 使用echarts实现时间状态区间

    千次阅读 2019-06-17 15:15:26
    该图例参考了官方的demo:https://echarts.baidu.com/examples/editor.html?c=custom-profile以及https://www.cnblogs.com/cindy-hmy/p/8251193.html var colors = ['blue', 'red','gray'];//三种状态的颜色 var ...
  • 1.首先去Echarts官网下载插件,引入到jsp中 (https://echarts.baidu.com/) <script type="text/javascript" src="www/echarts.min.js"></script>

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 258
精华内容 103
关键字:

echarts占比条形图