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-饼状图默认选中高亮的更多相关文章

  1. echarts 饼状图调节 label和labelLine的位置

    原理 使用一个默认颜色为透明的,并且只显示labelLine的饼状图 然后通过调节这个透明的饼状图 以达到修改labelLine的位置 echarts地址 https://gallery.echart ...

  2. Echarts 饼状图自定义颜色

    今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码 $.ajax({ url: "/HuanBaoYunTai/ajax/HuanBaoYunTaiService.ashx&qu ...

  3. jquery echarts 饼状图

    var myChart = echarts.init(document.getElementById('myChart')); option = { title : { text: '某站点用户访问来 ...

  4. canvas图表详解系列(3):动态饼状图(原生Js仿echarts饼状图)

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  5. ECharts饼状图添加事件

    和柱状图添加事件没有区别,详情如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

  6. vue+element+echarts饼状图+可折叠列表

    html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...

  7. echarts 饼状图 改变折线长度

    $(function (){ //ups部分 var myChart = echarts.init(document.getElementById('result')) var option = { ...

  8. echarts 饼状图

    说明:这是我做项目时自己写的小例子,里面有冗余的参数. 开发环境 vs2012 asp.net mvc4  c# 1.显示效果 2.HTML代码 <%@ Page Language=" ...

  9. Echarts饼状图

    <head> <meta charset="utf-8"> <title>ECharts</title> <script sr ...

随机推荐

  1. Msi中文件替换

    转自https://blog.csdn.net/davidhsing/article/details/9962377 ※说明:目前可以用于MSI编辑的软件很多,但是有些软件在保存时会在MSI文件中写入 ...

  2. SpringBoot之常用注解

    在spring boot中,摒弃了spring以往项目中大量繁琐的配置,遵循约定大于配置的原则,通过自身默认配置,极大的降低了项目搭建的复杂度.同样在spring boot中,大量注解的使用,使得代码 ...

  3. BZOJ2300[HAOI2011]防线修建——非旋转treap+凸包(平衡树动态维护凸包)

    题目描述 近来A国和B国的矛盾激化,为了预防不测,A国准备修建一条长长的防线,当然修建防线的话,肯定要把需要保护的城市修在防线内部了.可是A国上层现在还犹豫不决,到底该把哪些城市作为保护对象呢?又由于 ...

  4. LOJ2276 [HAOI2017] 新型城市化 【二分图匹配】【tarjan】

    题目分析: 这题出的好! 首先问题肯定是二分图的最大独立集,如果删去某条匹配边之后独立集是否会变大. 跑出最大流之后流满的边就是匹配边. 如果一个匹配边的两个端点在一个强连通分量里,那这条边删掉之后我 ...

  5. 【CSA49G】【XSY3315】jump DP

    题目大意 有一个数轴.yww 最开始在位置 \(0\).yww 总共要跳跃很多次.每次 yww 可以往右跳 \(1\) 单位长度,或者跳到位置 \(1\). 定义位置序列为 yww 在每次跳跃之后所在 ...

  6. [SDOI2017]天才黑客

    题目大意 给一张有向图,再给一颗字典树,有向图上的每条边有一个非负边权还有一个字典树上的字符串,从一条边到另一条边的代价是那条边的边权和这两个字符串的最长公共前缀,问从1到其他点的最短路. 题解 一看 ...

  7. BZOJ 1010: 玩具装箱toy (斜率优化dp)

    Description P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为1... ...

  8. DDCTF-2019

    Web 滴 Web 签到题 Web 大吉大利,今晚吃鸡 1)滴 网址http://117.51.150.246/index.php?jpg=TmpZMlF6WXhOamN5UlRaQk56QTJOdz ...

  9. 原生js实现平滑滚动

    在以前的项目中有用到,在此整理一下: html部分 <span id="gotop">回到顶部</span> JS部分 // 使用requestAnimat ...

  10. 基于Redis的分布式锁真的安全吗?

    说明: 我前段时间写了一篇用consul实现分布式锁,感觉理解的也不是很好,直到我看到了这2篇写分布式锁的讨论,真的是很佩服作者严谨的态度, 把这种分布式锁研究的这么透彻,作者这种技术态度真的值得我好 ...