精华内容
下载资源
问答
  • echarts柱状图横向显示
    2022-07-23 23:30:20

    柱状图横向展示数据


    只能说超级简单

    echarts官网最基础的柱状图只需要把x轴和y轴的type换一下就ok
    看下图:
    在这里插入图片描述

    var echarts = require('echarts');//引入echarts
    
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    
    option = {
      xAxis: {
        type: 'value',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'category'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    };
    
    option && myChart.setOption(option);
    
    
    
    
    更多相关内容
  • echarts横向柱状图

    2019-10-12 16:46:46
    设置echarts多个柱状图重叠或者叠加情况,堆叠是数据不会叠加,可以设置堆叠(stack),否则没有,是叠加横向柱状图,柱形图显示数值,以及设置隐藏一段方案(关联和不关联),鼠标移动上去显示的提示内容,动态改变...
  • 一般状态显示: 鼠标悬停时效果: 具体代码及讲解 准备数据 var valdata = [10, 15, 25, 55] var titlename = [ '高风险', '中风险', '较低风险', '低风险' ] 配置颜色项,方便后续使用 var yhColor = [ new...

    效果图

    一般状态显示:
    在这里插入图片描述
    鼠标悬停时效果:
    在这里插入图片描述

    具体代码及讲解

    准备数据

    var valdata = [10, 15, 25, 55]
    var titlename = [
        '高风险',
        '中风险',
        '较低风险',
        '低风险'
    ]
    

    配置颜色项,方便后续使用

    var yhColor = [
        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
                offset: 0,
                color: '#4D0000'
            },
            {
                offset: 1,
                color: '#FF3535'
            }
        ]),
        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
                offset: 0,
                color: '#FFBF2C'
            },
            {
                offset: 1,
                color: '#FFBF2C'
            }
        ]),
        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
                offset: 0,
                color: '#00254D'
            },
            {
                offset: 1,
                color: '#0090FF'
            }
        ]),
        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
                offset: 0,
                color: '#0E4D00'
            },
            {
                offset: 1,
                color: '#67FF9D'
            }
        ])
    ]
    

    图表具体实现

    export function getComsiveRiskOptionnew() {
        return {
            grid: {
                left: '18%',//因为左侧字数较多,调宽一下
                right: '5%',
                bottom: '0%',
                top: '10%',
                containLabel: false
            },
            //鼠标悬停时的工具框样式定义
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'none'
                },
                formatter: function (params) {
                    return (
                        params[0].name +
                        '<br/>' +
                        "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:" + params[0].color.colorStops[0].color + "'></span>" +
                        params[0].seriesName +
                        ' : ' +
                        Number(
                            (params[0].value.toFixed(4))
                        ).toLocaleString() + 'km' +
                        ' <br/>'
                    )
                }
            },
            xAxis: {
                show: false,
                type: 'value'
            },
            yAxis: [
                {
                    type: 'category',
                    inverse: true,
                    axisLabel: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    data: titlename
                },
            ],
            series: [
                {
                    name: '长度',
                    type: 'bar',
                    zlevel: 1,
                    itemStyle: {
                        normal: {
                            position: 'center',
                            barBorderRadius: 0,
                            //数据条颜色设置
                            color:
                                function (params) {
                                    var num = yhColor.length
                                    return yhColor[params.dataIndex % num]
                                }
                        }
                    },
                    barWidth: 8,
                    data: valdata,
                    label: {
                        normal: {
                            show: true,
                            position: 'left',
                            textStyle: {
                                fontSize: 12,
                                color: '#fff',
                                lineHeight: -20,
                            },
                            //左侧效果设置,暂时没找到好的方法让字体两端对齐,所以手动加了空格,后续有好的方法再改
                            formatter: function (data) {
                                var result = ''
                                result += titlename[data.dataIndex]
                                if (titlename[data.dataIndex] === '高风险') {
                                    return '{a|}\n' + '   ' + '高' + ' '+'风'+ ' '+'险'+ ' '
                                } else if (titlename[data.dataIndex] === '中风险') {
                                    return '{b|}\n' + '   ' +  '中' + ' '+'风'+ ' '+'险'+ ' '
                                } else if (titlename[data.dataIndex] === '较低风险') {
                                    return '{c|}\n' + '   ' +  result
                                } else if (titlename[data.dataIndex] === '低风险') {
                                    return '{d|}\n' + '   ' +  '低' + ' '+'风'+ ' '+'险'+ ' '
                                }
                            },
                            //左侧小圆点颜色配置
                            rich: {
                                a: {
                                    width: 5,
                                    height: 5,
                                    backgroundColor: '#D75151',
                                    shadowColor: '#FF3535',
                                    shadowBlur: 8,
                                    shadowOffsetY: 1,
                                    shadowOffsetX: 1,
                                    borderRadius: 100
                                },
                                b: {
                                    width: 5,
                                    height: 5,
                                    backgroundColor: '#EFBE54',
                                    shadowColor: '#FFBF2C',
                                    shadowBlur: 8,
                                    shadowOffsetY: 1,
                                    shadowOffsetX: 1,
                                    borderRadius: 100
                                },
                                c: {
                                    width: 5,
                                    height: 5,
                                    backgroundColor: '#60A0FF',
                                    shadowColor: '#0090FF',
                                    shadowBlur: 8,
                                    shadowOffsetY: 1,
                                    shadowOffsetX: 1,
                                    borderRadius: 100
                                },
                                d: {
                                    width: 5,
                                    height: 5,
                                    backgroundColor: '#67FF9D',
                                    shadowColor: '#67FF9D',
                                    shadowBlur: 8,
                                    shadowOffsetY: 1,
                                    shadowOffsetX: 1,
                                    borderRadius: 100
                                },
                            }
                        }
                    }
                },
                //背景阴影设置
                {
                    name: '背景',
                    type: 'bar',
                    barWidth: '25%',
                    barGap: '-100%',
                    data: [100, 100, 100, 100],
                    itemStyle: {
                        normal: {
                            color: 'rgba(140, 140, 140, 0.4)',
                            barBorderRadius: 0
                        }
                    }
                },
                //背景外框设置
                {
                    name: '外框',
                    type: 'bar',
                    barGap: '-135%',
                    barWidth: '42%',
                    data: [105, 105, 105, 105],
                    itemStyle: {
                        normal: {
                            color: 'rgba(37,48,67,0)',
                            borderWidth: 0.3,
                            borderColor: 'rgba(137,148,167,0.8)',
                            barBorderRadius: 0
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                fontSize: 14,
                                color: '#fff',
                                lineHeight: -20
                            },
                            //右侧数据展示
                            formatter: function (data) {
                                var result = ''
                                result += valdata[data.dataIndex]
                                if (data.dataIndex === 0) {
                                    return '{a|' + result + 'km' + '}'
                                } else if (data.dataIndex === 1) {
                                    return '{b|' + result + 'km' + '}'
                                } else {
                                    return result + 'km'
                                }
                            },
                            //右侧数据颜色配置项
                            rich: {
                                a: {
                                    color: 'rgba(255,91,92)',
                                    fontSize: 14,
                                    fontWeight: 600
                                },
                                b: {
                                    color: '#FDE266',
                                    fontSize: 14,
                                    fontWeight: 600
                                }
                            }
                        }
                    }
                }
            ]
        }
    }
    
    展开全文
  • 该案例设置 echarts 柱状图渐变色,同样也可以应用折线图、圆形图等。效果说明:https://blog.csdn.net/qq_36437172/article/details/106115048
  • Echarts横向柱状图

    千次阅读 2022-04-06 18:09:50
    %> 统计 /page/hcbh/api/taskpush/stats/echarts-5.3.1.js"> 3、javascript $(document).ready(function() { stats_status(); }); /** * 按状态统计 */ function stats_status(){ var url = "/gds/query/list.do...

    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>
    
    </body>

    3、javascript

    $(document).ready(function() {
    
        stats_status();
    
    });
    
    
    
    /**
    
     * 按状态统计
    
     */
    
    function stats_status(){
    
        var url = "/gds/query/list.do";
    
        var data = {
    
            "c":"stats_type"
    
        };
    
        var res =  ajaxData(url,data);
    
    
    
        // 基于准备好的dom,初始化echarts实例
    
        var myChart = echarts.init(document.getElementById('status'));
    
    
    
        if(res.length === 0){
    
            //无数据展示
    
            myChart.setOption({
    
                title: {
    
                    text: '暂无数据',
    
                    x: 'center',
    
                    y: 'center',
    
                    textStyle: {
    
                        color: '#65ABE7',
    
                        fontWeight: 'normal',
    
                        fontSize: 16
    
                    }
    
                }
    
            });
    
        }else{
    
            var dataAxis = []; //X轴name
    
            var dataYis = []; //y轴值
    
            var dataPercent = [];//百分比
    
    
    
            for (var i in res) {
    
                dataAxis.push(res[i].name);
    
                dataYis.push(res[i].total);
    
                dataPercent.push(res[i].percent)
    
            }
    
    
    
            //绘制图表
    
            myChart.setOption({
    
                tooltip: {
    
                    trigger: 'axis',
    
                    axisPointer: {
    
                        type: 'shadow'
    
                    },
    
                    formatter:function(params){
    
                        return params[0].name + "<br>数量:" +params[0].value + "<br>占比:" + dataPercent[params[0].dataIndex]
    
                    }
    
                },
    
                grid: {
    
                    left: '3%',
    
                    // right: '4%',
    
                    bottom: '3%',
    
                    containLabel: true
    
                },
    
                xAxis: {
    
                    type: 'value',
    
                    boundaryGap: [0, 0.01]
    
                },
    
                yAxis: {
    
                    type: 'category',
    
                    data: dataAxis
    
                },
    
                series: [
    
                    {
    
                        name: '案件状态',
    
                        type: 'bar',
    
                        data: dataYis,
    
                        label:{
    
                            show:true,
    
                            position:'right',
    
                            formatter:function(params){
    
                                return params.value + " (" + dataPercent[params.dataIndex]+")";
    
                            }
    
                        }
    
                    }
    
                ]
    
            });
    
        }
    
        window.onresize = myChart.resize;
    
    }

    4、数据

    展开全文
  • Echarts柱状图的数值显示、柱宽度、横向柱状图。

    Echarts柱状图的数值显示、柱宽度、横向柱状图
    在这里插入图片描述

    <script>
    import * as echarts from "echarts";
    
    export default {
      data() {
        return {};
      },
      mounted() {
        var BarChart = echarts.init(document.getElementById("barChart"));
        let xDataArr = ["张三", "李四", "王五","闰土","小明", "茅台","二妞", "大强"];
        let yDataArr = [88, 92, 63, 77, 94, 80, 72, 86];
        let option = {
          xAxis: {
            type: "value", //横向柱状图,交换xAxis和yAxis的type
          },
          yAxis: {
            type: "category",
            data: xDataArr,
          },
          series: [
            {
              label: {
                //数据显示的位置
                show: true, //数值是否显示
                rotate: 60, //数值显示的角度
                position: "top", //数值相对于柱状图显示的位置
              },
              barWidth: "30%", //柱的宽度
            },
          ],
        };
        BarChart.setOption(option);
      },
    };
    </script>
    
    展开全文
  • Echarts 柱状图自动刷新数据,前台js的写法,不涉及到后台,下载打开即可查看效果
  • echarts中柱状图横向显示__柱状图横向显示带有边框__胶囊柱状图,有背景(完整代码)
  • echarts——横向柱状图

    千次阅读 2021-12-14 16:54:02
    全屏横向柱状图 从小到大排序,每次显示5条,每3秒切换循环显示 鼠标移入停止切换,鼠标移出继续切换 柱状图组件源码 <template> <div class="w100 h100"> <div ref="bar" class="w100 h100">&...
  • echarts 柱状图上方显示数值

    千次阅读 2021-12-23 18:14:02
    //显示数值 itemStyle: { normal: { label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 colo...
  • Echarts 柱状图上方显示数值

    千次阅读 2021-08-24 16:01:33
    完整配置可查看 Echarts Bar横向柱状图 柱体的属性设置series中label可以是一个函数,在函数中处理。可以设置位置,字体颜色和大小等。核心代码为params.value[params.encode.x[0]]。 let series = [ { // ...... ...
  • 此文章讲解 Echarts 在 vue 开发中的使用方式以及实现效果的 demo (Echarts 柱状图横向排版颜色渐变效果)示例展示; 如有疑问或者不清楚的欢迎随时提问 。 废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有...
  • echarts横向柱状图和grid)

    千次阅读 2021-11-26 16:37:47
    最近在做知识图谱的时候,右侧弹窗需要有数据统计功能,大概UI如下图,当时想到的是横向柱状图来实现,目前的效果与UI的不同是后面统计的数量显示的位置。后来经其他前端同事启发,他是用进度条来实现的,发现自己...
  • // 利用的是顶部标记,但是把symbolSize设置为0,就不会显示icon。 symbolSize: 0, // 这里的arr是柱状体顶部的数值 data: [{ coord: [0, arr[0]] }, { coord: [1,arr[1]] }, { coord: [2,arr[2
  • echarts柱状图显示坐标轴和数值

    千次阅读 2022-03-07 14:11:04
    显示坐标轴以及坐标轴刻度线 axisLine: {show:false},//不显示坐标轴 axisTick:{ show:false,//不显示坐标轴刻度线 }, 不显示坐标轴数值 show:false, ...数据显示柱状图上方 label: { distance:5,
  • lineStyle: { color: '#32498A' } }, axisLabel: { fontSize: 18 * this.scale, color: '#44F0E9', interval:0 // 解决刻度显示不全 } }, yAxis: { type: "value", splitLine: { show: true, lineStyle: { color: '...
  • const barChart = echarts.init(indexChart.value); // barChartOptions 配置项,推荐放在外部引入。 resizeChart(indexChart.value, barChart, state.obj.option); var div = document.createElement("div"); ...
  • echarts 横向柱状图

    千次阅读 2022-05-16 16:42:15
    echarts 横向柱状图,坐标轴隐藏,网格线颜色渐变,网格默认背景,柱状图边框宽度/颜色,数据渐变,刻度线隐藏等;
  • echarts 柱状图如何横向展示

    千次阅读 2020-11-24 16:45:58
    下列代码为柱状图横向展示内容,将xAxis与yAxis里面的内容互换,则为纵向轴展示 xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { type: 'category', data: [24210,32524,50434,52421,98742] }, ....
  • echarts柱状图如何从纵向改为横向

    千次阅读 2021-08-31 17:46:12
    xAxis:[{ type:'value' }], yAxis:[{ type:'category' }], 将xAxis的type设置为value, 将yAxis的type设置为category 即可实现横向显示 反之是纵向
  • 以上是横向柱状图的解决方案,如果是竖向柱状图,稍微改一下一些地方就ok,差不多的。因为是vue框架,option配置项是用initOption方法提出来写的。,这时候数值会显示在y轴左侧,这时候上面的方法里的位置计算才准确...
  • import echarts from 'echarts' /** * 2. 拥堵路段--carJam.vue */ var option_carJam = { title: { show: false }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, textStyle: { // ...
  • ECharts横向柱状图

    千次阅读 2021-11-15 17:36:43
    效果 背景图片 下载ECharts npm install echarts --save 引入并注册全局ECharts     在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 ) import Vue from 'vue' import App from './App.vue' import ...
  • 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: ...
  • 设置echarts多个柱状图重叠或者叠加情况,堆叠是数据不会叠加,可以设置堆叠(stack),否则没有,是叠加横向柱状图,设置隐藏一段方案
  • 柱状图柱子的顶部,显示当前纵坐标数据。 这里使用formatter,判断当数值为0时,返回空字符串。 如果想在顶端数值后加单位,可以判断数值不为0时 return val.value +‘单位’
  • 效果如: 核心代码: series: [ { type: "bar", barMaxWidth: 25, data: this.YList.map((item) => { // 循环 return { value: item, label: { .
  • ECharts横向柱状图

    千次阅读 2021-11-15 17:11:40
    效果 背景图片 下载ECharts npm install echarts --save 引入并注册全局ECharts     在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 ) import Vue from 'vue' import App from './App.vue' import ...
  • echarts 横着显示柱状图 引入echarts的js $(function(){ getdwkhqykpdata(dwkhqykp); }) /** * 获得数据并显示echarts * idname : 显示位置id的名称 */ function getdwkhhgldata(idname){ var xzdata = [20,...

空空如也

空空如也

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

echarts柱状图横向显示