精华内容
下载资源
问答
  • echarts多维条形图 柱状图作图,来自官网代码,图形化 展示 大数据 信息
  • echarts柱状图、饼状图、条形图

    热门讨论 2015-04-30 10:52:18
    echarts柱状图、饼状图、条形图等等,帮你快速的解决各种图形。里面包含各种实例,可快速入手,无难度。
  • ECharts 官网说明文档 在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。 <body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --&...

    参考文章:参考
    ECharts 官网说明文档

    在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

    <body>
        <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
        <div id="main" style="width: 600px;height:400px;"></div>
    </body>
    

    然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <!-- 引入 echarts.js -->
        <script src="echarts.min.js"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    </html>
    

    这样你的第一个图表就诞生了!
    这里写图片描述

    当您在研发项目,研究论文,技术报告,新闻报告,书籍,演示文稿,教学,专利等中使用 ECharts 时,请引用以下论文。
    ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization
    Deqing Li, Honghui Mei, Yi Shen, Shuang Su, Wenli Zhang, Junting Wang, Ming Zu, Wei Chen.
    Visual Informatics, 2018 [PDF]

    这里面我主要讲一下我在开发的时候自己遇到的问题和解决方案:

    ①js文件的引用,推荐引用带有源码的echart.js,有的是使用echart.min.js ,echart是附带全部源码的文件,适合开发使用

    ②echarts的各个属性配置 按照需求根据官方api设置 推荐API地址:http://echarts.baidu.com/echarts2/doc/doc.html

    ⑤图表各项数据与后台交互,详细参考js中getChartData()方法。

    展开全文
  • 文件结构:
  • 本文针对多维离散数据和多维连续数据,利用Echarts插件构建多维可视化图表。主要涉及Echarts接口扩展和新增,以及数据的处理、包装、合并等。由于离散和连续图表展示的效果差别大,故多维图表的可视化,分为两大部分...

    前言:本文针对多维离散数据和多维连续数据,分别构建多维可视化图表。由于离散和连续图表展示的效果差别大,故多维图表的可视化,分为两大部分进行设计和实现。

    总体设计思想:主要是采用类似树形图结合柱状图、线图、散点图、面积图。树形图主要展示的是维度的值,和各个维度值之间的关系。如图(1)所示。第一条数据:[“企业”, “个人政府征订”,”奉化站”,”2013-07”, 6500],在图表中与这条数据相关的内容,除了第一根蓝色方形,还包括红线相连的名称(企业,个人政府征订,奉化站)。如果把图中所有的名称相互连接起来,像图中红线一样,是不是感觉像一棵树?特别要注意的是(企业-个人政府征订-奉化站) 可以看成一个分组,在这个分组里可能有不止一个值,它分布着多条数据。

    这里写图片描述

    图1:多维数据展示

    总体实现方式:要实现如图1所示的效果,可以采用Echarts插件的各种组件经过一系列的计算和整合,当然其中肯定涉及插件若干接口的改造和新增。最终生成的图表才能展示出我们需要的效果。

    多维离散型数据的设计思路

    多维离散型数据的定义:所有的维度都是离散的,不存在任何连续型维度。对于多维离散型数据,由于在每一条数据相互之间在轴上并没直接关系,关系同属于一个分组。对于同一个度量,各个分组展示出来的图表类型应该是一致的。(特殊情况,对于三个维度的数据,类目气泡图也是可以展示的)

    基于Echarts插件的多维离散型数据可视化实现
    一、问题阐释
    1. 基于Echarts插件,要实现多维数据可视化,是否有官方接口,如果有官方接口不就轻松搞定?
    通过查看Echarts的文档,发现确实有一个图表类型,可以展示多维数据,如图2所示,但是这种展示方式,貌似并不能适合所有多维数据,而且可视化的效果有点差强人意。
    这里写图片描述

    图2 Echarts的多维数据展示

    2. 如果要实现我们设计的树形加普通图表的展示方式,如何实现树形?如何进行分组?每一个分组高和宽占用整个图表高和宽多少?每一个分组由于是同一个度量,是不是应该共享同一个度量轴?
    对于这些问题,暂时不做回答。接下来,我会手把手教大家如何解决这些问题,最终实现整个多维图表。

    二 多维数据的结构
    要实现整个设计,一共需要三个数据结果,我把它们取名:data,measure, dimension。具体的数据例子,如下所示,data:是一个二级数组[[d1,..,dn,m1,..,mn],…,[d1,..,dn,m1,..,mn]] (dn:表示第n个维度的信息,而mn表示n个度量的信息),它存储着图表要显示的多维数据详情,每一条数据时一个数组,数组的前几位是维度的值,后几位是度量的值。measure:是一个数组,它存储着度量字段的相关信息,数组内每条数据时一个js对象,对象的key属性,是度量的关键字,用于区分其他度量;alias属性时度量的别名,用于显示度量的中文名称;state属性表示度量所对应的图表类型。dimension :也是一个数组,构造跟measure差不多,公共的属性表示的含义和measure是一样的,continuity字段表示的是维度的连续性,’11’表示是连续的。colType:表示维度的数据类型。如果是离散的,维度的数据类型一般都是字符串型的。

    var data = [
        [
            "企业",
            "余姚站",
            "2013-05",
            0.015
        ],  
        ...
        [
            "普通客户",
            "仓基站",
            "2013-01",
            0.019
        ]
    ];
    var dimension = [
        {
            "key":"cust_type",       
            "alias":"cust_type",
            "continuity":"00",
            "colType":"string"
        },
        ....
        {
            "key":"Month",     
            "alias":"Month", 
            "continuity":"11",
            "colType":"date"
        }
    ];
    var measure =      
    [
        {
            "key":"huan_bi",     
            "alias":"总和_huan_bi",            
            "state":"bar"
        },
        ...
         {
            "key":"tong_bi",
            "alias":"总和_tong_bi",                  
            "state":"bar"
        }
    ];
    

    三、Echarts接口的扩展和新增

    为了解决(1)提出的问题,在Echarts的接口一共需要扩展一个接口,新增2个接口。
    扩展的接口主要是
    Axis.prototype.dataToCoord;该接口主要负责计算名称或者叫标签的坐标值;在Echarts中标签值叫label,而字符串的label一般用category离散的轴表示,每一个label之间的距离是等距的。这个与我们要求是有出入的,因为在多维图表中,每一个label之间并不一定是等距的,所以我们要定距给其一个值,使之满足我们的要求。而这个值的计算是在Echarts插件外部进行的,由函数calLabelProperty完成。

    calLabelProperty函数的功能,主要是计算跟label定位和显示相关的三个属性值,line:表示两个label之间的分割线;area表示每条label信息在图表中所占的宽度;curBit表示每条label在图表上的位置。代码中normalizeData变量保存着每一个label在一条轴上的比率值,介于0和1之间。

     dataToCoord: function (data, clamp) {
                    var extent = this._extent;
                    var scale = this.scale;
                    var normalizeData = this.model.get('normalizeData');
                    //沈才良 @face
                    if (normalizeData) {
                        data = normalizeData[data];
                    } else {
                        data = scale.normalize(data);
                    }
    
                    if (this.onBand && scale.type === 'ordinal') {
                        extent = extent.slice();
                        fixExtentWithBands(extent, scale.count());
                    }
    
                    return linearMap(data, normalizedExtent, extent, clamp);
                },
    calLabelProperty: function(chartLabelData, isContinue) {
        var categoryLabel = [];
        var sum = 0, labelArray, percentArray, areaArray;
        var curSum = 0, curBit = 0;
        var curBitArray = [];
        var classNum = chartLabelData.length;
    
        for (var i = 0; i < classNum; i++) {                
            //如果图表是离散的,则是label的总和
            sum = isContinue ? chartLabelData[classNum - 1].labelData.length : chartLabelData[i].sum;
            //当前的统计和
            curSum = 0;
            categoryLabel[i] = {};
            /*
               labelArray: 保存每一个维度上的label
               lineArray: 保存各个label之间的分隔线的位置
               curBitArray: 保存各个label的位置
               areaArray: 保存各个label在图表上所占的区域宽
            */
            labelArray = categoryLabel[i].label = [];
            lineArray = categoryLabel[i].line = [];
            curBitArray = categoryLabel[i].percent = [];
            areaArray = categoryLabel[i].area = [];
            //求出每一个类别子项的显示位置的值
            for(var j = 0, dataItem; j < chartLabelData[i].labelData.length; j++) {
                dataItem = chartLabelData[i].labelData[j];  
                //连续的时候,离散的最后一个维度计算curSum等于 j + 1               
                if (isContinue && i == (classNum - 1)) {
                    curSum = j + 1;
                } else {
                    curSum += dataItem.count;
                }   
                 //删除label里面的换行符号
                labelArray.push((dataItem.labelName + '').replace(/\r\n/g, ' '));
                lineArray.push(curSum / sum);
            }
            //每一个维度的第一个分组信息计算,跟其他分组不一样
            curBitArray[0] = lineArray[0] / 2;
            areaArray[0] = lineArray[0];
            for ( j = 1; j < lineArray.length; j++) {
                areaArray.push(lineArray[j] - lineArray[j-1]);
                curBitArray.push(lineArray[j - 1] + (lineArray[j] - lineArray[j - 1]) / 2);
            }
        }
        return categoryLabel;
    },

    新增的接口主要是:label之间的分割线、悬浮label所占区域时候区域背景色改变的变化接口。
    新增接口的定义在AxisBuilder构造函数所属区域中builders.axisLabel函数中。

       //添加标签的hover事件
        buildHoverRect({
            group: this.group, 
            pos: pos, 
            textEl: textEl, 
            axisModel: axisModel, 
            contentBit: areaData[index]
        });
        /**
          * 当用户悬浮在label上面
          * 则显示整个label分组所占的空间
          * 由于zrender默认的hide和show函数
          * 当数据超过100多时,性能差,故采用
          * 设置opacity达到显示和隐藏的效果
        */
        textEl.on('mouseover', function (event) {
            this.hoverRect.setStyle('opacity', 0.24);
        });
        /**
           * opacity = 0表示隐藏该label有颜色背景
           * textEl:表示每一个label在图表上的实体
        */
        textEl.on('mouseout', function (event) {
            this.hoverRect.setStyle('opacity', 0);
        });
        /**
            * 生成hover时候出现的矩形和背景
            * @param {Object} params: userful params to build hover rect
            * @param {Number} contentBit: 每一个label所在的区域长度,[0,1]之间
            * @param {Array.<Number>} pos: label的坐标值,二维的
        */
        function buildHoverRect(params) {   
            var axisModel = params.axisModel;
            var coordinateRect = axisModel.coordinateSystem && axisModel.coordinateSystem._rect;
            var extent = axisModel.axis.getExtent();     
            var axisWidth = extent[1] - extent[0];  
            //得到显示区域的宽度大小       
            var contentWidth = Math.ceil(axisWidth * params.contentBit);
            var rect = new graphic.Rect({
                shape: {
                    x: params.pos[0] + coordinateRect.x - contentWidth / 2,
                    y: params.pos[1] + coordinateRect.y - 7, 
                    height: 28,
                    width: contentWidth
                },
                z: 2,
                style: {
                     fill:'green',
                     opacity: 0,
                     lineWidth: 1
                },
                silent: false
            });
            //添加到group中,以便echarts统一绘制
            params.group.add(rect);
            //方便隐藏和显示
            params.textEl.hoverRect = rect;
        }

    第二个重要的接口新增是buildSplitLine函数,主要负责构建label之间的分隔线。具体代码和注释如下所示:

    /**
      * 生成label之间的分割线,方便用户识别不同的label分组
       * {Array} group:分组组件,生成的line只有放入这个组件中,才能统一绘制
       * {Object} axisModel: 坐标轴的model模型,主要保存与坐标轴相关的信息
    */
    function buildSplitLine(group, axisModel) {
        var axisType = axisModel.mainType;
        var show = axisModel.get('classSplitLine.show');
        if (axisType != "singleAxis" || show !== true) {
            return;
        }
        //获取分割线的所需的数据,由外部接口calLabelProperty计算出
        var data = axisModel.get('classSplitLine.data');
        var coordinateRect = axisModel.coordinateSystem && axisModel.coordinateSystem._rect;
        var extent = axisModel.axis.getExtent();     
        var axisWidth = extent[1] - extent[0];  
        var point1 = [];
        var point2 = [];
        for (var i = 0 ; i < data.length - 1; i++) {
            //求出分隔线两个端点的坐标值
            point1[0] = data[i] * axisWidth + coordinateRect.x;
            point1[1] = coordinateRect.y;
            point2[0] = data[i] * axisWidth + coordinateRect.x;
            point2[1] = coordinateRect.y + 26;  
            var line = new graphic.Line(graphic.subPixelOptimizeLine({
                shape: {
                    x1: point1[0],
                    y1: point1[1],
                    x2: point2[0],
                    y2: point2[1]
                },
                style: {
                     stroke: "#d3d3d3",
                     color: '#666',
                    // lineDash: [4, 4],
                     opacity: 0.5,
                     lineWidth: 1
                },
                z2: 3,
                silent: true
            }));
            group.add(line);
        }
    }

    这几个接口具体定义的位置,请参考我详细的源码。
    源码下载地址:http://download.csdn.net/download/mulumeng981/9985030 (基于Echarts最新版3.7.1)

    如果你注意到一个不准确或似乎不太正确的地方,请让我知道。谢谢!

    展开全文
  • echarts官网https://echarts.apache.org/zh/index.html Echarts是什么 ECharts,一个使用 JavaScript 实现的开源可视化库...ECharts 提供了常规的折线、柱状、散点、饼图、K线,用于统计的盒形,用于地理数据

    echarts官网https://echarts.apache.org/zh/index.html

    Echarts是什么

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

    ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。

    1、折线图

    折线图是排列在工作表的列或行中的数据可以绘制到折线图中。折线图可以显示随时间(根据常用比例设置)而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势。 在折线图中,类别数据沿水平轴均匀分布,所有值数据沿垂直轴均匀分布。
    1、步骤

    1)引入Echarts

    echarts.min.js本地下载地址https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js
    如果打不开
    在C:\Windows\System32\drivers\etc的hosts添加
    修改不了就右击–>属性–>安全–>组或用户名 -->编辑–>点上修改。再永济市本打开hosts添加

    199.232.68.133 raw.githubusercontent.com
    

    在这里插入图片描述在这里插入图片描述
    2)为 ECharts 准备一个具备高宽的 DOM 容器

    3)绘制图表

    2、基本框架

    echarts.min.js

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>猪圈</title>
        <!--第一种方法, 引入本地 ECharts 文件 -->
        <script src="echarts.min.js"></script>
        <!--第二种方法  引入CDN ECharts 文件,二选一即可 -->
        <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
    </head>
    
    <body>
        <div id="xx" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('xx'));
    
            // 指定图表的配置项和数据
            var option = {
               
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    </html>
    

    3、完整代码
    echarts.html

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>猪圈</title>
        <!--第一种方法, 引入本地 ECharts 文件 -->
        <script src="static/js/echarts.min.js"></script>
        <!--第二种方法  引入CDN ECharts 文件,二选一即可 -->
        <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
    </head>
    
    <body>
        // ECharts 准备一个具备高宽的 DOM 容器
        <div id="line" style="width: 600px;height:400px;"></div>
        <div id="bar" style="width: 600px;height:400px"></div>
        <div id="pie" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var line_chart = echarts.init(document.getElementById('line'));
    
            // 指定图表的配置项和数据
            var line_option = {
                title: {
                    text: '未来一周气温变化',
                    textStyle: {
                        color: "#333",
                        fontStyle: 'italic', //主标题文字字体的风格'normal''italic''oblique'
                        fontWeight: 'lighter', //主标题文字字体的粗细'normal''bold''bolder''lighter'100 | 200 | 300 | 400...
                        fontFamily: 'serif', //主标题文字的字体系列还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
                        fontSize: 20
                    }
                },
                legend: {
                    data: ['最高气温', '最低气温']
                },
                tooltip: {
                    show: true,
                    trigger: 'axis' //交互
                },
                //工具栏
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {
                            readOnly: false
                        },
                        magicType: {
                            type: ['line', 'bar']
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: "category",
                    data: ["Mon", "Tue", "Web", "Thu", "Fri", "Sat", "Sun"],
                    boundaryGap: false //是否留空
    
                },
                yAxis: {
                    tyrp: 'value',
                    axisLabel: {
                        formatter: '{value} °C '
                    }
                },
                series: [{
                        name: "最高气温",
                        data: [11, 11, 15, 13, 12, 13, 10],
                        type: 'line',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'red' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'blue' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }, //填充
                        smooth: true, //线平滑
                        markPoint: {
                            data: [{
                                type: "max",
                                name: "最大值"
                            }, {
                                type: "min",
                                name: "最小值"
                            }]
                        },
                        markLine: {
                            data: [{
                                type: "average",
                                name: '平均值'
                            }]
                        }
                    }, {
                        name: "最低气温",
                        data: [1, -2, 2, 5, 3, 2, 0],
                        type: 'line',
                        areaStyle: {
    
                        }, //填充
                        smooth: true, //线平滑
                        markPoint: {
                            data: [{
                                name: "周最低",
                                value: -2,
                                xAxis: 1,
                                yAxis: -1.5
                            }]
                        },
                        markLine: {
                            data: [{
                                type: "average",
                                name: '平均值'
                            }]
                        }
                    },
    
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            line_chart.setOption(line_option);
            //基于准备好的demo,初始化echarts实例
            var bar_chart = echarts.init(document.getElementById('bar'));
            var bar_option = {
                backgroundColor: '#d0e4fe', //背景颜色
                color: '#ebabab', //条颜色
    
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器,坐标轴触发有效
                        type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                    }
                },
                legend: {
                    data: ["直接访问"]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: '直接访问',
                    type: 'bar',
                    barWidth: '60%',
                    data: [10, 52, 200, 334, 390, 330, 220],
                    itemStyle: {},
                    barWidth: 30  //条状宽度
                }]
            };
            bar_chart.setOption(bar_option)
    
            //基于准备好的dom,初始化echarts实例
            var pie_chart = echarts.init(document.getElementById("pie"))
            var pie_option = {
                title: {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: ['30%', '70%'],
                    center: ['50%', '60%'],
                    data: [{
                        value: 335,
                        name: '直接访问'
                    }, {
                        value: 310,
                        name: '邮件营销'
                    }, {
                        value: 234,
                        name: '联盟广告'
                    }, {
                        value: 135,
                        name: '视频广告'
                    }, {
                        value: 1548,
                        name: '搜索引擎'
                    }],
                    label: {
                        show: true,
                        //position: "center"
                    },
    
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: true
                    },
                }]
            };
            pie_chart.setOption(pie_option);
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    其他属性官网都有可以去查找https://echarts.apache.org/zh/option.html#title

    展开全文
  • 多方调查结合,终于整出了完美的地图展示及下钻功能,完美结合柱状、条形一体化
  • Echarts柱状基本配置

    2021-01-26 10:23:41
    可以在网格上绘制折线,柱状,散点(气泡)。 // left: "3%", // right: "4%", // bottom: "8%", // containLabel: true // grid区域是否包含坐标轴的刻度标签,避免标签名字太长溢出 }, series: { // 系列...
    barOption = {
        xAxis: {
            // x轴
            type: "category",
            // 坐标轴刻度标签的相关配置
            axisLabel: {
                show: true,
                color: "#c23531", // 标签的字体颜色
                interval: 0, // 坐标轴刻度标签的显示间隔,默认会采用标签不重叠的策略间隔显示标签.设置成0强制显示所有标签,1表示隔一个标签显示一个标签,以此类推
                rotate: 40, // 坐标轴刻度标签(逆时针)旋转40度显示,旋转的角度从 -90 度到 90 度。
                formatter(params) {
                    // 刻度标签的内容格式器
                    // 标签过长大于4,显示...
                    if (params.length > 4) {
                        return params.substring(0, 4) + "...";
                    } else {
                        return params;
                    }
                }
            }
        },
        yAxis: {
            // y轴
            type: "value"
        },
        tooltip: {
            // 提示框组件
            trigger: "axis", // 触发类型:坐标轴触发,这个字段的功能是:在堆积柱状图的时候hover柱子的时候会出现整个柱子的数据,而不是只出现当前鼠标所在柱子区域的数据。'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
            axisPointer: {
                type: "shadow"
            },
            confine: true, // 是否将 tooltip 框限制在图表的区域内。当图表外层的 dom 被设置为 'overflow: hidden',或者移动端窄屏,导致 tooltip 超出外界被截断时,此配置比较有用。
    
            position: function(point, params, dom, rect, size) {
                // console.info("当前鼠标所在位置", point[0], point[1])
                // console.info("提示框大小", size.contentSize[0], size.contentSize[1])
                // 提示框位置
                var x = 0; // x坐标位置
                var y = 0; // y坐标位置
    
                // 当前鼠标位置
                var pointX = point[0];
                var pointY = point[1];
    
                // 提示框大小
                var boxWidth = size.contentSize[0];
                var boxHeight = size.contentSize[1];
    
                // boxWidth > pointX当盒子宽度大于鼠标的位置(即鼠标与左边框的距离)说明鼠标左边放不下提示框
                if (boxWidth > pointX) {
                    x = 5;
                } else {
                    // 左边放的下
                    x = pointX - boxWidth;
                }
                // boxHeight > pointY 当盒子高度大于鼠标的位置(即鼠标与上边框的距离)说明鼠标上边放不下提示框
                if (boxHeight > pointY) {
                    y = 5;
                } else {
                    // 上边放得下
                    y = pointY - boxHeight;
                }
                return [x, y];
            },
    
            formatter(params) {
                // 提示框的内容格式器
                const title = params[0].name;
                let title1 = "";
                let title2 = "";
                let results = "";
                if (title.length > 20) {
                    title1 = title.slice(0, 20);
                    title2 = title.slice(20);
                } else {
                    title1 = title;
                }
                params.forEach(item => {
                    results +=
                        "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:" +
                        item["color"] +
                        "'></span>" +
                        item["seriesName"] +
                        ":" +
                        item["value"] +
                        "<br/>";
                });
                if (title2.length) {
                    return title1 + "</br>" + title2 + "</br>" + results;
                } else {
                    return title1 + "</br>" + results;
                }
            }
        },
        grid: {
            // 直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 			轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)。
            // left: "3%",
            // right: "4%",
            // bottom: "8%",
            // containLabel: true // grid区域是否包含坐标轴的刻度标签,避免标签名字太长溢出
        },
        series: {
            // 系列列表。每个系列通过 type 决定自己的图表类型
            // name: "", // 系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列
            type: "bar", // line表示折线图、bar表示柱状图、pie表示饼图
            stack: "数量", // 数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置。
            barWidth: 20 // 柱条的宽度,不设时自适应。
    
            // 这个itemStyle需要自己在文件中写
            /**
            itemStyle: {
                // 图形样式
                normal: {
                    // 表示默认样式
                    // echarts的渐变色生成器new echarts.graphic.LinearGradient(a,b,c,d,arr) a:1 arr中的颜色右到左 c:1 arr中的颜色左到右 b:1 arr中的颜色下到上 d:1 arr中的颜色上到下
                    color: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1, // 渐变是从上到下
                        [
                            {
                                offset: 0,
                                color: "#FFB7DD"
                            },
                            {
                                offset: 0.5,
                                color: "#FF0000"
                            },
                            {
                                offset: 1,
                                color: "#8C0044"
                            }
                        ]
                    )
                    // barBorderRadius: [5, 5, 5, 5] //圆角半径(顺时针左上,右上,右下,左下)
                }
            } */
        },
        legend: {
            // icon: "rect", // 图例项的icon,类型包括 circle(圆形),rect(正方形),roundRect(圆角正方形),triangle(三角形),diamond(菱形),pin(大头针行),arrow(箭头形),none(无图例项的icon)
            show: true,
            width: "320",
            top: "5%",
            type: "scroll", // 图例的类型:plain普通图例 scroll可滚动翻页的图例。当图例数量较多时可以使用。
            padding: [0, 20],
            textStyle: {
                // color: "#BBCEE8"
                color: "#000"
            },
            pageIconColor: "#ffbe1c", // 翻页按钮的颜色。
            pageTextStyle: {
                // 图例页信息的文字样式。
                color: "#BBCEE8"
            },
            pageIconSize: 12, // 翻页按钮的大小
            tooltip: {
                show: true
            },
            data: [], // legend的data和series的name相同,legend才会显示
            formatter: function(params) {
                if (params.length > 20) {
                    return params.slice(0, 20) + "...";
                } else {
                    return params;
                }
            }
        },
        dataZoom: [
            // dataZoom组件 用于区域缩放,从而能自由关注细节的数据信息,或者概览数				据整体,或者去除离群点的影响。
            {
                type: "slider",
                show: true,
                xAxisIndex: [0], // 控制对应的x轴,这里表示这个dataZoom控制第一个x轴
                height: 8,
                borderColor: "#d0001c",
                fillerColor: "#FF00ff", // 滑块颜色
                bottom: "8%", // 滚动条距离页面底部的距离
                // minValueSpan: 12, // 用于限制窗口大小的最小值, 最少显示10条数据
                startValue: 0, // 数据窗口范围的起始数值
                endValue: 10, // 数据窗口范围的结束数值
                showDataShadow: false, // 是否显示数据阴影 默认auto
                showDetail: false // 即拖拽时候是否显示详细数值信息 默认true
                // start: 0, // 数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%。
                // end: 30 // 数据窗口范围的结束百分比。范围是:0 ~ 100。滑块的长度,如果当前显示10条数据,那滑块的长度从start: 0到end: 30(0.3*10=3)的位置的长度,此算法适用于没有配置minValueSpan(强制显示多少条数据)的时候
            },
            {
                type: "inside",
                xAxisIndex: [0], // 控制对应的x轴,这里表示这个dataZoom控制第一个x轴
                // minValueSpan: 12, // 最少显示16条数据
                startValue: 0, // 数据窗口范围的起始数值
                endValue: 10 // 数据窗口范围的结束数值
                // start: 0, // 数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%。
                // end: 30 // 数据窗口范围的结束百分比。范围是:0 ~ 100。滑块的长度,如果当前显示10条数据,那滑块的长度从start: 0到end: 30(0.3*10=3)的位置的长度,此算法适用于没有配置minValueSpan(强制显示多少条数据)的时候
            }
        ]
    };```
    
    
    展开全文
  • echarts动态排序柱状

    2021-09-18 16:58:13
    echarts动态排序柱状 动态排序柱状是一种展示随时间变化的数据排名变化的图表,从 ECharts 5 开始内置支持。 动态排序柱状通常是横向的柱条,如果想要采用纵向的柱条,只要把本教程中的 X 轴和 Y 轴相反设置...
  • ECharts之阶梯瀑布柱状

    千次阅读 多人点赞 2019-11-25 17:33:54
    效果 背景图片 下载ECharts npm install echarts --save 引入并注册全局ECharts     在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 ) import Vue from 'vue' import App from './App.vue' import ...
  • Echarts--Js可视化实现[视觉盛宴]--动态三维条形图、柱状图、饼图、比例图、折线图1、前言2、案列(基于电影推荐系统)2.1 观众年龄分配占比`在这里插入代码片`2.2 不同职位观影情况2.3 电影类型分配占比2.4 观影...
  • 一、简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分...ECharts 提供了常规的折线、柱状、散点、饼图、K线,用于统计的盒形,用于地理数据...
  • 背景:最近做了一个多维的柱状,数据差值过大,导致最小值无法选中,用户希望优化一下。 用户诉求1:单个柱子 悬浮显示tooltip,不要整体悬浮 解决:设置tooltip: { trigger: 'item'},设置成item,则根据图形...
  • echarts特色: 丰富的图表类型:折线,柱状散点饼图等等 多个坐标系支持:直角...支持多维数据及丰富的视觉编码:除平行坐标等常见的多维数据可视化工具外,对于传统的散点等,传入的数据也可以是多个维度...
  • echarts柱状

    2018-07-24 08:53:00
    堆积条形图,任意系列多维度堆积,代码如下: option = {  tooltip : {  trigger: 'axis',  axisPointer : { // 坐标轴指示器,坐标轴触发有效  type : 'shadow' // 默认为直线,可选为:'line' | '...
  • Echarts中数据显示实现formatter

    万次阅读 2018-09-01 14:44:09
    来公司工作了两个月了,大部分时间都是在画图制表,主要使用到Echarts框架来进行数据可视化的展示,在完成需求的过程中碰到最多的问题就是数据展示时的样式需求,如鼠标放到图表上显示的内容、数据展示时的格式问题...
  • ECharts,是一个使用 JavaScript 实现的开源可视化库,可以流畅地运行在 PC 和移动设备上,兼容当前绝大部分...ECharts 提供了常规的折线、柱状、散点、饼图、K线,用于统计的盒形,用于地理数据可视化的...
  • 目录一、柱状(条形二、折线(面积)三、饼(圆环)四、地图五、雷达(面积)七、漏斗八、词云九、散点(气泡)十、双轴 好文章 记得收藏+点赞+关注额 !!! ---- Nick.Peng 一、柱状(条形)...
  • echarts异步加载多组数据

    千次阅读 2017-11-18 17:05:28
    说明 创建的maven项目 需要echarts.js和jquery.js echarts.min.js jquery-3.2.1.min.js 官网介绍Echarts官网链接初步教程初步教程...加载一组数据前台处理首先看加载条形图的数据结构option = { title: { text: 'EC
  • Echarts快速入门

    2020-04-09 10:33:24
    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互...
  • 这里写目录标题Echarts是什么折线柱状饼图 Echarts是什么 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,...
  • [Python可视化] pyecharts安装入门及绘制中国贵州地图

    万次阅读 多人点赞 2018-04-10 20:25:54
    前端或网站开发的博友可能都使用过强大的Echarts技术。ECharts是一个纯Javascript的...ECharts提供了常规的折线、柱状、散点、饼图、K线,用于统计的盒形,用于地理数据可视化的地图、热力、线图,用于...
  • echarts

    千次阅读 2016-05-10 16:04:36
    横坐标为斜着的代码axisLabel: {rotate: 60 , interval: 0 } 1.报表的用法:  柱形:lineEcharts ...script src="${ctxStatic}/echarts/dist/echarts.js">script> script type="text
  • 目录ECharts 简介ECharts 安装ECharts 配置语法ECharts ECharts 样式设置ECharts 异步加载数据ECharts 数据集ECharts 交互组件 ECharts 简介 ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业...
  •  上面的khfx会有多个,比如db1、db2、db3等,下面的那些数据也会变化,目前需求就是做的下面的实现单选,可以使用echarts的legend的selectedMode实现,然后上面的db那些就是可以复选,默认全显示,选择之后就取消该...
  • 当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。点击下载Highcharts最新试用版 Highcharts优点: 轻量级,...
  • Python数据可视化 pyecharts实战

    千人学习 2019-06-03 11:53:37
         本课程是pyecharts的入门课程。主要介绍了pyecharts函数库的...主要内容包括pyecharts简介,用pyecharts绘制离散点、折线、柱状、柱状和折线组合、饼图、地理等,而且这些图表是可交互的。
  • ECharts 简明教程,用js输出图表

    千次阅读 2016-04-07 22:26:48
    Echarts 简介这个非常有趣,有用,来自:ZZP.LOLECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 ...
  • d3与echarts的区别

    2019-10-06 10:45:57
    在我看几种数据可视化平台多使用折线,面积和柱状,条居多,对于echarts和d3都有使用。 对于使用d3还是echarts还得从用户需求,计算数据的量的大小来进行分析: (1)对于客户需求要求的图表拥有大量的用户...
  • dhm-echarts图表架构与说明书

    千次阅读 2017-06-19 14:54:11
    dhm-echarts通过自定义div,ajax提交数据实现echarts图表展示.

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 173
精华内容 69
关键字:

echarts多维条形图