UI给了设计图，看了一眼觉得简单，不就是无序列表布局嘛（ul，li），后来才知道那是echarts图，好吧，样式如下：

代码如下：（渐变色没做）

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="ECharts">

<title>Echarts绘制横向柱状图(圆角+渐变)</title>

<script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.min.js"></script>

</head>

<body>

<div id="main" style="width: 1000px;height:400px;"></div>

<script type="text/javascript">

     var myChart = echarts.init(document.getElementById('main'));

    //初始化数据

    var category = ['小王', '小李', '小赵', '小马', '小刘', '小张', '小齐'];

    var barData = [3100, 2142, 1218, 581, 431, 383, 163];

    var yMax = 4000;

    var dataShadow = [];

    for(var i=0; i<barData.length; i++) {

        dataShadow.push(yMax)

    }

    var option = {

        tooltip: {

            trigger: 'axis',

            axisPointer: {

                type: 'shadow'

            }

        },

        grid: {

            left: '3%',

            right: '4%',

            bottom: '3%',

            containLabel: true

        },

        xAxis: {

            type: 'value',

            axisLine: {

                show: false

            },

            axisTick: {

                show: false

            },

            axisLabel: {

                show: false

            },

            splitLine:{

                show:false

            }

        },

        yAxis: {

            type: 'category',

            data: category,

            splitLine: {show: false},

            axisLine: {

                show: false

            },

            axisTick: {

                show: false

            },

            axisLabel: {

                show: false

            },

            offset: 10,

            nameTextStyle: {

                fontSize: 15

            },

            splitLine:{

                show:false

            },

            data: category

        },

        series: [

            { // For shadow

                name: '数量',

                type: 'bar',

                itemStyle: {

                    normal: {

                        barBorderRadius: 40,

                        color: 'rgba(0,0,0,0.05)'

                    },

                    emphasis: {

                        barBorderRadius: 40

                    },

                },

                barGap:'-100%',

                barCategoryGap:'50%',

                // barCategoryGap:'40%',

                data: dataShadow,

                animation: false

            },

            {

                name: '数量',

                type: 'bar',

                data: barData,

                smooth: true,

                label: {

                    normal: {

                        show: true,

                        position: 'topLeft',

                        offset: [5, -4],

                        textStyle: {

                            color: '#999',

                            fontSize: 13

                        },

                        formatter:function(param) {

                            for(let i=0; i<category.length; i++) {

                                if(param.dataIndex == i) {

                                    return category[i];

                                }

                            }

                        }

                    }

                },

                itemStyle: {

                    emphasis: {

                        barBorderRadius: 40

                    },

                    normal: {

                        barBorderRadius: 40,

                        color: function(params) {

                                let colorList = ['red', 'orange', 'yellow', 'green', 'skyBlue', 'blue', 'purple'];

                                return colorList[params.dataIndex];

                            }

                    }

                }

            }

        ]

    };

    myChart.setOption(option);

</script>

</body>

</html>

　　

echarts —— 绘制横向柱状图（圆角、无坐标轴）的更多相关文章

  1. Echarts绘制横向柱状图

    效果图: 关键配置: 将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示

  2. echarts实现饼图及横向柱状图的绘制

    项目中需要绘制饼图,因此简单学习了下echarts的基本使用.head中引入js文件: <script src="/static/frame/echarts/echarts.min.j ...

  3. 如何基于 echarts 实现区间柱状图（包括横向）？

    目录 需求 借鉴 echarts 的 demo 最终实现思路 实现效果 遇到的问题: 代码映射 源码 最后 始终如一 需求 需要利用 echarts 实现区间柱状图,效果如下: 效果来源于:g2-柱状 ...

  4. echarts_部分图表配置简介_横向柱状图

    横向柱状图主要配置x位置x轴类型y轴类型(轴的类型分两种 1.category(类别)2.value(值)),代码简单(里面有注释)效果如下: var myChart = echarts.init(d ...

  5. 前端统计图 echarts 实现简单柱状图

    前端统计图   echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...

  6. C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  7. C# 绘制统计图(柱状图, 折线图, 扇形图)

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  8. 使用echarts绘制漂亮的渐变键盘仪表盘

    echarts官方示例和默认样式都比较难看,经过一顿捣鼓实现比较漂亮的渐变仪表盘. 第一步:设置轴线 将图表轴线.label.分割线.隐藏,只保留刻度,然后修改刻度样式达到最终效果.不过要注意的是ax ...

  9. ASP.NET Core +Highchart+ajax绘制动态柱状图

    一.项目介绍利用前端Highchart,以及ajax向后台获取数据,绘制动态柱状图.hightchart其他实例可查看官网文档.[Highchart](https://www.highcharts.c ...

随机推荐

  1. kotlin陪伴对象

    在kotlin中并没有静态类成员的概念,但并不等于实现类似于静态类成员的功能,陪伴对象可以解决这个问题 fun main(arg: Array<String>) { val create ...

  2. Kontln的属性形式Getter和Setter

    package loaderman.demo class Person { val name: String get() = "name" var v: Int = 0 var v ...

  3. js常用的正则

     1.5位整数带两位小数/^\d{0,5}(\.\d{0,2})?$/g 2.邮箱/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$ ...

  4. mongodb 添加用户报错TypeError:db.addUser is not a function (mongodb3.4.1)

    1:问题如下: 原因是 新版的MongoDB已经不支持addUser方法了. 改成createUser了. 使用方法如下    2:具体解释一下db.createUser()方法的用法   定义: 创 ...

  5. Sql 中常用日期转换Convert(Datetime) convert datetime

    Convert(data_type,expression[,style]) Convert(varchar(10),字段名,转换格式) 说明:此样式一般在时间类型(datetime,smalldate ...

  6. 微信小程序文字超过行后隐藏并且显示省略号

    在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...). 只需要在对应的text中设置下面的css就可以了. overflow:hidd ...

  7. 《剑指offer》树专题 (牛客10.25)

    考察的知识点主要在于树的数据结构(BST,AVL).遍历方式(前序,中序,后序,层次).遍历算法(DFS,BFS,回溯)以及遍历时借助的数据结构如队列和栈.由于树本身就是一个递归定义的结构,所以在递归 ...

  8. KMP --关于cogs1570 乌力波

    题目链接:http://cogs.pro:8081/cogs/problem/problem.php?pid=vQzXJkgWa [题目描述] 法国作家乔治·佩雷克(Georges Perec,193 ...

  9. logstash数据迁移

    logstash是一个非常强大的数据迁移工具.这里主要记录今天使用到的几个简单用法. 其中比较需要注意的是 迁移到elasticsearch的时候,output 的 elasticsearch 中的 ...

  10. Memcache分布式锁

    在分布式缓存的应用中,会遇到多个客户端同时争用的问题.这个时候,需要用到分布式锁,得到锁的客户端才有操作权限 下面通过一个简单例子介绍: 这里引用的是Memcached.ClientLibrary.d ...