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. 02——Solr学习之Solr安装与配置(linux上的安装)

    借鉴博客:https://www.jianshu.com/p/1100f54fcbd8 https://www.cnblogs.com/jepson6669/p/9134652.html 1.准备一个 ...

  2. vue -- element

    1.页面 加载初始化 (function () { })();2.input 绑定键盘事件 @keyup.enter.native="onEnterSearch"@keyup.es ...

  3. 【CSA35G】【XSY3318】Counting Quests DP 拉格朗日反演 NTT

    题目大意 zjt 是个神仙. 一天,zjt 正在和 yww 玩猜数游戏. zjt 先想一个 \([1,n]\) 之间的整数 \(x\),然后 yww 开始向他问问题. yww 每次给 zjt 一个区间 ...

  4. 简单实现SSO

    方案一:原理:基于SSO Server 端的登录情况,跳转至SOO-client的各个端. 每次返回一个 ticker 随机票据值识别. 配置服务端 执行 :git clone https://git ...

  5. 20165223《信息安全系统设计基础》第九周学习总结 & 第八周课上测试

    目录 [第九周学习总结] 教材内容总结 [第八周课上测试] (一)求命令行传入整数参数的和 (二)练习Y86-64模拟器汇编 (三)基于socket实现daytime(13)服务器和客户端 参考资料 ...

  6. 介绍一款自动给添加不同浏览器CSS3前缀的插件~Autoprefixer(附其他前端开发插件)

    正文 自动给CSS文件添加不同浏览器的CSS3前缀:Autoprefixer 安装 只需兼容主流浏览器 正常情况使用:(在书写完的CSS样式文件中,按F1,选择Autoprefixer CSS) 这时 ...

  7. 关于pyx文件的修改

    在项目中碰到了关于pyx文件的修改,记录一下,省的以后还得查 官网快速入门地址:https://cython.readthedocs.io/en/latest/src/tutorial/cython_ ...

  8. 树莓派wiringPi,BCM,BOARD编码对应管脚

    wiringPi,BCM,BOARD编码 由于上课需要, 嵌入式学习从树莓派开始 树莓派中执行: $> gpio readall 即可得到关于树莓派管脚的各种信息 上面的图可能不是特别清楚, 可 ...

  9. opencv+codeblocks +anaconda

    study from : https://www.jianshu.com/p/c16b7c870356 #include <cstdio> #include <cstdlib> ...

  10. spring AOP的概念和使用

    指路:http://www.cnblogs.com/liujiayun/p/5912628.html AOP的来源:OOP在一些重复代码的使用中,代码冗余比较多,利用AOP可以改善. 通过编写切面和切 ...