直接贴代码:

<!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. POJ 3159 Candies 还是差分约束（栈的SPFA）

    http://poj.org/problem?id=3159 题目大意: n个小朋友分糖果,你要满足他们的要求(a b x 意思为b不能超过a x个糖果)并且编号1和n的糖果差距要最大. 思路: 嗯, ...

  2. 【例题5-5 UVA 12096 】The SetStack Computer

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 用set来解决这个问题. 考虑如何表示 { {{}} }这个集合 我们可以把{}这个集合和一个数字映射->1 然后把1加入到某 ...

  3. [Angular2 Router] Auxiliary Routes bit by bit

    Article Github Auxiliary Routes is is little bit hard to understand. Here is demo, link You can see ...

  4. storm-kafka编程指南

    目录 storm-kafka编程指南 一.原理及关键步骤介绍 (一)使用storm-kafka的关键步骤 1.创建ZkHosts 2.创建KafkaConfig 3.设置MultiScheme 4.创 ...

  5. js进阶解决浏览器缓存不能自动更新的问题（在ajax的url上带上一个参数，可以是日期，或者是随机数）（随机数Math.random）（取得日期的毫秒数：new Date().getTime();）

    js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();) ...

  6. C# 二分法查找和排序

    using System;using System.Collections.Generic;using System.Text; namespace AAA{    public class Dich ...

  7. 【codeforces 742A】Arpa’s hard exam and Mehrdad’s naive cheat

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  8. js课程 1-2 js概念

    js课程 1-2  js概念 一.总结 一句话总结:js标签元素也是js对象,有属性和方法,方法就是事件,属性就是标签属性,可以直接调用. 1.js中如何获取标签对象? getElement获取的是标 ...

  9. Windows批处理(cmd/bat)常用命令

    Windows批处理(cmd/bat)常用命令 一.总结 一句话总结: 1.批量处理图片的方式? PS批处理是基于强大的图片编辑软件Photoshop的,用来批量处理图片的脚本: 2.大量的重复的操作 ...

  10. MySQL忘记root密码不重启mysqld的方法

    MySQL忘记root密码不重启mysqld的方法   1.首先得有一个可以拥有修改权限的mysql数据库账号,当前的mysql实例账号(较低权限的账号,比如可以修改zabbix数据库)或者其他相同版 ...