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. Linux(Ubuntu)使用日记------markdown文件与pdf,doc,docx文件的相互转化(pandoc使用)

    安装: sudo apt-get install pandoc 使用: man pandoc   查看帮助文档 直接转换,命令如下: pandoc -f markdown -t docx ./test ...

  2. springboot+shiro 一个项目部署多个,session名冲突问题

    问题 前几天遇到一个比较奇怪的问题, 一个项目部署多个,端口不同.启动之后在同一浏览器中进行登录,后一个登录的会把前一个登录的挤掉,导致只能登录一个. 原因 是因为sessionid相同,然后修改了s ...

  3. 怎么写自己的CMakeLists.txt

    一. 为什么要使用cmake 理论上说,任意一个C++程序都可以用g++来编译.但当程序规模越来越大时,一个工程可能有许多个文件夹和源文件,这时输入的编译命令将越来越长.通常一个小型C++项目可能含有 ...

  4. 洛谷P5155 [USACO18DEC]Balance Beam(期望,凸包)

    你以为它是一个期望dp,其实它是一个凸包哒! 设平衡木长度为\(L\),把向右走平衡木那个式子写一下: \[dp[i]=\frac{dp[i+1]+dp[i-1]}{2}\] 然后会发现这是一个等差数 ...

  5. qt 视频播放器错误解决方法

    DirectShowPlayerService::doRender: Unresolved error code 0x80040266 () 当你发布的qmlproject包含QtMultimedia ...

  6. 课下作业MyCP的分析

    目录 MyCP 题目 截图 代码 相关知识 出现的问题 代码托管 参考资料 MyCP 题目 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: ja ...

  7. k8s常用命令演示

    kubectl run --image=xxx name_xx --port kubectl run --image=nginx nginx-app --port=80 kubectl expose ...

  8. 【强大的PDF格式转换工具】Lighten PDF Converter OCR for Mac 6.2.0

    [简介] Lighten PDF Converter OCR 是一款Mac上强大的PDF格式转换工具,可以将PDF文档快速批量的转换为Office (Word, Excel, PowerPoint), ...

  9. Neo4j使用

    一.删除图 在开发过程中,很多时候需要快(简)速(单)清(粗)除(暴)Neo4j中存在的海量数据节点和关系数据 在这种情况下,delete和detach从性能上都已力不从心.Neo4j官方推荐清库方法 ...

  10. 010-2 Socket套接字类型

    ocket套接字类型 成员名称 说明 Dgram 支持数据报,即为固定 (通常很小) 的最大长度的无连接的. 不可靠的消息. 消息可能会丢失或重复,并且可能不按顺序抵达. 一个 Socket 类型的  ...