# css
* { margin: 0; padding: 0; } .content { width: 500px; height: 400px; border: 1px solid red; margin: 100px auto; } #main { width: 100%; height: 100%; background-color: #0D141E; }
# html
<div class="content"> <div id="main"> </div> </div>
# js
<script src="js/echarts.min.js"></script> var myChart = echarts.init(document.getElementById('main')); var option = { legend: { icon: 'none', data: [{ name: '郵件營銷', textStyle: { fontWeight: 'normal', color: '#fff' } }, { name: '聯盟廣告', textStyle: { fontWeight: 'normal', color: '#fff' } }, { name: '視頻廣告', textStyle: { fontWeight: 'normal', color: '#fff' } }] }, xAxis: { type: 'category', axisLine: { lineStyle: { color: '#fff' } }, splitLine: { show: false }, data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日'] }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#fff' } }, splitLine: { show: false } }, series: [ { name: '郵件營銷', type: 'line', lineStyle: { color: 'red', width: 1 }, symbolSize: 0, data: [120, 132, 101, 134, 90, 230, 210], }, { name: '聯盟廣告', type: 'line', lineStyle: { color: 'green', width: 1 }, symbolSize: 0, data: [220, 182, 191, 234, 290, 330, 310] }, { name: '視頻廣告', type: 'line', lineStyle: { color: 'blue', width: 1 }, symbolSize: 0, data: [150, 232, 201, 154, 190, 330, 410] } ] }; myChart.setOption(option); myChart.on('legendselectchanged', function (params) { var name = params.name; var selected = params.selected; selected[name] = true; // 獲取legend數據 var legend = myChart.getOption().legend[0].data; // 獲取series數據 var series = myChart.getOption().series; for (var i = 0; i < legend.length; i++) { if (name === legend[i]['name']) { // 當前的legend高亮顯示 legend[i]['textStyle']['fontWeight'] = 'bold'; legend[i]['textStyle']['color'] = 'yellow'; series[i]['lineStyle']['width'] = 4; series[i]['lineStyle']['opacity'] = 1; } else { // 排他思想 其他legend恢復 legend[i]['textStyle']['fontWeight'] = 'normal'; legend[i]['textStyle']['color'] = '#fff'; series[i]['lineStyle']['width'] = 1; series[i]['lineStyle']['opacity'] = 0.5; } } // 改變數據 option.legend.selected = selected; option.legend.data = legend; option.series = series; // 重新setOption myChart.setOption(option); })
# 核心代碼說明
# 效果(不支持gif圖片顯示,看不出效果)