Echarts自定义折线图例,增加选中功能
用Echarts图表开发，原本的Echarts图例不一定能满足我们的视觉要求。
下面是Echarts 折线图自定义图例，图例checked选中，相应的折线线条会随之checked，其余未选中的图例对应的折线opacity会降低，（柱状图，饼图等等也类似于此），这是一个小例子（如果满足不了您的视觉要求，您可以自己定义css样式，达到自己想要的视觉效果）：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts 自定义折线图例</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
<style>
ul,li{ list-style:none;}
.charts-left-list {
list-style: none;
overflow: hidden;
float: left;
width: 100%;
padding: 0;
}
.charts-left-list li {
float: left;
width: 100%;
color: #4A4A4A;
font-size: 13px;
line-height: 30px;
border-bottom: 1px solid #EEEEEE;
}
.pull-left {
float: left !important;
}
span.pull-right {
padding: 0 6px;
float: right !important;
}
li.state-selected {
background-color: rgba(240, 225, 28, 0.3);
} span.item-color{
float:left;
width:10px;
height:10px;
border-radius:50%;
margin-top: 9px;
margin-right: 6px;
}
.tooltip-all{
max-width:180px;
padding:10px 16px;
}
.custom-tooltip{
float: left;
width:100%;
}
.tooltip-date{
float: left;
width:100%;
padding-bottom: 10px;
border-bottom: 1px solid #EEEEEE;
}
.tooltip-detail{
float: left;
padding:10px 0;
}
.item-name{
float:left;
}
.item-num{
float:right;
} </style>
</head> <body> <div class="charts-left-list" style="width:30%; float:left">
<ul>
<li>
<span class="pull-left">
<span class="num">1</span>
<span class="list-color"></span>
<span class="list-name">安凱客車</span>
</span>
<span class="pull-right">8.50</span>
</li>
<li>
<span class="pull-left">
<span class="num">2</span>
<span class="list-color"></span>
<span class="list-name">奧馳</span>
</span>
<span class="pull-right">8.20</span>
</li>
<li>
<span class="pull-left">
<span class="num">3</span>
<span class="list-color"></span>
<span class="list-name">奧迪</span>
</span>
<span class="pull-right">8.02</span>
</li>
<li>
<span class="pull-left">
<span class="num">4</span>
<span class="list-color"></span>
<span class="list-name">阿斯頓馬丁</span>
</span>
<span class="pull-right">7.87</span>
</li>
<li>
<span class="pull-left">
<span class="num">5</span>
<span class="list-color"></span>
<span class="list-name">寶駿</span>
</span>
<span class="pull-right">7.50</span>
</li>
<li>
<span class="pull-left">
<span class="num">6</span>
<span class="list-color"></span>
<span class="list-name">寶馬</span>
</span>
<span class="pull-right">6.12</span>
</li>
<li>
<span class="pull-left">
<span class="num">7</span>
<span class="list-color"></span>
<span class="list-name">保時捷</span>
</span>
<span class="pull-right">5.78</span>
</li>
<li>
<span class="pull-left">
<span class="num">8</span>
<span class="list-color"></span>
<span class="list-name">寶沃</span>
</span>
<span class="pull-right">5.11</span>
</li>
<li>
<span class="pull-left">
<span class="num">9</span>
<span class="list-color"></span>
<span class="list-name">北奔</span>
</span>
<span class="pull-right">4.67</span>
</li>
<li>
<span class="pull-left">
<span class="num">10</span>
<span class="list-color"></span>
<span class="list-name">奔馳</span>
</span>
<span class="pull-right">4.18</span>
</li>
</ul>
</div> <div id="chartmain" style="width:70%; height: 400px; float:right;"></div> <script>
//ECharts
var colors = ['#F8E71C', '#7ED321', '#009688', '#FF9800', '#E91E63', '#50E3C2', '#CDDC39', '#03A9F4', '#9C27B0', '#2813FA'];
option = {
color: colors,
title : {
subtext: '营销指数'
},
animation: false,
tooltip : {
trigger: 'axis',
formatter: function(params) {
//console.log(params);
var result = '';
result += '<div class="tooltip-all"><span class="tooltip-date">'+params[0].name+'</span><div class="tooltip-detail">';
params.forEach(function (item) {
result += '<div class="custom-tooltip"><span class="item-color" style="background-color:' + item.color + '"></span><span class="item-name">'+item.seriesName+'</span><span class="item-num">'+item.value+'</span></div>';
});
result += '</div></div>';
return result;
}
},
legend : {
show: false,
data: [
'安凱客車','奧馳', '奧迪','阿斯頓馬丁', '寶駿','寶馬', '保時捷','寶沃', '北奔','奔馳'
]
},
grid : {
top : 40,
bottom: 70,
right: 80,
left: 34,
},
dataZoom : {
show : true,
realtime : true,
showDetail: true,
y: 380,
height: 20,
backgroundColor: 'rgba(255,255,255,0.5)',
dataBackgroundColor: '#EEEEEE',
fillerColor: 'rgba(252,249,215,0.5)',
handleColor: 'rgba(240,225,28,0.8)',
handleSize: '22',
start : 25,
end : 70
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['2016/9/08','2016/10/08','2016/11/08','2016/12/08','2017/01/08','2017/02/08','2017/03/08','2017/04/08','2017/05/08','2017/06/08','2017/07/08','2017/08/08','2017/09/08','2017/10/08','2017/11/08','2017/12/08'],
axisLine:{
lineStyle:{
color: '#EEEEEE',
width: 1,
}
},
axisLabel : {
textStyle: {
color: '#C8C6C6',
fontSize: 10
}
}
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value}',
textStyle: {
color: '#C8C6C6',
fontSize: 13
}
},
axisLine:{
lineStyle:{
color: '#EEEEEE',
width: 1,
}
},
splitLine: {
lineStyle: {
color: ['#EEEEEE']
}
} }
],
series : [
{
name:'安凱客車',
smooth: true,
type:'line',
symbol:'none',
data:[6.3, 7.5, 7.9, 8.2, 8.4, 8.8, 9,6.3,7.5, 7.9, 8.5, 8, 7.6, 7, 6,9],
lineStyle:{
normal:{
opacity: 1
}
}
},
{
name:'奧馳',
smooth: true,
type:'line',
symbol:'none',
data:[5.5, 6.5, 6.2, 7, 7.5, 8, 8.3,6,7, 5.5, 8.2, 6, 7, 6, 4,6],
lineStyle:{
normal:{
opacity: 1
}
}
},
{
name:'奧迪',
smooth: true,
type:'line',
symbol:'none',
data:[5.7, 6.2, 5, 4.3, 3, 5.2, 4,7,6.1, 5.3, 4, 6.2, 4.5, 6.8, 5.4,8.6],
lineStyle:{
normal:{
opacity: 1
}
}
},
{
name:'阿斯頓馬丁',
smooth: true,
type:'line',
symbol:'none',
data:[4.8, 6, 5.6, 5.2, 4.8, 5.4, 3.9,5.7,3.6, 2.8, 4.2, 3.6, 2.9, 4.3, 3.4,5.8],
lineStyle:{
normal:{
opacity: 1
}
}
},
{
name:'寶駿',
smooth: true,
type:'line',
symbol:'none',
data:[4.2, 5.4, 5.2, 4.6, 4, 5, 3.5,5.2,3.1, 4, 6, 3.1, 4, 2.5, 3,5],
lineStyle:{
normal:{
opacity: 1
}
}
},
{
name:'寶馬',
smooth: true,
type:'line',
symbol:'none',
data:[3.8, 4.6, 4.9, 4, 5, 3, 4.5,3,3.8, 4.6, 2.5, 2.4, 3.6, 3.1, 2.6,4.5],
lineStyle:{
normal:{
opacity: 1
}
}
},
{
name:'保時捷',
smooth: true,
type:'line',
symbol:'none',
data:[3.2, 4.1, 4.6, 5, 3.6, 2.4, 3.4,2,3, 5.6, 2, 3, 4, 2.1, 2.3,3.5],
lineStyle:{
normal:{
opacity: 1
}
}
},
{
name:'寶沃',
smooth: true,
type:'line',
symbol:'none',
data:[2.6, 3.4, 4, 4.2, 3.2, 2, 3,2.5,5, 4.2, 1.8, 3.6, 3.4, 1.8, 1.9,2.9],
lineStyle:{
normal:{
opacity: 1
}
}
},
{
name:'北奔',
smooth: true,
type:'line',
symbol:'none',
data:[2.1, 3, 3.5, 3.8, 2.8, 1.5, 2.4,2.9,4.1, 3.1, 1.2, 4, 3, 1.2, 1.6,2.4],
lineStyle:{
normal:{
opacity: 1
}
}
},
{
name:'奔馳',
smooth: true,
type:'line',
symbol:'none',
data:[1.5, 2.5, 3, 3.2, 2, 1, 3.6,2.1,4.5, 2.5, 0.8, 3.4, 2.5, 0.6, 1.8,2.1],
lineStyle:{
normal:{
opacity: 1
}
}
}
]
}; //初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain')); $('.charts-left-list li').bind('click',function(){
var index = $(this).index();
if($(this).hasClass('state-selected')){
$(this).removeClass('state-selected');
}else{
$(this).addClass('state-selected').attr('value',index);
} for(var i=0; i<option.series.length; i++){
option.series[i].lineStyle.normal.opacity = 0.1;
} if ($('.state-selected').length==0){
$('.charts-left-list li').each(function(){
var all_val = $(this).index();
option.series[all_val].lineStyle.normal.opacity = 1;
});
}else{
$('.charts-left-list li.state-selected').each(function(){
var the_val = $(this).attr('value');
option.series[the_val].lineStyle.normal.opacity = 1;
});
} myChart.setOption(option); }); //使用制定的配置项和数据显示图表
myChart.setOption(option); window.onresize = function () {
myChart.resize();
}; </script>
</body>
</html>
Echarts自定义折线图例,增加选中功能的更多相关文章
- echarts自定义折线图横坐标时间间隔踩坑总结
折线图需求:横坐标为时间,要求按一定间隔展示,鼠标移至折线上间隔时间内的数据也可展示 其实很简单的一个配置就可搞定,但在不熟悉echarts配置的情况下,就很懵逼 xAxis: { boundaryG ...
- 自定义listView添加滑动删除功能
今天研究了一下android里面的手势,结合昨天学习的自定义View,做了一个自定义的listview,继承自listView,添加了条目的滑动手势操作,滑动后出现一个删除按钮,点击删除按钮,触发一个 ...
- Echarts 自定义legend图片，修改点击之后的颜色图解
第一个问题:echarts 可以自定义图例的图标,百度上很多回答都是引用的相对路径,但是不知道为啥,我的vue项目就是引用不显示,在network里面找不到相应图片 后来我想了个法子,就是先获取到这个 ...
- 使用achartengine实现自定义折线图 ----附代码 调试OK
achartengine作为android开发中最常用的实现图标的开源框架,使用比较方便,参考官方文档谢了如下Demo,实现了自定义折线图. package edu.ustb.chart; impor ...
- 使用js批量选中功能实现更改数据库中的status状态值（批量展示）
我们在开发项目的时候经常会在后台管理时用到批量展示功能来动态的修改数据库的值.下面以修改数据库的status状态值来实现批量展示功能.批量选中功能引用js来实现.前端html代码: <table ...
- 如何Windows分页控件中增加统计功能
在我的博客里面,很多Winform程序里面都用到了分页处理,这样可以不管是在直接访问数据库的场景还是使用网络方式访问WCF服务获取数据,都能获得较好的效率,因此WInform程序里面的分页控件的使用是 ...
- 为ecshop红包增加”转赠”功能
ecshop促销中使用红包激励用户购物,要想炒热活动,红包就需要有物以稀为贵的感觉.有人求有人送,这样红包之间的转赠有助于拉动第二梯队的顾客.但是如果已经把红包添加到自己的账户了怎么办?如果ecsho ...
- 给ecshop后台增加管理功能页面
给ecshop后台增加管理功能页面 比如我们增加一个统计报表叫做 物流费用统计报表 放在后台“报表统计”栏目中 具体操作步骤: 第一步,我们要添加一个菜单到后台,然后设置语言项,最后设置权限,这样,后 ...
- echarts 显示下载按钮，echarts 自定义按钮，echarts 添加按钮
echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...
随机推荐
- 前端上传图片 base64转二进制上传
var dataURItoBlob = function (dataURI) { var byteString = atob(dataURI.split(',')[1]); var mimeStrin ...
- MIT线性代数：12.图和网络
- 浅谈Spring AOP 面向切面编程 最通俗易懂的画图理解AOP、AOP通知执行顺序~
简介 我们都知道,Spring 框架作为后端主流框架之一,最有特点的三部分就是IOC控制反转.依赖注入.以及AOP切面.当然AOP作为一个Spring 的重要组成模块,当然IOC是不依赖于Spring ...
- CSPS 模拟 70
考试结束看A了两题就有点遗憾开开心心地去颓废了 吐槽一下这局LRS开的有点睿智,SD当的有点累 T1跟前边一个T1挺像,打表也可以 T2智障dp,开滚动数组就不会被卡空间了 T3牛逼构造题,虽然不是很 ...
- Linux下Redis安装与配置
http://www.cnblogs.com/_popc/p/3684835.html
- Mybatis自定义TypeHandler解决特殊类型转换问题
我们知道,Java和MySQL中的数据类型是不同的,Java中除了基本数据类型,还有对象. 有时候使用MySQL存储数据,或者从MySQL中读取数据时,会有一些特殊需求
- zookeeper集群模式安装
服务器节点规划: 节点1:192.168.0.103 节点2:192.168.0.104 节点3:192.168.0.105 安装zookeeper,将zookeeper上传到三个服务器,保存在/ho ...
- T-SQL Part XI: Login Failed 18456 以及修改Authentication Mode
这是一个很常见的场景,安装SQL Server时候选择了默认的Windows Authentication Only,然后使用中发现还是需要支持用户名/密码登录. 按照MSDN的文档,然而并没有多大作 ...
- 关于css中的字体样式
1.决定字体的属性 color:字体颜色 属性值:单词,十六进制表示,rgb 2.字体大小 font-size:12px:属性值是整数字,不要带小数,单位是px叫做像素单位:凡是由像素拼成的图片我们 ...
- pat 1050 String Subtraction（20 分）
1050 String Subtraction(20 分) Given two strings S1 and S2, S=S1−S2 is defined to be the ...