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 ...
随机推荐
- jQuery 与 Ajax 的应用
Ajax 全称为 "Asynchronous JavaScript and XML"(异步 JavaScript 和 XML ),它并不是指一种单一的技术,而是有机地利用了一系列交 ...
- nodejs 实现跨域
1.nodejs let http = require('http'); http.createServer((req,res) => { res.setHeader("Access- ...
- Python Spider - urllib.request
import urllib.request import urllib.parse import json proxy_support = urllib.request.ProxyHandler({' ...
- 苹果“抄袭”雷军PPT?小米高管如此评论
3月26日凌晨,苹果如期举行了春季发布会,但发布会上并没有发布任何新硬件,主角全部是电视.游戏.信用卡等软件新品,值得一提的是,在苹果PPT上,有一张将硬件/软件/服务三部分单独提炼出来. “抄袭”雷 ...
- zookeeper集群的简单搭建
zookeeper简单介绍 zookeeper是一个为分布式应用提供一致性服务的软件,它是开源的Hadoop项目的一个子项目,并根据google发表的一篇论文来实现的.zookeeper为分布式系统提 ...
- Centos 6.5下mysql 8.0.11的rpm包的安装方式
1.系统版本及mysql下载地址 操作系统:Centos 6.5(Centos 7.4下载对应的mysql版本安装同理) mysql数据库版本:mysql8.0.11 mysql官方网站:http:/ ...
- HDU1754-ZKW线段树
单点更新,区间最值 HDU 1754 // // Created by helica on 2018/3/18. // //zkw线段树 单点修改 区间求最值 //HDU 1754 #include ...
- 【集训队互测2015】Robot
题目描述 http://uoj.ac/problem/88 题解 维护两颗线段树,维护最大值和最小值,因为每次只有单点查询,所以可以直接在区间插入线段就可以了. 注意卡常,不要写STL,用链表把同类修 ...
- 仿照selalchemy实现简单的mongo查询
首先这是一个很奇葩的需求,时间紧迫顺手胡写了一个,以后看看有没有好的思路 def and_(item_list): return "%s:[%s]" % ("$and&q ...
- Asp.net MVC 权限过滤器实现方法的最佳实践
在项目开发中,为了安全.方便地判断用户是否有访问当前资源(Action)的权限,我们一般通过全局过滤器来实现. Asp.net MVC 页面中常见的权限判断使用过滤器主要在以下几种情况(根据权限判断的 ...