AimeeJin

echarts实现堆叠图,可自定义MakeLine文字。

显示效果:

 

 

 1 var seriesName = [\'直接访问\', \'邮件营销\', \'联盟广告\', \'视频广告\', \'搜索引擎\'];
 2 var labels = [\'周一\', \'周二\', \'周三\', \'周四\', \'周五\', \'周六\', \'周日\'];
 3 var datas = [[320, 332, 301, 334, 390, 330, 320],
 4 [120, 132, 101, 134, 90, 230, 210],
 5 [220, 182, 191, 234, 290, 330, 310],
 6 [150, 232, 201, 154, 190, 330, 410],
 7 [862, 1018, 964, 1026, 1679, 1600, 1570]];
 8 var target = 600;
 9 option = {
10     tooltip: {
11         trigger: \'axis\',
12         axisPointer: {            // 坐标轴指示器,坐标轴触发有效
13             type: \'shadow\'        // 默认为直线,可选为:\'line\' | \'shadow\'
14         }
15     },
16     toolbox:{
17         show: true,
18         feature: {
19             dataView: { show: true },
20             dataZoom:  { show: true },
21         }
22     },
23     legend: {
24         data: seriesName
25     },
26     grid: {
27         left: \'3%\',
28         right: \'11%\',
29         bottom: \'3%\',
30         containLabel: true
31     },
32     xAxis: [
33         {
34             type: \'category\',
35             data: labels
36         }
37     ],
38     yAxis: [
39         {
40             type: \'value\'
41         }
42     ],
43     series: [
44         {
45             name: \'直接访问\',
46             type: \'bar\',
47             stack: \'广告\',
48             data: datas[0],
49             markLine: {
50                 itemStyle: {
51                   normal: {
52                       symbol: \'none\',
53                       lineStyle: {
54                           width: 2,
55                           type: \'solid\',
56                           color: \'red\'
57                       },
58                       label: {
59                           formatter: \'直接访问目标量\',
60                           textStyle: {
61                               fontSize: 16,
62                               fontWeight: \'bolder\'
63                           }
64                       }
65                   }  
66                 },
67                 data:[{
68                     yAxis:target
69                 }]
70             }
71         },
72         {
73             name: \'邮件营销\',
74             type: \'bar\',
75             stack: \'广告\',
76             data: datas[1]
77         },
78         {
79             name: \'联盟广告\',
80             type: \'bar\',
81             stack: \'广告\',
82             data: datas[2]
83         },
84         {
85             name: \'视频广告\',
86             type: \'bar\',
87             stack: \'广告\',
88             data: datas[3]
89         },
90         {
91             name: \'搜索引擎\',
92             type: \'bar\',
93             stack: \'广告\',
94             data: datas[4],
95         }
96     ]
97 };

分类:

技术点:

相关文章: