<!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. 【译】使用 Rust 和 WebAssembly 构建离线画图页面

    原文地址:https://dev.to/sendilkumarn/create-dev-s-offline-page-with-rust-and-webassembly-21gn 原文仓库:https ...

  2. 洛谷P1433 吃奶酪

    #include<iostream> #include<math.h> using namespace std ; ; int n; bool st[N]; double x[ ...

  3. 题解【UVA12003】Array Transformer

    题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例#1 10 1 11 1 2 3 4 5 6 7 8 9 10 2 8 6 10 输出样例#1 1 2 3 4 5 6 7 8 9 6 ...

  4. 题解【CJOJ1071/UVA】硬币问题

    P1071 - [Uva]硬币问题 Description 有n种硬币,面值分别为v1, v2, ..., vn,每种都有无限多.给定非负整数S,可以选用多少个硬币,使得面值之和恰好为S?输出硬币数目 ...

  5. JS生成简单随机答案选择器,小抽奖器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Oracle expdp 多表导出处理

    一个项目中需要在oracle数据库某个用户下导出1000多个表,导入到测试库做数据分析测试.很少遇到需要导出这么多表的情况,通常都是按schema导出,或者整库导出.考虑到expdp中include参 ...

  7. Django组件总结

    Django组件介绍 分页器的使用 分页器在页面中非常常见,当数据库条数数据过多时,页面一次性显示不好看时,我们可以使用分页器,将数据分几次显示. 1.1 数据库内插入大量数据 Booklist=[] ...

  8. [lua]紫猫lua教程-命令宝典-L1-01-05. if判断结构

    L1[if]01. 简单的if判断结构 没什么说得 if得基本结构如下 xxx= ) then testlib.traceprint("1-100") ) then testlib ...

  9. 前端——语言——Core JS——《The good part》读书笔记——第四章节(Function)

    本章介绍Function对象,它是JS语言最复杂的内容. Java语言中没有Function对象,而是普通的方法,它的概念也比较简单,包含方法的重载,重写,方法签名,形参,实参等. JS语言中的Fun ...

  10. Docker - Docker 镜像 简介

    概述 简单介绍一下 docker 镜像的概念 1. 背景 复习 docker 镜像是 docker 最基础, 最重要的概念之一 所以正式使用之前, 最好有所理解和认识 2. 镜像 概述 简单描述 理解 ...