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 ...
随机推荐
- 电脑突然使用不了复制粘贴快捷键,Ctrl+C和Ctrl+V没用
今天不知道怎么回事,在复制代码的时候突然用不了Ctrl+C和Ctrl+V了 刚开始我还以为是eclipse出问题,然后我在idea中是可以复制 和 粘贴的,然后我又打开文本编辑器notepad++,发 ...
- 财务CLOUD成本核算
1.关账 仓库账关账 2.应收应付是否已审核 生成财务应收应付 3.存货账关账 4.1采购存货核算 4.2零成本维护 4.3成本中心设置 4.4成本项目设置 4.5费用项目设置 4.6成本项目匹配方 ...
- mysql时间比较
' and ZXBZ ='Y' AND SQRQ >= '2017-04-28 00:00:00' AND SQRQ <= '2017-04-28 23:59:59'; ;
- https 自签名SSL证书
介绍 TLS或称传输层安全性,及其前身SSL(代表安全套接字层)是用于将正常流量包装在受保护的加密包装中的Web协议. 使用这种技术,服务器可以在服务器和客户端之间安全地发送流量,而不会被外部各方拦截 ...
- CMakeList.txt设置OpenCv路径
源文件imageBasics.cpp #include <iostream> #include <chrono> using namespace std; #include & ...
- cocos 动画系统
前面的话 cocos 动画系统支持任意组件属性和用户自定义属性的驱动,再加上可任意编辑的时间曲线和移动轨迹编辑功能,就可以制作出各种动态效果 概述 Animation 组件可以以动画方式驱动所在节点和 ...
- Educational Codeforces Round 63 (Rated for Div. 2) D. Beautiful Array 分类讨论连续递推dp
题意:给出一个 数列 和一个x 可以对数列一个连续的部分 每个数乘以x 问该序列可以达到的最大连续序列和是多少 思路: 不是所有区间题目都是线段树!!!!!! 这题其实是一个很简单的dp 使用的是分 ...
- Python 编写一个有道翻译的 workflow 教程
最近使用有道翻译的 workflow 总是翻译不了,可能是 appKey 失效了或者超过调用上限,所以打算自己实现一个. 创建 workflow 打开 Alfred3 的 Preferences,选择 ...
- 【CF932E】Perpetual Subtraction(NTT,线性代数)
[CF932E]Perpetual Subtraction(NTT,线性代数) 题面 洛谷 CF 题解 设\(f_{i,j}\)表示\(i\)轮之后这个数恰好为\(j\)的概率. 得到转移:\(\di ...
- MySQL数据库、表常用操作
1.按条件查询表中数据: mysql> select user,host,password from user; 2.按组合条件查询表中数据: mysql> select id, pass ...