echarts堆叠面积图排序

数据为测试数据，有一样的可以作为参考

参考了官方的堆叠图，网上找方法。最后还是没有找到相似的，或者有相似但是不符合需求。

最后参考官方文档  https://echarts.apache.org/examples/zh/editor.html?c=dataset-simple0

1.将 xAxis yAxis 这两个互换 ，柱形图横着展示

2.series 中每条数据添加 stack: 'name' 属性，实现堆叠，特别注意的是stack的name要相同才会堆叠到一起

效果图如下：

数据解析：

 第一条数据是上方的图例，后面的数据是每个堆叠柱形图。

排序问题

计算第二条数据的合，代码如下：

1.  
   //排序
2.  
   for (var i = 1; i < sources.length - 1; i ) {
3.  
   for (var j = 1; j < sources.length - 1; j ) {
4.  
   var array1 = sources[j];
5.  
   var array2 = sources[j 1];
6.  
   var sum1 = 0;
7.  
   var sum2 = 0;
8.  
   for (var i = 1; i < array1.length - 1; i ) {
9.  
   sum1 = array1[i];
10.  
    }
11.  
    for (var i = 1; i < array2.length - 1; i ) {
12.  
    sum2 = array2[i];
13.  
    }
14.  
    if (sum1 > sum2) {
15.  
    var tempsums = sources[j 1];
16.  
    sources[j 1] = sources[j];
17.  
    sources[j] = tempsums;
18.  
    }
19.  
    }
20.  
    }

一个简单的冒泡排序。

 1.y轴名称放到柱形图上方

 2.添加图片

1：在 option 下的 axisLabel 中添加

1.  
   show: true,
2.  
   inside: true,
3.  
   splitNumber: 50,
4.  
   boundaryGap: [20, 20],
5.  
   textStyle: {
6.  
   color: "#fff",
7.  
   verticalAlign: "bottom",
8.  
   align: "left",
9.  
   padding: [10, 0, 20, -10],
10.  
    },

 调整padding来调整位置

2：使用图片 ， 也是 option 下的 axisLabel 中添加

1.  
   formatter: function(name) {
2.  
   var arr = [];
3.  
   arr.push(
4.  
   '{name|' name '}',
5.  
   '{img|}'
6.  
   );
7.  
   return arr.join('');
8.  
   },
9.  
    
10.  
    // margin: 20,
11.  
    rich: {
12.  
    name: {
13.  
    Height: 10,
14.  
    width: 370,
15.  
    padding: [10, 0, 10, 0],
16.  
    align: 'left',
17.  
    backgroundColor: {
18.  
    image: images
19.  
    }
20.  
    },
21.  
    img: {
22.  
    height: 0,
23.  
    align: 'center',
24.  
    },
25.  
    },

先在 formatter 将 name 和 img 进行 return，就可以在 rich 中进行样式设置

其中 backgroundColor 使用的是 image，直接放图片地址

完整 option 如下：

1.  
   var option;
2.  
   var images = "./img/xz11372.png";
3.  
   option = {
4.  
   legend: {
5.  
   itemWidth: 10, // 设置宽度
6.  
   itemHeight: 10, // 设置高度
7.  
   itemGap: 5, // 设置间距
8.  
   // padding:[10,0,0,24],
9.  
   textStyle: {
10.  
    color: '#FFF', // 文字的颜色
11.  
    fontSize: '14', // 文字字体大小
12.  
    },
13.  
    },
14.  
    grid: {
15.  
    x: "2%", //x 偏移量
16.  
    y: "8%", // y 偏移量
17.  
    width: "60%", // 宽度
18.  
    height: "90%" // 高度
19.  
    },
20.  
    dataset: {
21.  
    source: sources
22.  
    },
23.  
    xAxis: {
24.  
    type: "value",
25.  
    boundaryGap: false,
26.  
    splitLine: {
27.  
    show: false
28.  
    },
29.  
    axisLabel: {
30.  
    show: false, //不显示坐标轴上的文字
31.  
    },
32.  
    },
33.  
    yAxis: [{
34.  
    type: 'category',
35.  
    textStyle: {
36.  
    color: '#FFF', // 文字的颜色
37.  
    fontSize: '14', // 文字字体大小
38.  
    },
39.  
    axisTick: {
40.  
    show: false //不显示坐标轴刻度线
41.  
    },
42.  
    axisLine: {
43.  
    show: false, //不显示坐标轴线
44.  
    },
45.  
    axisLabel: {
46.  
    formatter: function(name) {
47.  
    var arr = [];
48.  
    arr.push(
49.  
    '{name|' name '}',
50.  
    '{img|}'
51.  
    );
52.  
     
53.  
    return arr.join('');
54.  
    },
55.  
     
56.  
    // margin: 20,
57.  
    rich: {
58.  
    name: {
59.  
    Height: 10,
60.  
    width: 370,
61.  
    padding: [10, 0, 10, 0],
62.  
    align: 'left',
63.  
    backgroundColor: {
64.  
    image: images
65.  
    }
66.  
    },
67.  
    img: {
68.  
    height: 0,
69.  
    align: 'center',
70.  
     
71.  
    },
72.  
    },
73.  
    show: true,
74.  
    inside: true,
75.  
    splitNumber: 50,
76.  
    boundaryGap: [20, 20],
77.  
    textStyle: {
78.  
    color: "#fff",
79.  
    verticalAlign: "bottom",
80.  
    align: "left",
81.  
    padding: [10, 0, 20, -10],
82.  
    },
83.  
    },
84.  
    },
85.  
    {
86.  
    type: 'category',
87.  
    axisTick: {
88.  
    show: false //不显示坐标轴刻度线
89.  
    },
90.  
    axisLine: {
91.  
    show: false, //不显示坐标轴线
92.  
    },
93.  
    data: sums.reverse(),
94.  
    axisLabel: {
95.  
    label: {
96.  
    show: false
97.  
    },
98.  
    formatter: '{value}',
99.  
    textStyle: {
100.  
     color: "#ffffff",
101.  
     verticalAlign: "bottom",
102.  
     align: "center",
103.  
     padding: [10, 20, 30, 0],
104.  
     },
105.  
     }
106.  
     }
107.  
     ],
108.  
      
109.  
     series: series,
110.  
      
111.  
     };
112.  
     option && myChart.setOption(option, true);
113.  
      
114.  
     myChart.dispatchAction({
115.  
     type: 'dataZoom',
116.  
     start: 0,
117.  
     end: 1
118.  
     });

添加最后一段是因为可能会图片加载不出来，点击图例隐藏一个再显示后才会正常显示出图片

最后，因为我主要写java。js就不在各位面前献丑了。

这篇好文章是转载于：学新通技术网