echarts绘制折线图、柱状图

柱状图:

默认为纵向柱状图,如果要设置横向显示,则把yAxis的type改为'category'。

柱状图重叠会将一组数据全部重叠,如果要分组重叠,只能使用叠加的方式,叠加的值为两组数据的差值,这样可以实现多组数据重叠显示的效果。

 1 function existCardDayPicInit(){
 2       let myChart = echarts.init(document.getElementById('existCardDayPic'));
 3       let option = {
 4         tooltip: {},
 5         xAxis: {
 6             type: 'category',
 7             data: ['1号岗', '4号岗', '7号岗', '9号岗', '10号岗', '12号岗', '14号岗', '15号岗'],
 8             axisLabel: {
 9               show: true,
10               interval:0,
11               textStyle: {
12                 color: '#fff'
13               }
14             }
15         }, 
16         yAxis: {
17             axisLabel: {
18               show: true,
19               textStyle: {
20                 color: '#fff'
21               }
22             }
23         },
24         series: [{
25             name: '出门证',
26             data: [120, 200, 150, 80, 70, 110, 130, 200],
27             color: '#6997F3',
28             barWidth : 10,
29             type: 'bar'
30         }
31         ]
32     };
33       
34       var data = {};
35       $.ajax({
36             type: "POST",
37             url: "${ctx}/dataBoard/findCardGetExitNum",
38             data: data,
39             error: function (data) {
40                 alert("出错了!" );
41             },
42             success: function (data) {
43                 option.series[0].data = data.number; 
44                   myChart.setOption(option);
45                 }
46             }); 
47     }

折线图就将上述代码中的type改为'line'

猜你喜欢

转载自www.cnblogs.com/zeevy/p/12674548.html