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 ...
随机推荐
- 前端技术之：常用webpack插件
1.html-webpack-plugin Simplifies creation of HTML files to serve your webpack bundles. 主页地址: https ...
- C++学习笔记9_异常处理
异常处理 int divide(int a,int b) { if(b==0) { return -1;//然而,10,-10也是结果-1,所以要抛出异常了 } } //在异常不能通过返回值表示,也不 ...
- MIT线性代数：7.主变量，特解，求解AX=0
- 「卡常」我T死了我好桑心，我不会卡常。
我死了我死了我死了 puts(“Lrefrain==T”)
- python爬虫-携程-eleven参数
携程-eleven分析 一.eleven的位置 通过对旁边栈的分析,它是在另一个js文件中调用的.那个js文件是一个自调用的函数,所以我们可以直接copy下来,用浏览器执行看看 执行运行是会报错的,u ...
- 如何让elemengUI中的表格组件相同内容的单元格自动合并
1. 前言 这两天在工作中遇到这样一个需求:将某个Excel中的数据在页面上以表格形式展示出来,并且尽量保持数据层级与Excel中一致.在原始Excel文件中,对每一行相同的数据都进行了合并,使得数据 ...
- html5不能播放视频的方法
html5不能播放视频的方法H5不能播放视频的方法 格式工厂转换成 AVC 注意音频流 采样率和比特率 设置低一点 不然播放会卡住 还有点击播放必须要click 不要用touchstart没效果的
- javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦)
javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦) 缺陷就是 因为采用的是 MPEG1解码器 所以清晰度有点低 做直播可以考虑下 如果要清晰度高点 可以采取序列 ...
- python—mariadb自动部署主从
import configparser import os def config_mariadb_yum(): exists = os.path.exists('/etc/yum.repos.d/ma ...
- python中字符串常见操作（二）
# 可迭代对象有:字典,列表,元组,字符串,集合 str1 = '192.168.1.1' str2 = 'as df gh jk' str3 = '小李子' str4 = ['aa','bb','c ...