<!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. vue 文件插件 Vetur 设置说明官网

    vue 文件插件 Vetur 设置说明官网 https://vuejs.github.io/vetur/formatting.html#settings

  2. dfs题型一

    代码: #include <iostream> #include <algorithm> #include <vector> using namespace std ...

  3. Docker - 构建一个简单的应用镜像

    概述 做个简单的可用镜像 背景 之前的镜像, 都是 命令教程 类的 这次我想构建一个 可以用的 简单镜像镜像 1. 环境 os centos7 docker 18.09 docker image ja ...

  4. sqlserver表中导入大批量数据

    背景: 想要往sqlserver数据库中导入大批量数据,使得数据库的备份文件大于几个G. 注意: 导入的数据不能太规范,数据表最好不一致,否则会自动压缩. 解决办法: 1)通过excel导入,可以参考 ...

  5. 阿里云CentOS7.2把默认语言修改成中文

    转载TimeK 最后发布于2017-04-19 14:43:35 阅读数 7578  收藏 展开 我是一个刚接触centos不久的新人,在这个问题上面也是找了好久的答案,百度百科和问答上面的都大同小异 ...

  6. Service Worker,Web Worker,WebSocket的对比

    Service Worker 处理网络请求的后台服务.适用于离线和后台同步数据或推送信息.不能直接和dom交互.通过postMessage方法交互. Web Worker 模拟多线程,允许复杂计算功能 ...

  7. Vue - 解决路由过渡动画抖动问题

    前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...

  8. 计算几何-BZOJ2618-凸包的交-HPI

    This article is made by Jason-Cow.Welcome to reprint.But please post the article's address. bzoj2618 ...

  9. 计算几何-Graham法-凸包

    This article is made by Jason-Cow.Welcome to reprint.But please post the article's address. 关键一句话 Cr ...

  10. 非分页中的上一篇下一篇sql语句如何写

    上一页:where id=(select max(id) from examination where id < #{id} and class=#{class}) 下一页:where id=( ...