精华内容
下载资源
问答
  • echarts横向柱状图

    2019-10-12 16:46:46
    设置echarts多个柱状图重叠或者叠加情况,堆叠是数据不会叠加,可以设置堆叠(stack),否则没有,是叠加横向柱状图,柱形图显示数值,以及设置隐藏一段方案(关联和不关联),鼠标移动上去显示的提示内容,动态改变...
  • Echarts 横向柱状图

    千次阅读 2021-01-29 11:15:58
    横向显示将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示 placeCharts() { let myChart = this.$echarts.init(sportIMg); myChart.setOption({ grid: { left: "15", containLabel: ...

    实例图片:

    横向显示
    将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示

        placeCharts() {
          let myChart = this.$echarts.init(sportIMg);
          myChart.setOption({
            grid: {
              left: "15",
              containLabel: true,
            },
            xAxis: [
              //x轴数据设置
              {
                type: "value",
                name: "人数",
                min: 0,
                // max: 150,
                //interval: 30, //间隔数
                // splitNumber: 5,
                axisLabel: {
                  formatter: "{value} ",
                },
                splitLine: {
                  show: false,
                },
                axisLine: {
                  //这是y轴文字颜色
                  lineStyle: {
                    color: "#65C6E7",
                  },
                },
              },
            ],
            yAxis: [
              {
                type: "category",
                offset: 0,
                axisLine: {
                  //这是x轴文字颜色
                  lineStyle: {
                    color: "#65C6E7",
                  },
                },
                data: this.palceDatas,
                axisPointer: {
                  type: "shadow",
                },
                axisTick: {
                  show: false,
                },
              },
            ],
            series: [
              {
                data: this.palceNum,
                type: "bar",
                barWidth: 22,
                label: {
                  normal: {
                    show: true,
                    // position: "right",
                  },
                },
                itemStyle: {
                  //通常情况下:
                  normal: {
                    //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
                    color: function (params) {
                      var colorList = [
                        "#855BD7",
                        "#4B6FB8",
                        "#0F6E43",
                        "#B69C2B",
                        "#2588BB",
                        "#BB612D",
                        "#1D9394",
                        "#C24545",
                      ];
                      return colorList[params.dataIndex];
                    },
                  },
                },
              },
            ],
          });
        },

     

    展开全文
  • echarts 横向柱状图

    万次阅读 2019-09-27 17:10:55
    echarts 柱状图 两层 具体代码如下 var myColor = ['#81E7ED'] //内柱状图颜色 var dataLine = [50, 66, 33, 25] let positionLeft = 0.4, max = 100 + 2*positionLeft var option = { grid: [ { le...

    echarts 柱状图 两层 具体代码如下

     var myColor = ['#81E7ED'] //内柱状图颜色
     var dataLine = [50, 66, 33, 25]
     let positionLeft = 0.4,
        max = 100 + 2*positionLeft
     var option = {
         grid: [
             {
             left: '8%',
             top: '12%',
             right: '5%',
             bottom: '8%',
             containLabel: true
         },
         {
             left: '10%',
             top: '12%',
             right: '5%',
             bottom: '8%',
             containLabel: true
         }
             ],
         xAxis: [{
             max:max,
             show: false
         }],
         yAxis: [{
             axisTick: 'none',
             axisLine: 'none',
             offset: '27',
             axisLabel: {
                 textStyle: {
                     color: '#000000', //y轴字体颜色
                     fontSize: '16'
                 }
             },
             data: ['南京银行', '北京银行', '镇江银行', '建设银行']
         }, {
             axisTick: 'none',
             axisLine: 'none',
             show: false,
             axisLabel: {
                 textStyle: {
                     color: '#ffffff',
                     fontSize: '16'
                 }
             },
             data: [1, 1, 1, 1]
         }, {
    
             axisLine: {
                 lineStyle: {
                     color: 'rgba(0,0,0,0)' //y轴线颜色
                 }
             },
             data: []
         },
         {  //设置柱状图右边参数 
    					        show: true,
    					        inverse: true,
    					        data: dataLine,
    					        axisLine: {
    					            show: false
    					        },
    					        splitLine: {
    					            show: false
    					        },
    					        axisTick: {
    					            show: false
    					        },
         ],
         series: [
             
         {
             name: '条',
             type: 'bar',
             stack: 'b',
             yAxisIndex: 0,
             data: dataLine,
             label: {
                 normal: {
                     show: false,
                     position: 'right',
                     distance: 10,
                     formatter: function(param) {
                         return param.value + '%'
                     },
                     textStyle: {
                         color: '#ffffff',
                         fontSize: '16'
                     }
                 }
             },
             barWidth: 21,
             itemStyle: {
                 normal: {
                        color: new echarts.graphic.LinearGradient(
                          1, 0, 0, 0,
                        [
                            {offset: 0, color: '#FF0000'},   
                            {offset: 1, color: '#FF7744'}
                        ]
                     ),
    
                      barBorderRadius:[100, 100, 100, 100],
                 }
             },
             z: 2
         }, { //背景灰框
             name: '白框',
             type: 'bar',
             yAxisIndex: 1,
             barGap: '-100%',//设置-100% 则表示灰色柱状图与红色柱状图重合
             data: [99.8, 99.9, 99.9, 99.9],
             barWidth: 21,
             itemStyle: {
                 normal: {
                     color: '#DDDDDD',
                     barBorderRadius:[100, 100, 100, 100],
                 },
                 
             },
             z: 1  // 设置维度越高这表示覆盖低的
         },
         {
             name: '外框',
             type: 'bar',
             yAxisIndex: 2,
             barGap: '-100%',
             data: [100, 100, 100, 100],
             barWidth: 23,
             label: {
                 normal: {
                     show: true,
                     position: 'right',
                     distance: 10,
                     color:'#000000',
                    formatter: function(data) {
                      return dataLine[data.dataIndex] +"/"+dataLine[data.dataIndex];
                    },
                 }
             },
                itemStyle: {
                 normal: {
                     color: '#DDDDDD',
                      barBorderRadius:[100, 100, 100, 100],
                 }
             },
             
             z: 0
         }
         ]
     }
    

    效果图如下:

    在这里插入图片描述

    其中注意事项:

    1. inverse: true, 在X轴和Y轴设置,表示取值是否倒叙
    2. 想让echarts 跟随屏幕大小而变化则如下:
    InstitutionalCirculationChart.setOption({
           option={};
    });
    //使用制定的配置项和数据显示图表
    $(window).resize(function() {
    		InstitutionalCirculationChart.resize();
    });
    
    展开全文
  • vue echarts 横向柱状图

    2021-04-13 17:28:35
    echarts 横向柱状图

    实现效果:
    在这里插入图片描述

    <template>
      <div class="OverYearsPompany">
        <div id="OverYearsPompanyChart" style="flex: 1; height: 368px; margin-top: -42px"></div>
      </div>
    </template>
    <script>
    import { getProposedInvestments } from '@/api/government';
    const colors = [
      ['rgba(240, 7, 100, 1)', 'rgba(0, 215, 229, 1)'],
      ['rgba(240, 7, 100, 1)', 'rgba(0, 215, 229, 1)'],
      ['rgba(240, 7, 100, 1)', 'rgba(0, 215, 229, 1)'],
      ['rgba(240, 7, 100, 1)', 'rgba(0, 215, 229, 1)'],
    ];
    export default {
      data() {
        return {
          investmentsWayData: [],
          investmentsWayDataCount: [],
          investmentsWayDataCounts: [],
        };
      },
      mounted() {
        this.getProposedInvestments();
      },
      methods: {
        initMap() {
          var myChart = this.$echarts.init(document.getElementById('OverYearsPompanyChart'));
          const option = {
            tooltip: {
              show: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
              },
            },
            xAxis: {
              type: 'value',
              axisLabel: {
                show: true,
                color: '#02CFFCFF',
                fontFamily: 'TencentSans',
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#02CFFCFF',
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(71, 126, 171, 1)',
                },
              },
            },
            yAxis: [
              {
                type: 'category',
                inverse: true, //倒叙
                axisLabel: {
                  color: '#02CFFCFF',
                  fontFamily: 'TencentSans',
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#02CFFCFF',
                  },
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dotted',
                    color: 'rgba(71, 126, 171, 1)',
                  },
                },
                data: this.investmentsWayData,
              },
            ],
            series: [
              {
                type: 'bar',
                barWidth: 15,
                label: {
                  position: ['98%', -20],
                  show: true,
                  color: '#fff',
                  fontFamily: 'TencentSans',
                },
                data: this.investmentsWayDataCount,
                itemStyle: {
                  color(params) {
                    const { dataIndex } = params;
                    let color = {
                      type: 'linear',
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      colorStops: [
                        {
                          offset: 0,
                          color: colors[dataIndex] ? colors[dataIndex][0] : 'red',
                        },
                        {
                          offset: 1,
                          color: colors[dataIndex] ? colors[dataIndex][1] : 'red',
                        },
                      ],
                    };
                    return color;
                  },
                },
              },
            ],
          };
          myChart.setOption(option);
        },
        getProposedInvestments() {
          getProposedInvestments().then((res) => {
            const { status, data } = res;
            const { proposedInvestmentsWayDis } = JSON.parse(data);
            if (status === 200) {
              // this.investmentsWayData=[{0: "合资", 1: "合作", 2: "独资", 3: "其他"}]
              this.investmentsWayData = proposedInvestmentsWayDis.map((item) => {
                return item.wayDis;
              });
              // this.investmentsWayDataCount=[{0: "496", 1: "372", 2: "248", 3: "124"}]
              this.investmentsWayDataCount = proposedInvestmentsWayDis.map((item) => {
                return item.count;
              });
              // this.investmentsWayDataCounts=[{itemStyle:
    		  // color:{
    		  // 0: "rgba(240, 7, 100, 1)"
    		  // 1: "rgba(0, 215, 229, 1)"}
    		  // value: "496"}]
              this.investmentsWayDataCounts = proposedInvestmentsWayDis.map((item, index) => {
                return {
                  value: item.count,
                  itemStyle: {
                    color: colors[index],
                  },
                };
              });
              this.initMap();
            }
          });
        },
      },
    };
    </script>
    
    

    over
    在这里插入图片描述

    展开全文
  • echarts横向柱状图渐变色

    千次阅读 2020-08-29 10:57:36
    echarts横向柱状图样式echarts横向柱状图一、样式?二、使用步骤1.引入库2.html+js总结 echarts横向柱状图 一个简单的样式 一、样式? 示例:样式其实一样就是改了颜色 二、使用步骤 1.引入库 代码如下(示例):...

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


    echarts横向柱状图

    一个简单的样式


    一、样式?

    在这里插入图片描述

    示例:样式其实一样就是改了颜色

    二、使用步骤

    1.引入库

    代码如下(示例):

    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Bootstrap -->
        <link href="test/css/bootstrap.min.css" rel="stylesheet" media="screen">
    	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <!-- 包括所有已编译的插件 -->
        <script src="test/js/bootstrap.min.js"></script>
        <!-- 引入 echarts.js -->
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
        <script type="text/javascript" src="js/echarts.min.js" ></script>
    

    2.html+js

    代码如下(示例):

    <div id="rtleft" style="float: left;height: 100%;width: 420px;margin-left: 20px;margin-top: -50px;"></div>
    <!--右上靠左-->
    <script type="text/javascript">
    			// 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('rtleft'));
    
            // 指定图表的配置项和数据
            var option = {
                dataset: {
            		source: [
                		['score', 'amount', 'product'],
                		[89.3, 58212, '业务员1'],
                		[57.1, 78254, '业务员2'],
                		[74.4, 41032, '业务员3'],
                		[50.1, 12755, '业务员4'],
                		[52.1, 12055, '业务员6'],
            		]},
            		grid: {containLabel: true},
        			xAxis: {name: 'amount',
        					show:false},
        			yAxis: {
        				inverse:true,
        				type: 'category',
        				axisLine:{
               				show:false,
        				},
        				axisTick: {
        					show: false,
        				},
        				axisLabel: {
        					show: true,
        					textStyle: {
        						color:'#fff'  //这里用参数代替了
                    		}
                  		},
        			},
        			series: [{
            			type: 'bar',
            			encode: {
                		// Map the "amount" column to X axis.
                		x: 'amount',
                		// Map the "product" column to Y axis
                		y: 'product'
            		},
    
            		itemStyle: {
                    //通常情况下:
                    	normal: {
                        barBorderRadius: 20,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: '#2cccfd'
                        }, {
                            offset: 1,
                            color: '#fc5a5a'
                        }]),
                        shadowColor: 'rgba(0, 0, 0, 0.4)',
                        shadowBlur: 20
                    	},
                	},
                	label: {
                    	show: true, //开启显示
                    	position: 'right', //在上方显示
                    	textStyle: { //数值样式
                      	color: '#fff',
                      	fontSize: '12'
                      	}
                    },   
        }]
            };
    
            // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    

    LinearGradient()用来控制家变色及方向后面的四个数控制方向,具体自己百度


    总结

    拿走的朋友说一下我看看到底帮到了多少人,谢谢了,我还是菜得离谱。

    展开全文
  • 使用Echarts横向柱状图时属性设置不生效 最近使用echarts柱状图时想给柱子添加底色一直没有生效,查阅许多文档都只看到了说怎么添加底色,但是没有查到说不生效的原因 1.给柱子添加底色是在series下面设置...
  • Echarts横向柱状图配置

    千次阅读 2020-10-17 17:13:26
    效果 getBarOption: function (titleText, barName, barData) { var that = this var option = { title: { text: titleText, left: "left", top: 0, padding: [8, 0, 20, 0], textStyle: { color: "#333333", ...
  • echarts 横向柱状图TOP10

    千次阅读 2020-07-07 09:52:00
    2.formatter中对数据进行处理,经过判断给相应的位置添加相应的样式信息,这一块要依赖rich,具体的用法参考echarts官网; series: [{ data: data1, type: 'bar', barWidth:'20%', barGap:'2..
  • let leftArr = ['测试可以的', '玉米', '蔬菜', '鸡蛋', '坚果','测试','测试']; let rightArr = [22, 33, 44, 21,88,100,77]; let emptyData = rightArr.map((v, i) => { let item = { value: 100, ...
  • echarts横向柱状图超出文字用省略号代替解决方案 解决方案 最终实现效果图 关键性代码 var maxLength = 25; //判断长度,超出使用...代替 if (params && params.length > maxLength) { return params....
  • <div class="item-title">当月停机次数Top5</div> <div id="stopTimes" style="height: 400px;width: 580px;"><...img id="stopTimesImage" src="../../3rdTools/images/cheer.png">...
  • echarts横向柱状图详细解析

    千次阅读 2019-12-20 14:35:51
    <div id="main"></div> js部分 <script> 移入echarts let echarts = require('echarts/lib/echarts') export default { mounted () { ... // 绘制柱状图 methods: { mei...
  • option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, color: ['#959595'], grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, ...
  • echarts横向柱状图Demo

    万次阅读 2018-11-09 15:07:04
    echarts链接:http://gallery.echartsjs.com/editor.html?c=xByfdMz7mM 代码: option = { backgroundColor: 'black', tooltip: { trigger: 'axis', backgroundColor: 'rgba(255,255,255,0.8)'...
  • 效果 标题table栏可以切换,这里就不上代码了,切换的时候需要重新销毁和重建一下dom节点,否则会出现bug,使用这个插件的时候需要注意一下dom节点的问题 首先需要装一下 这个插件 可以看一下插件的文档 :...
  • let num = data.length // x轴的数量  window.onresize = this['chart' + index].resize  let autoHeight = num * 50 + 100  ... this['chart' + index].getDom().style.height = ...结果
  • html <div class="box" id="echartModel" style="background-color: #191e3e;"></div> ... var myChart = echarts.init(document.getElementById('echartModel')); opti...
  • 设置echarts多个柱状图重叠或者叠加情况,堆叠是数据不会叠加,可以设置堆叠(stack),否则没有,是叠加横向柱状图,设置隐藏一段方案
  • let echarts = require('echarts') if (params.dataIndex >= colrs.length) { index = params.dataIndex - colrs.length; } return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: colrs...
  • echarts 横着显示的柱状图 引入echarts的js $(function(){ getdwkhqykpdata(dwkhqykp); }) /** * 获得数据并显示echarts * idname : 显示位置id的名称 */ function getdwkhhgldata(idname){ var xzdata = [20,...
  • 柱状图显示的时候人员名字和人员数据,不展示工号,点击跳到详情要把人员工号传过去。有大佬指导下么
  • echarts柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
  • label,bar的颜色设置 y轴label文字样式设置 文字居左展示 前缀序号,圆圈样式 let colors = { 1: "rgba(216,70,10,1)", 2: "rgba(216,121,10,1)", 3: "rgba(226,187,32,1)", 4: ... 拷贝到Echarts示例当中查看即可;
  • 主要介绍了vue使用echarts实现水平柱形实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • echarts横向倒叙柱状图

    2020-10-29 15:33:28
    margin: 10, color: '#a4a8b4', } }, color: [ new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: 'rgba(235,112,236,.8)' }, { offset: 0.8, color: 'rgba(77,75,221,.8)' }, { offset: 1, ...
  • Echarts横向柱状图

    万次阅读 2018-08-15 17:52:15
    Echarts横向柱状图 1、步骤: 1)、封装Echarts折线图方法registerFunnelChart(),提取出公共的部分; 2)、AJax获取后台数据传参至Echarts公共方法; 3)、模拟后台获取的json数据; 4)、给day...
  • echarts 实现横向柱状图

    千次阅读 2020-12-31 19:33:11
    1 原始效果 2 实现代码 <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript...
  • Echarts的 v5.x 版本提供了属性支持椭圆背景,但是 v5.x 版本之前是不支持的,解决方式:设置两条柱状图重叠在一起即可 需求: 鼠标移入:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,378
精华内容 551
关键字:

echarts横向柱状图