<!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. <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>

    <meta charset="utf-8" name="viewport" content="width=device-width, initi ...

  2. springboot中druid监控的配置(DruidConfiguration)

    当数据库连接池使用druid 时,我们进行一些简单的配置就能查看到sql监控,web监控,url监控等等. 以springboot为例,配置如下 import com.alibaba.druid.su ...

  3. hive导出数据到本地文件报错解决方法

    报错信息: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.MoveTask. Unable to move so ...

  4. Scrapy爬虫基本使用

    一.Scrapy爬虫的第一个实例 演示HTML地址 演示HTML页面地址:http://python123.io/ws/demo.html 文件名称:demo.html 产生步骤 步骤1:建议一个Sc ...

  5. 2019沈阳网赛树形dp

    https://nanti.jisuanke.com/t/41403 2019沈阳网络赛D题 树形dp.一棵树,求任意两个点的距离之和.u-v和v-u算两次.两点之间的距离分为三类,模3等于0,1,2 ...

  6. Maven安装与学习

    一.安装 1.下载http://maven.apache.org/download.cgi 2.选择zip格式 安装完后解压到某一位置(E:\xitong\major\apache-maven-3.6 ...

  7. 有源汇有上下界最大流 （ZQU1591)

    题意:现在的网络有一个源点s和汇点t,求出一个流使得源点的总流出量等于汇点的总流入量,其他的点满足流量守恒,而且每条边的流量满足上界和下界限制. 思路:要满足每一个点的流量守恒,我们可以尝试像无源汇上 ...

  8. Mac 配置cron

    请参考:https://www.cnblogs.com/EasonJim/p/7819635.html 查看 crontab 是否启动 sudo launchctl list | grep cron ...

  9. 每天进步一点点------Verilog 测试平台(Testbench) (一)

    每天进步一点点------Verilog 测试平台(Testbench) (一)

  10. WKWebView 使用的坑

    WKWebView 简介: WKWebView 是苹果在 WWDC 2014 上推出的新一代 webView 组件,用以替代 UIKit 中笨重难用.内存泄漏的 UIWebView.WKWebView ...