echarts-饼状图默认选中高亮
1.首页需要设置legend
legend: {
data: ["积极", "负面"],
selectedMode: false,
show: false
}
let index = 0;
var myCharts = this.$echarts.init(document.getElementById(this.id));
var option = {
title: {
text: this.title,
left: "center",
bottom: "0%",
textStyle: {
color: "#fff"
}
},
legend: {
data: ["积极", "负面"],
selectedMode: false,
show: false
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
name: "",
type: "pie",
radius: ["50%", "80%"],
center: ["50%", "40%"],
avoidLabelOverlap: false,
// selectedMode: "single",
label: {
normal: {
show: false,
position: "center",
formatter: "{d}%",
textStyle: {
color: "#fff"
}
},
emphasis: {
show: true,
textStyle: {
fontSize: "16",
fontWeight: "bold"
}
}
},
itemStyle: {
normal: {
// color: "#c23531",
color: params => {
//自定义颜色
var colorList = ["#60bce0", "#274170"];
return colorList[params.dataIndex];
},
borderWidth: 1,
borderColor: "#fff"
}
},
labelLine: {
normal: {
show: false
}
},
data: this.pieData
}
]
};
myCharts.setOption(option);
myCharts.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0
}); //设置默认选中高亮部分
myCharts.on("mouseover", function(e) {
if (e.dataIndex != index) {
myCharts.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index
});
}
});
myCharts.on("mouseout", function(e) {
index = e.dataIndex;
myCharts.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex
});
});
echarts-饼状图默认选中高亮的更多相关文章
- echarts 饼状图调节 label和labelLine的位置
原理 使用一个默认颜色为透明的,并且只显示labelLine的饼状图 然后通过调节这个透明的饼状图 以达到修改labelLine的位置 echarts地址 https://gallery.echart ...
- Echarts 饼状图自定义颜色
今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码 $.ajax({ url: "/HuanBaoYunTai/ajax/HuanBaoYunTaiService.ashx&qu ...
- jquery echarts 饼状图
var myChart = echarts.init(document.getElementById('myChart')); option = { title : { text: '某站点用户访问来 ...
- canvas图表详解系列(3):动态饼状图(原生Js仿echarts饼状图)
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- ECharts饼状图添加事件
和柱状图添加事件没有区别,详情如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...
- vue+element+echarts饼状图+可折叠列表
html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...
- echarts 饼状图 改变折线长度
$(function (){ //ups部分 var myChart = echarts.init(document.getElementById('result')) var option = { ...
- echarts 饼状图
说明:这是我做项目时自己写的小例子,里面有冗余的参数. 开发环境 vs2012 asp.net mvc4 c# 1.显示效果 2.HTML代码 <%@ Page Language=" ...
- Echarts饼状图
<head> <meta charset="utf-8"> <title>ECharts</title> <script sr ...
随机推荐
- spring多模块项目手动整合
一.分别创建parent entity dao service controller web等模块项目,如图: 二.parent项目添加依赖 <!-- 集中定义依赖版本号 --> < ...
- 【BZOJ3996】[TJOI2015]线性代数(最小割)
[BZOJ3996][TJOI2015]线性代数(最小割) 题面 BZOJ 洛谷 题解 首先把式子拆开,发现我们的答案式就是这个: \[\sum_{i=1}^n\sum_{j=1}^n B_{i,j} ...
- JavaScript - proxy
Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等). 来看看常用的方法 handler.get() let o = { name: 'liwenchi', age: 1 ...
- App自动化(1)--Appium-Android环境搭建
本次笔记记录Appium-Android环境搭建,主要实现在windows上通过python编写脚本来实现模拟器上安装的app自动化测试. 主要步骤:安装node.js,配置JDK环境,配置Andro ...
- hdu 4542 "小明系列故事——未知剩余系" (反素数+DFS剪枝)
传送门 参考资料: [1]:https://blog.csdn.net/acdreamers/article/details/25049767 题意: 输入两个数 type , k: ①type = ...
- SQL2012数据库还原失败System.Data.SqlClient.SqlError: 无法执行 BACKUP LOG,因为当前没有数据库备份
在一次数据库还原的操作过程中遇到如上错误,去百度了下找到了对应的解决方法 第一个: 在还原完整备份时候,在回复状态状态哪里选择 restore with norecovery ,尾日志部分可选可不选, ...
- 使用zabbix监控nginx的活动连接数
使用zabbix监控nginx的活动连接数 1.方法简述 zabbix可以自定义很多监控,只要是能通过命令获取到相关的值,就可以在zabbix的监控中增加该对象进行监控,在zabbix中,该对象称之为 ...
- codeforces-1142 (div1)
div1真难,现在就是后悔, 非常后悔 A.显然如果我们知道起点和终点是哪两个点,我们可以算出距离通过b / gcd(a,b)的方式求出需要走几步的. 并且数据范围似乎也允许我们这么做,所以直接枚举取 ...
- slickedit编译调试linux应用程序
目录 slickedit编译调试linux应用程序 工程建立 编译 智能报错跳转 配置编译环境 调试 title: slickedit编译调试linux应用程序 date: 2019/3/19 17: ...
- Kubernetes之调度器和调度过程
scheduler 当Scheduler通过API server 的watch接口监听到新建Pod副本的信息后,它会检查所有符合该Pod要求的Node列表,开始执行Pod调度逻辑.调度成功后将Pod绑 ...