echart中饼状图的高亮显示。
<!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中饼状图的高亮显示。的更多相关文章
- echarts中饼状图数据太多进行翻页
echarts饼状图数据太多 echarts 饼状图内容太多怎么处理 有些时候,我们饼状图中echarts的数据可能会很多. 这个时候展示肯定会密密麻麻的.导致显示很凌乱 我们需要'翻页'类似表格展示 ...
- vue中饼状图的使用
图形构建子组件 <template> <div> <div id="myChart" :style="echartStyle"&g ...
- echart生成饼状图
//绘制图表. echarts.init(document.getElementById('main')).setOption({ tooltip : { trigger: 'item', //触发类 ...
- Android中饼状图的绘制
https://blog.csdn.net/cen_yuan/article/details/52204281
- AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示
前言: "宁肯像种子一样等待 也不愿像疲惫的陀螺 旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗 ...
- WPF、Silverlight项目中使用柱状图、饼状图、折线图
在开发的过程中,可能会遇到柱状图.饼状图.折线图来更好的显示数据,最近整理了一下,遂放出来望需要的朋友可以参考.本文仅仅是简单显示,如需复杂显示效果请参考官网代码示例.----本文代码使用WPF,Si ...
- 如何在ArcGIS饼状图中下方添加文字
内容源自:ArcGIS10.2基础教程(丁华) 书上要求在统计图的饼状图下方显示“总面积组成”,以及图例是只显示文字. 该如何操作呢? 其实就是在高级属性中选择标题-副标题-显示“总面积组成”即可 而 ...
- vue中使用echarts画饼状图
echarts的中文文档地址:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EC ...
- C#应用NPOI实现导出EXcel表格中插入饼状图（可实现动态数据生成）
一.思路: 1.excel是可以通过NPOI插入图片的: 2.C#通过NPOI生成饼状图: 3.把生成的饼状图以字节流的形式插入到表格 二.看代码: #region 生成饼图图例 /// < ...
随机推荐
- 三维数据曲面图 season绘图 panda绘图
三维数据曲面图 season绘图 panda绘图 待办 enter description here 转化成网格坐标 season可以让绘图更美观 panda绘图可以直接根据panda数据绘制图直接p ...
- 路飞-git操作
复习 """ 1.pip换源 - 采用国内源下载,速度快 2.虚拟环境 - 可以为项目单独配置开发环境,方便管理依赖模块及模块的版本迭代 3.后台项目重构目录结构 4.后 ...
- 创建集群corosync
#环境准备 #设置主机名解析yum -y install pcs pacemaker corosync fence-agents-allsystemctl start pcsd.servicesyst ...
- new和delete的深层次剖析(C++)
c++ 是公司开发最常用的语言之一, 那new和delete 这两个函数是所有开发者即爱又恨的函数.由new 和delete引发的bug , coredump , 让多少程序员加了多少班. 1. 遇到 ...
- Object.fromEntries
//数组转换成对象 const arr = [['foo', 1],['bar', 2]] const obj = Object.fromEntries(arr) console.log(obj.ba ...
- IntelliJ IDEA 2017.3尚硅谷-----设置界面
- python中使用graphviz环境配置
去官网下载graphviz,并下一步安装 配置graphviz的bin目录到path环境变量下 python相关包: 使用conda注意:conda install graphviz 可能没用,要使用 ...
- JEECG笔记
一.修改默认主题 找到SysThemesEnum.java类,路径为:\src\org\jeecgframework\core\enums\SysThemesEnum.java,在toEnum(Str ...
- idea选中文件时左侧菜单自动定位到文件所在位置
一:设置成自动定位,如图: 二:点击项目工程目录上的阻击按钮,自动定位
- js将后台传入得时间格式化
//格式化时间函数Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth() + 1, //月 ...