直接贴代码:

<!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. [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates

    You add array of todos to the store simply by adding them to the state defined in your store/index.j ...

  2. Cocos2dx 小技巧（十六）再谈visit（getDescription）

    之前两篇都是介绍与Value相关的,这篇我继续这个话题吧,正好凑个"Value三板斧系列...".在非常久非常久曾经.我用写过一篇博客,关于怎样查看CCArray与CCDictio ...

  3. goland 2018.2 激活

    感谢 http://blog.sina.com.cn/s/blog_1885d23df0102ydjc.html http://www.3322.cc/soft/38102.html 下载   htt ...

  4. 7、UTF-8, Unicode, GB2312格式串转换之C语言版

    (申明:此文章属于原创,若转载请表明作者和原处链接 )            /*      author:   wu.jian    (吴剑)      English name: Sword    ...

  5. [Recompose] Add Lifecycle Hooks to a Functional Stateless Component using Recompose

    Learn how to use the 'lifecycle' higher-order component to conveniently use hooks without using a cl ...

  6. [Recompose] Add Local State to a Functional Stateless Component using Recompose

    Learn how to use the 'withState' and 'withHandlers' higher order components to easily add local stat ...

  7. Android 为开发者准备的最佳 Android 函数库（2016 年版）

    本文是翻译自 CloudRAIL 的官方博客(https://cloudrail.com/best-android-libraries-for-developers/),本文中分享的 Android ...

  8. 使用pprof及Go 程序的性能优化

    使用Golang 程序的性能优化及 Pprof 程序的性能优化无非就是对程序占用资源的优化.对于服务器而言,最重要的两项资源莫过于 CPU 和内存.性能优化,就是在对于不影响程序数据处理能力的情况下, ...

  9. 《Kinect应用开发实战》读书笔记---干货集合

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接: http://blog.csdn.net/cartzhang/article/details/45029841 作者:ca ...

  10. MySQL key分区（五）

    具体描写叙述总结请看MySQL分区(一) 样例:该样例为本人个人学习总结分享->具体说明-->有问题欢迎前来交流