<!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. Oracle中行转列，列转行pivot的用法

    测试数据准备 --建表 --drop table SalesList; create table SalesList( keHu ), --客户 shangPin ), --商品名称 salesNum ...

  2. php设计模式之面向接口开发实例代码

    <?php header("Content-type:text/html;charset=utf-8"); /** * 共同接口 */ interface db { func ...

  3. bzoj3744: Gty的妹子序列 （BIT && 分块）

    强制在线的区间询问逆序对数 如果不是强制在线 就是可以用莫队乱搞啦 强制在线的话 用f[i][j]记录第i块到第j个点之间的逆序对数 用s[i][j]记录前i块中小于等于j的数字个数 离散化一下 BI ...

  4. Linux - Shell - shell 执行方式

    概述 shell 的执行方式 背景 偶尔执行个 shell 脚本 一般都用 './script' 执行 最近忽然看到 有不同的执行方式, 感觉有必要整理一下, 然后和大家分享 准备 os centos ...

  5. python 中模块的版本号

    查看所使用的模块的版本号,以numpy为例 import numpy numpy.__version__ 查看help(numpy)时,信息太多,不想看了,如何退出,按q,即可.

  6. 【转自】自定义InputFormat、OutputFormat

    转自:http://www.cnblogs.com/xiaolong1032/p/4529534.html 一:自定义实现InputFormat *数据源来自于内存*1.InputFormat是用于处 ...

  7. java &&和&与逻辑运算区别

    二者都表示与运算,同真为真,遇假即假 && 具有短路功能,前面为false后面不在预算直接表达式为false; &还可以用作位运算符,当&操作符两边的表达式不是 boo ...

  8. import matplotlib.pyplot as plt出错

    >>>import matplotlib.pyplot as plt /usr/lib/python2.7/dist-packages/matplotlib/font_manager ...

  9. KM poj 2195

    题意:给出一个地图,地图上有人和房子,问如何分配哪个人去哪个房子,走的路最短? 这道题是个完备匹配的情况下,问怎么才能走的路最少,可以用KM来做. 只不过KM算法是用来求解最大最优值,所以我们得改一下 ...

  10. 树莓派学习之路-GPIO Zero

    原来用的都是RPi.GPIO模式开发,写程序 今天看到了GPIOZERO的资料,觉得这个API还是很好用的, 唯一的缺点就是官方资料是英文的,而且目前这方面的资料也不多, 所以开始写这篇博文,将自己学 ...