深圳网站建设快速排名,天津自动seo,重庆推广网站排名公司,wordpress底部版权信息修改用Echarts图表开发#xff0c;原本的Echarts图例不一定能满足我们的视觉要求。 下面是Echarts 折线图自定义图例#xff0c;图例checked选中#xff0c;相应的折线线条会随之checked#xff0c;其余未选中的图例对应的折线opacity会降低#xff0c;#xff08;柱状图原本的Echarts图例不一定能满足我们的视觉要求。 下面是Echarts 折线图自定义图例图例checked选中相应的折线线条会随之checked其余未选中的图例对应的折线opacity会降低柱状图饼图等等也类似于此这是一个小例子如果满足不了您的视觉要求您可以自己定义css样式达到自己想要的视觉效果 !doctype html
html
head
meta charsetutf-8
titleEcharts 自定义折线图例/title
script typetext/javascript srchttps://cdn.bootcss.com/jquery/3.2.1/jquery.min.js/script
script typetext/javascript srchttps://cdn.bootcss.com/echarts/3.7.1/echarts.min.js/script
styleul,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
/headbodydiv classcharts-left-list stylewidth:30%; float:leftullispan classpull-leftspan classnum1/spanspan classlist-color/spanspan classlist-name安凱客車/span/spanspan classpull-right8.50/span/lilispan classpull-leftspan classnum2/spanspan classlist-color/spanspan classlist-name奧馳/span/spanspan classpull-right8.20/span/lilispan classpull-leftspan classnum3/spanspan classlist-color/spanspan classlist-name奧迪/span/spanspan classpull-right8.02/span/lilispan classpull-leftspan classnum4/spanspan classlist-color/spanspan classlist-name阿斯頓馬丁/span/spanspan classpull-right7.87/span/lilispan classpull-leftspan classnum5/spanspan classlist-color/spanspan classlist-name寶駿/span/spanspan classpull-right7.50/span/lilispan classpull-leftspan classnum6/spanspan classlist-color/spanspan classlist-name寶馬/span/spanspan classpull-right6.12/span/lilispan classpull-leftspan classnum7/spanspan classlist-color/spanspan classlist-name保時捷/span/spanspan classpull-right5.78/span/lilispan classpull-leftspan classnum8/spanspan classlist-color/spanspan classlist-name寶沃/span/spanspan classpull-right5.11/span/lilispan classpull-leftspan classnum9/spanspan classlist-color/spanspan classlist-name北奔/span/spanspan classpull-right4.67/span/lilispan classpull-leftspan classnum10/spanspan classlist-color/spanspan classlist-name奔馳/span/spanspan classpull-right4.18/span/li/ul
/divdiv idchartmain stylewidth:70%; height: 400px; float:right;/divscript//EChartsvar 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 classtooltip-allspan classtooltip-dateparams[0].name/spandiv classtooltip-detail;params.forEach(function (item) {result div classcustom-tooltipspan classitem-color stylebackground-color: item.color /spanspan classitem-nameitem.seriesName/spanspan classitem-numitem.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 i0; ioption.series.length; i){option.series[i].lineStyle.normal.opacity 0.1;}if ($(.state-selected).length0){$(.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 转载于:https://www.cnblogs.com/a-cat/p/8494510.html
