echarts鼠标移上去显示数据

折线图为例,核心代码

<script src="/assets/webmaster/js/jquery.min.js"></script>
<script src="/assets/webmaster/js/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('latest_pv'));

    // 指定图表的配置项和数据
    var option = {
        xAxis: {
            type: 'category',
            data: ['{$d1}', '{$d2}', '{$d3}', '{$d4}', '{$d5}', '{$d6}', '{$d7}']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [{$uv1}, {$uv2}, {$uv3}, {$uv4}, {$uv5}, {$uv6}, {$uv7}],
            type: 'line'
        }],
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        }
        };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

效果

(0)

相关推荐

  • Flask+Echarts 实现动图图表

    一直很喜欢百度的Echarts,可视化真的很炫酷.虽然有pyecharts库,但我至今没用成功过.Echarts酷炫的功能主要是javascript起作用,想到之前学过Flask框架(Python的W ...

  • python测试开发django-147.ECharts 生成饼图

    前言 ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求. ECharts下载与使用 可以在直接下载 echarts.min.js 并用 <scr ...

  • E-Charts数据可视化

    数据可视化 一.展示方法 1).Jfreechart:免费,功能一般,效果一般(不怎么绚丽),但是是之前的产物,以前用的比较多,现在用的比较少了(建议以了解为主)2).e-charts:免费,百度出产 ...

  • ECharts数据可视化:从0到1的蜕变(内部技术分享总结)

    前言 先简单介绍一下自己,我是Jack Chen,一名非常热爱学习的[高级Web前端工程师],从事Web前端工作多年,具有丰富的大中型实战项目开发经验.[学习与写作]是目前唯一每天都坚持完成的事情,业 ...

  • Echarts如何画一个空心的饼图

    问题描述 当我们学习echarts时,教程里面有画饼图的源代码,但那些饼图都是实心的,我们应该如何画一个空心的饼图呢? 解决方案 我们画图是在HBuilder里面画图,所以就会用到echarts.有两 ...

  • 跟李锐学Excel:LOOKUP函数按次数重复显示数据

    工作常用电子表格Excel经典公式大全

  • eeglab教程系列(1)-加载、显示数据

    更多技术,第一时间送达 1.准备工作: 1.1 安装eeglab: 在matlab中安装eeglab,请看安装教程:eeglab在MATLAB中安装教程 1.2 测试数据 由于公众号上不好上传文件,所 ...

  • 如何自动显示数据表中最牛销售是谁?

    本期为职领office达人学院第675个问题技巧. 又要上班,不过春意以暖,各大公园爆棚,又是清明,好时光要享受. 不过学习不断,如何自动显示数据表中TopSale是谁? 客户的问题确实也比较经典,做 ...

  • excel数据很多,看着累眼怎么办?可以制作聚光灯,突出显示数据

    当我们遇到的数据比较多的时候,总会不靠近屏幕,生怕把数据看错了,其实大可不必这样,今天就跟大家分享下如何在excel中制作聚光灯效果,再也不用担心看错数据了,设置的公式是通用的直接复制即可使用,下面就 ...

  • 数码管显示数据的分离方式

    数码管是电子设计之中最常用的显示元器件,但是数码管一次只能显示一个数字,如果要显示多位数字只能使用多个数码管并且要把数字拆分开,一位一位的送到数码管中才能显示,今天就介绍把一个多位数字拆分的方法. 把 ...

  • 在PPT中如何实现鼠标移过出现下拉菜单?求?

    有一个最简单的办法,就是新建两个ppt页面,第一个只有标题栏,第二个有标题栏加下面的菜单,然后给第一幅ppt设置动作,鼠标划过是链接到下一页面,给第二幅ppt的菜单设置切入动画,时间设置为之前开始,这 ...

  • Excel自定义格式第①讲:以万元为单位显示数据

    ①回顾关键内容②善用图片表达 ③学会建立联系④拓展深度广度 ⑤浓缩关键概念⑥提示重要信息 ⑦应用到行动中⑧善于归纳总结 ⑨尝试进行分享

  • Excel以万元为单位显示数据-自定义单元格格式

    Excel以万元为单位显示数据-自定义单元格格式

  • 03 使用Echarts制作可视化图表 |数据爬取及可视化系列

    这是<数据爬取及可视化系列>的第三篇文章. 前2篇文章,可以点击查阅: 01基于位置的用户画像初探 02技能之谷歌Chrome爬虫 最近在结合新学的爬虫在做一些可视化的东西了,今天讲讲可视 ...