用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>
