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 生成饼图图例 /// < ...
随机推荐
- sql根据字符将一行拆成多行
SELECT B.value FROM ( SELECT [value] = CONVERT(xml,'<root><v>' + REPLACE('A,C,D', ',', ' ...
- APP 安全测试
http://www.cnblogs.com/wetest/p/6694529.html
- 2019 ICPC 徐州网络赛 B.so easy (并查集)
计蒜客链接:https://nanti.jisuanke.com/t/41384 题目大意:给定n个数,从1到n排列,其中有q次操作,操作(1) 删除一个数字 // 操作(2)求这个数字之后第一个没有 ...
- vue项目中解决跨域问题axios和
项目如果是用脚手架搭建的(vue cli)项目配置文件里有个proxyTable proxyTable是vue-cli搭建webpack脚手架中的一个微型代理服务器,配置如下 配置和安装axios 安 ...
- 修改vsftpd的默认根目录/var/ftp/pub到其他目录
修改ftp的根目录只要修改/etc/vsftpd/vsftpd.conf文件即可: 加入如下几行: local_root=/var/www/html chroot_local_user=YES ano ...
- appium---切换webview时报错
在上一篇中简单介绍了如何查看webview和切换到webview的方法,可能第一次切换webview的时候会报错“Error: session not created exception: Chrom ...
- Centos7 下mysql 密码重置
Centos7 下mysql 密码重置 先停止mysql服务 mysqld_safe --skip-grant-tables & mysql mysql> use mysql;mysql ...
- 使用prepareStatement执行的sql语句的写法：
使用prepareStatement对象执行的增.删.改.查sql语句: 查: String sql = "SELECT * FROM 表名 WHERE loginId=? AND pas ...
- 主席树板子 p2104
#include<cstdio> #include<algorithm> #include<vector> using namespace std; ; int n ...
- 线段树 区间查询区间修改 poj 3468
#include<cstdio> #include<iostream> #include<algorithm> #include<string.h> u ...