echarts折線圖堆疊樣式圖表只顯示一類折線圖

本文轉載自查看原文 2018-07-10 08:56 1696 web

首先我們進入echarts的官方網站查看官方實例

 1 option = {
 2     title: {
 3         text: '折線圖堆疊'
 4     },
 5     tooltip: {
 6         trigger: 'axis'
 7     },
 8     legend: {
 9         data:['郵件營銷','聯盟廣告','視頻廣告','直接訪問','搜索引擎']
10     },
11     grid: {
12         left: '3%',
13         right: '4%',
14         bottom: '3%',
15         containLabel: true
16     },
17     toolbox: {
18         feature: {
19             saveAsImage: {}
20         }
21     },
22     xAxis: {
23         type: 'category',
24         boundaryGap: false,
25         data: ['周一','周二','周三','周四','周五','周六','周日']
26     },
27     yAxis: {
28         type: 'value'
29     },
30     series: [
31         {
32             name:'郵件營銷',
33             type:'line',
34             stack: '總量',
35             data:[120, 132, 101, 134, 90, 230, 210]
36         },
37         {
38             name:'聯盟廣告',
39             type:'line',
40             stack: '總量',
41             data:[220, 182, 191, 234, 290, 330, 310]
42         },
43         {
44             name:'視頻廣告',
45             type:'line',
46             stack: '總量',
47             data:[150, 232, 201, 154, 190, 330, 410]
48         },
49         {
50             name:'直接訪問',
51             type:'line',
52             stack: '總量',
53             data:[320, 332, 301, 334, 390, 330, 320]
54         },
55         {
56             name:'搜索引擎',
57             type:'line',
58             stack: '總量',
59             data:[820, 932, 901, 934, 1290, 1330, 1320]
60         }
61     ]
62 };

這樣顯示的是五條折線全部顯示的情況但是如果我們的客戶覺得是不是這么多的折線放到圖表中會很亂有沒有一種方法讓圖表只保留一條折線

並且點擊那個類別出來相應的折線圖當然可以看下面的代碼

 1 option = {
 2     title: {
 3         text: '折線圖堆疊'
 4     },
 5     tooltip: {
 6         trigger: 'axis'
 7     },
 8     legend: {
 9         data:['郵件營銷','聯盟廣告','視頻廣告','直接訪問','搜索引擎'],
10         selectedMode: 'single'
11     },
12     grid: {
13         left: '3%',
14         right: '4%',
15         bottom: '3%',
16         containLabel: true
17     },
18     toolbox: {
19         feature: {
20             saveAsImage: {}
21         }
22     },
23     xAxis: {
24         type: 'category',
25         boundaryGap: false,
26         data: ['周一','周二','周三','周四','周五','周六','周日']
27     },
28     yAxis: {
29         type: 'value'
30     },
31     series: [
32         {
33             name:'郵件營銷',
34             type:'line',
35             stack: '總量',
36             data:[120, 132, 101, 134, 90, 230, 210]
37         },
38         {
39             name:'聯盟廣告',
40             type:'line',
41             stack: '總量',
42             data:[220, 182, 191, 234, 290, 330, 310]
43         },
44         {
45             name:'視頻廣告',
46             type:'line',
47             stack: '總量',
48             data:[150, 232, 201, 154, 190, 330, 410]
49         },
50         {
51             name:'直接訪問',
52             type:'line',
53             stack: '總量',
54             data:[320, 332, 301, 334, 390, 330, 320]
55         },
56         {
57             name:'搜索引擎',
58             type:'line',
59             stack: '總量',
60             data:[820, 932, 901, 934, 1290, 1330, 1320]
61         }
62     ]
63 };

只需要在legend下加上屬性 selectedMode: 'single' 這樣就可以實現圖表單選了

希望能給大家帶來幫助

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 echarts_部分圖表配置_堆疊折線圖 echarts折線圖 echarts 折線圖 echarts折線圖 Echarts折線圖表斷點如何補全 ECharts折線圖堆疊設置為不堆疊的方法 Echarts折線圖的樣式修改 react-echarts之折線圖的顯示 canvas圖表(2) - 折線圖 ECharts折線圖多個折線每次只顯示一條

echarts折線圖堆疊樣式 圖表只顯示一類折線圖

免責聲明！

echarts折線圖堆疊樣式圖表只顯示一類折線圖