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 ...
随机推荐
- Centos7下安装和配置vim
Centos7 最新版本默认已经安装vim,可以使用命令查看是否安装 rpm -qa|grep vim 输出结果如下,如无以下输出结果,则安装vim: vim-filesystem-7.4.160-4 ...
- Java中的String,StringBuilder,StringBuffer
String被final修饰,不可变,每次更改其实是重新创建了一个对象.StringBuilder,StringBuffer是可变的. StringBuffer是线程安全的,StringBuilder ...
- SpringBoot自动装配源码解析
序:众所周知spring-boot入门容易精通难,说到底spring-boot是对spring已有的各种技术的整合封装,因为封装了所以使用简单,也因为封装了所以越来越多的"拿来主义" ...
- Appium环境搭建-完整版
环境依赖 Node.js Appium Appium-desktop Appium-doctor Appium-Python-Client Python JDK Andriod SDK 以上所需的软件 ...
- PHP7中的数据类型
PHP中变量名→zval,变量值→zend_value.其变量内存是通过引用计数管理的,在PHP7中引用计数在value结构中. 变量类型: 头文件在PHP源码 /zend/zend_types.h ...
- C语言博客作业05--指针
1.本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 1.2.2 代码累计 2.PTA总分 2.1截图PTA中函数题目集的排名得分 2.2 我的总分: 3.P ...
- 记录一次有意思的XSS过滤绕过2
前几天在漏洞挖掘中遇到个xss,感觉绕过过程蛮有意思的,写篇文章记录下. 接下里是我对这个xss详细的分析和绕过 存在问题站点http://******/index/appInfo?appId=784 ...
- 查看macOS下正在使用的zsh
使用dscl . -read /Users/$USER UserShell查看 如果你的结果是/bin/zsh,又恰巧用brew安装了zsh的话,那么你可能就白安装了 将brew安装的zsh添加到/e ...
- python 向量化
study from : https://www.jianshu.com/p/ad8933dd6407
- Luogu P4716 【模板】最小树形图
题目链接\(Click\) \(Here\) 不知道有什么用的一个东西.本来不打算再大量扩知识点了但还是学一下好了,反正也不难. 原理:树上父亲唯一,每次选最短的父边. 此时会有两类情况: 就这样正常 ...