<!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <!--jquery 根据自己的路径引入或下载 -->

         <script src="js/jquery-1.9.1.min.js"></script>

         <style type="text/css">

             #main{

                 width:50vw;height:60vh;margin-left:2vw

             }

         </style>

     </head>

     <body>

             <div id="main"></div>

         <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

         <script type="text/javascript">

         // 饼状图插件的部分内容

          var chart = echarts.init(document.getElementById('main'));

           var optionbar = {

                 color:['#df6c33','#018dfe'],//饼状图每部分的颜色

                 tooltip: {

                     trigger: 'item',

                     // formatter: "{a} <br/>{b}: {c} ({d}%)",

                     formatter: "{d}%",//鼠标滑过时候的显示

                     // show:false,

                 },

                 series: [{

                     // name: '客户',

                     type: 'pie',

                     radius: ['35%', '50%'],//控制饼状图的大小

                     center: ['50%', '50%'],//控制饼状图所在的位置

                     avoidLabelOverlap: true,

                     label: {

                         normal: {

                             formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比

                         },

                         emphasis: {

                             show: true,

                             textStyle: {

                                 fontSize: '10',//字体大小

                                 // fontWeight: 'bold'

                             }

                         }

                     },

                     labelLine: {

                         normal: {

                             show: true

                         }

                     },

                     data: [20,96]//后台请求到的数据直接复制即可

                 }]

             };

            chart.setOption(optionbar)

             //设置默认选中高亮部分

             chart.dispatchAction({

                 type: 'highlight',

                 seriesIndex: 0,

                 dataIndex: 0

             });

             chart.on('mouseover', function(e) {

             //当检测到鼠标悬停事件，取消默认选中高亮

                 chart.dispatchAction({

                     type: 'downplay',

                     seriesIndex: 1,

                     dataIndex: 0

                 });

             //高亮显示悬停的那块

                 chart.dispatchAction({

                     type: 'highlight',

                     seriesIndex: 1,

                     dataIndex: e.dataIndex

                 });

             });

             //检测鼠标移出后显示之前默认高亮的那块

             chart.on('mouseout', function(e) {

                 chart.dispatchAction({

                     type: 'highlight',

                     seriesIndex: 0,

                     dataIndex: 0

             }); });

         </script>

     </body>

 </html>

echart中饼状图的高亮显示。的更多相关文章

  1. echarts中饼状图数据太多进行翻页

    echarts饼状图数据太多 echarts 饼状图内容太多怎么处理 有些时候,我们饼状图中echarts的数据可能会很多. 这个时候展示肯定会密密麻麻的.导致显示很凌乱 我们需要'翻页'类似表格展示 ...

  2. vue中饼状图的使用

    图形构建子组件 <template> <div> <div id="myChart" :style="echartStyle"&g ...

  3. echart生成饼状图

    //绘制图表. echarts.init(document.getElementById('main')).setOption({ tooltip : { trigger: 'item', //触发类 ...

  4. Android中饼状图的绘制

    https://blog.csdn.net/cen_yuan/article/details/52204281

  5. AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示

    前言: "宁肯像种子一样等待  也不愿像疲惫的陀螺  旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗 ...

  6. WPF、Silverlight项目中使用柱状图、饼状图、折线图

    在开发的过程中,可能会遇到柱状图.饼状图.折线图来更好的显示数据,最近整理了一下,遂放出来望需要的朋友可以参考.本文仅仅是简单显示,如需复杂显示效果请参考官网代码示例.----本文代码使用WPF,Si ...

  7. 如何在ArcGIS饼状图中下方添加文字

    内容源自:ArcGIS10.2基础教程(丁华) 书上要求在统计图的饼状图下方显示“总面积组成”,以及图例是只显示文字. 该如何操作呢? 其实就是在高级属性中选择标题-副标题-显示“总面积组成”即可 而 ...

  8. vue中使用echarts画饼状图

    echarts的中文文档地址:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EC ...

  9. C#应用NPOI实现导出EXcel表格中插入饼状图（可实现动态数据生成）

    一.思路:   1.excel是可以通过NPOI插入图片的: 2.C#通过NPOI生成饼状图: 3.把生成的饼状图以字节流的形式插入到表格 二.看代码: #region 生成饼图图例 /// < ...

随机推荐

  1. mysql 实践（例题）

    MySQL安装见本博 安装成功后,开始菜单中找到 “MySQL 8.0 Command Line Client” 进行启动(启动后,可直接输入MySQL密码) 1. create database 数 ...

  2. 用apscheduler写python定时脚本

    apscheduler 官方文档:http://apscheduler.readthedocs.io/en/latest/ 写一个后台定时任务,一般2个选择,一个是apscheduler,一个cele ...

  3. 2019牛客多校第四场A meeting 思维

    meeting 题意 一个树上有若干点上有人,找出一个集合点,使得所有人都到达这个点的时间最短(无碰撞) 思路 就是找树的直径,找直径的时候记得要找有人的点 #include<bits/stdc ...

  4. bootstrap的字体设置

    @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eo ...

  5. SQL基础语法—insert语句

    1 insert语句 insert语句用于插入数据到表中,其基本语法有以下三种: Syntax: INSERT [LOW_PRIORITY | DELAYED | HIGH_PRIORITY] [IG ...

  6. 情人节用Python智能聊天机器人的实现|制作一个虚拟恋人

    首先项目需要的包 import urllib.request import urllib.parse from tkinter import * import time PS:另外很多人在学习Pyth ...

  7. 第八届蓝桥杯C++B组 日期问题

    标题:日期问题 小明正在整理一批历史文献.这些历史文献中出现了很多日期.小明知道这些日期都在1960年1月1日至2059年12月31日.令小明头疼的是,这些日期采用的格式非常不统一,有采用年/月/日的 ...

  8. APP项目下载及运行

    1.首先下载Git 2.再下载安装node.js 3.dos窗口下载node.js依赖jar包 执行命令:npm install 4.从Git上down项目 5.运行项目 在项目根目录下 右键 打开 ...

  9. 数据库程序接口——JDBC——API解读第一篇——建立连接的核心对象

    结构图 核心对象 Driver Java通过Driver接口表示驱动,每种类型的数据库通过实现Driver接口提供自己的Driver实现类. Driver由属性,操作,事件三部分组成. 属性 公共属性 ...

  10. 每天进步一点点------CORDIC (一)

    三角函数计算,Cordic 算法入门 三角函数的计算是个复杂的主题,有计算机之前,人们通常通过查找三角函数表来计算任意角度的三角函数的值.这种表格在人们刚刚产生三角函数的概念的时候就已经有了,它们通常 ...