直接贴代码:

<!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: {

                trigger: 'axis',

                formatter: function (datas) {

                    var res = datas[0].name + '<br/>'

                    // for (var i = 0, length = datas.length; i < length; i++) {

                    //     res += datas[i].showText + '：'

                    //         + datas[i].text + '<br/>'

                    // }

                    res=res+'基督山:'+datas[0].data.text

                    return res

                }

            },

            legend: {

                data: ['销量']

            },

            xAxis: {

                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "地中海"]

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [5, '_', 20, 36, 10, 10, { value: 40, name: '北京', text: '希望与等待', showText: '100' }]

            }]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</html>

<!-- https://blog.csdn.net/shenhonglei1234/article/details/77479432/ -->

<!-- http://echarts.baidu.com/option.html#visualMap -->

<!-- http://echarts.baidu.com/echarts2/doc/doc.html#SeriesData -->

<!-- https://www.imooc.com/video/12203 -->

在echarts中自定义直方图bar上悬浮透明窗文本内容的更多相关文章

  1. 在 Xcode9 中自定义文件头部注释和其他文本宏

    在 Xcode9 中自定义文件头部注释和其他文本宏 . 参考链接 注意生成的plist文件的名称为IDETemplateMacros.plist 在plist文件里设置自己想要的模板 注意plist存 ...

  2. Android中自定义ListView实现上拉加载更多和下拉刷新

    ListView是Android中一个功能强大而且很常用的控件,在很多App中都有ListView的下拉刷新数据和上拉加载更多这个功能.这里我就简单记录一下实现过程. 实现这个功能的方法不止一个,Gi ...

  3. 在echarts中自定义提示框内容

    1.期望效果 以柱状图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容. 如下图,鼠标滑过每个数据项时, 第1张是默认提示框: 第2张是处理成 ...

  4. idea中自定义设置xml的头文件的内容

    因为在idea中新建的xml默认的头文件,有时候并不是我们需要的这时候可以通过自定义来解决. 如搭建hibernate的实体类的映射xml. 首先 fiel→settings出现 如下框框 在上面搜索 ...

  5. 再springMVC中自定义文件上传处理解决与原spring中MultipartResolve冲突问题

    相信很多朋友再用springmvc时都遇见了一个问题,那就是自带的获取上传的东西太慢,而且不知道如何修改,其实不然,spring框架既然给我们开放了这个接口,就一定遵从了可扩展性的原则,经过查看org ...

  6. ECharts 中的事件和行为

    在 ECharts 的图表中用户的操作将会触发相应的事件.开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等. 如下是一个绑定点击操作的示例. ...

  7. ECharts SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中

    本文引用自:http://blog.csdn.net/ArcticFoxHan/article/details/38071641   1.导入包,搭建SSH框架 导入Jquery的JS包,<sc ...

  8. echarts彩虹柱状图 每个bar显示不同颜色， 标题在不同位置 ，工具中有可以直接保存为图片下载，平均线的添加

    可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...

  9. 在Windows Server 2012中如何快速开关桌面上经典的“计算机、我的文档”等通用图标

    我们都知道,在Windows Server 2012系列的服务器版本中都已经引入了Modern的现代界面作为默认的用户交互界面,同时满足视觉一致化,新版的服务器管理程序也做成了扁平化.因此传统的计算机 ...

随机推荐

  1. shiro 中的filterChainDefinitions详解(转)

    springrain使用shiro控制权限,配置filterChainDefinitions结合数据库校验权限. 我们在web.xml中配置一个全局过滤器,也就是在springrain配置的是一个sp ...

  2. Unity（IOC）学习笔记

    原文:Unity(IOC)学习笔记 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m0_37591671/article/details/79432 ...

  3. S​D​I​与​A​S​I 接口具体解释介绍

    分量编码 在对彩色电视信号进行数字化处理和传输是.一种经常使用的方式是分别对其3个分量(Y,R-Y.B-Y)进行数字化编码.这就是分量分量编码.另外还有全信号编码,全信号编码是对彩色全电视信号直接进行 ...

  4. 在vue中使用nprogress

    NProgress的官网:http://ricostacruz.com/nprogress/        源码地址:https://github.com/rstacruz/nprogress 1.安 ...

  5. 【solr专题之三】Solr常见异常 分类： H4_SOLR/LUCENCE 2014-07-19 10:30 3223人阅读 评论(0) 收藏

    1.RemoteSolrException: Expected mime type application/octet-stream but got text/html 现象: SLF4J: Fail ...

  6. ccpc2016长春站打铁记(后记)

    Day3 "学术交流日" 自己进我的空间看吧. http://user.qzone.qq.com/190741511/4

  7. php实现表示数值的字符串（is_numeric($s)）

    php实现表示数值的字符串(is_numeric($s)) 一.总结 is_numeric($s) 二.php实现表示数值的字符串 题目描述 请实现一个函数用来判断字符串是否表示数值(包括整数和小数) ...

  8. 机器学习 Softmax classifier (无隐含层)

    程序实现 Softmax classifer, 没有隐含层, f=wx+b y=efi∑jefj %% Softmax classifier function Out=Softmax_Classifi ...

  9. [Ramda] Refactor a Promise Chain to Function Composition using Ramda

    Promise chains can be a powerful way to handle a series of transformations to the results of an asyn ...

  10. [ES2016] Check if an array contains an item using Array.prototype.includes

    We often want to check if an array includes a specific item. It's been common to do this with the Ar ...