Echarts 图表使用（一）

傷城~ 2022-05-27 09:18 338阅读 0赞

#### 折线图和柱状图对比 ####

通过点击Echart 图表右上角的 **色块** 可以控制对应图表的显隐。但在多条柱状图中，对应的图形复杂（可以调整柱**状图之间的距离**解决），不符合图表**直观清晰**的特征，所以通过改写成折线图的方式更有利。在只有两支柱状图时，使用**柱状图**较好。

![多条折线图][SouthEast]

![多柱状图][SouthEast 1]

### 2. 多图表展示 ###

一般一个**option** 对应一张图表，但是也可以将多张图表通过**一个option** 展示

![多图表][SouthEast 2]

[复制粘贴到此页面可见效果][Link 1]

#### 同理也可以展示**三张图表** ####

![某城市多个职位的薪资分布][SouthEast 3]

--------------------

#### 一个属性多种结果的展示 ####

某一个职位在多个城市的**薪资分布阶段**

//TODO: 不可更改薪资范围，否则颜色
    yName = ["30K-50K", "20K-30K", "15K-20K", "10K-15K", "8K-10K", "6K-8K", "4K-6K"];
    option = {
        backgroundColor: '#2d3548',
        title: [{
                    text: "Java",
                     right:"25%",
                    textStyle: {
                      color: "#fff",
                      fontSize: "14"
                    }
                  },{
                     left:"25%",
                    text: "Python",
                    textStyle: {
                      color: "#fff",
                      fontSize: "14"
                    }
                  },
                  {
                    text: "SQL",
                     right:"25%",
                     top:"50%",
                    textStyle: {
                      color: "#fff",
                      fontSize: "14"
                    }
                  },{
                     left:"25%",
                     top:"50%",
                    text: "TOMACAT",
                    textStyle: {
                      color: "#fff",
                      fontSize: "14"
                    }
                  }
                  ],
        grid: [{
                x: '8%',
                y: '8%',
                width: '40%',
                height:"40%",
                containLabel: true
            },
            {
                x2: '8%',
                y: '8%',
                width: '40%',
                height:"40%",
                containLabel: true
            },
            {
                x: '8%',
                y2: '0',
                width: '40%',
                height:"40%",
                containLabel: true
            },
            {
                x2: '8%',
                y2: '0',
                width: '40%',
                height:"40%",
                containLabel: true
            },
        ],
        xAxis: [{
                gridIndex: 0,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                }
            },
            {
                gridIndex: 1,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                }
            },
            {
                gridIndex: 2,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                }
            },
            {
                gridIndex: 3,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                }
            },
        ],
        yAxis: [{
            gridIndex: 0,
            interval: 0,
            data: yName,
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#ddd"
                }
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
        }, {
            gridIndex: 1,
            interval: 0,
            data: yName,
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#ddd"
                }
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
        },
        {
            gridIndex: 2,
            interval: 0,
            data: yName,
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#ddd"
                }
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
        }, {
            gridIndex: 3,
            interval: 0,
            data: yName,
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#ddd"
                }
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
        }
        ],
        series: [
            {
                name: 'python',
                type: 'bar',
                xAxisIndex: 0,
                yAxisIndex: 0,
                itemStyle: {
                    // normal:{color:'#4f9aff',barBorderRadius:[0,10,10,0],}
                    normal: {
                        barBorderRadius: [0, 8, 8, 0],
                        borderWidth: 0,
                        borderColor: '#fff',
                        label:{
                            show:true,
                            position:'right',
                            formatter:function(v){ 
                              return v.value + "%";
                            },
                        },
                        color: function(params) { 
                            // build a color map as your need.
                            var colorList = [
                                '#b250ff',// 最后一个
                                '#4849b5', 
                                '#ffa800',
                                '#E5C37D', 
    
    
                                '#7f80e1b3', '#5c6d9ab3', 
                                '#837e86',
                                '#fdc86a' 
    
                            ];
    
                            return colorList[params.dataIndex]
                        },
                         shadowBlur: 20,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                barGap: '0',
                barWidth:'20',
                barCategoryGap: '5%',
                data: [10, 32, 28, 18, 2, 5, 5, ]
            },
            {
                name: 'Java',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                itemStyle: {
                    // normal:{color:'#4f9aff',barBorderRadius:[0,10,10,0],}
                    normal: {
                        barBorderRadius: [0, 8, 8, 0],
                        borderWidth: 0,
                        borderColor: '#fff',
                        label:{
                            show:true,
                            position:'right',
                            formatter:function(v){ 
                              return v.value + "%";
                            },
                        },
                        color: function(params) { 
                            // build a color map as your need.
                            var colorList = [
                                '#b250ff',// 最后一个
                                '#4849b5', 
                                '#ffa800',
                                '#E5C37D', 
    
    
                                '#7f80e1b3', '#5c6d9ab3', 
                                '#837e86',
                                '#fdc86a' 
                            ];
    
                            return colorList[params.dataIndex]
                        },
                        shadowBlur: 20,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                barGap: '0',
                barWidth:'20',
                barCategoryGap: '5%',
                data: [10, 42, 8, 28, 2, 5, 5, ]
            },
            {
                name: 'SQL',
                type: 'bar',
                xAxisIndex: 2,
                yAxisIndex: 2,
                itemStyle: {
                    // normal:{color:'#4f9aff',barBorderRadius:[0,10,10,0],}
                    normal: {
                        barBorderRadius: [0, 8, 8, 0],
                        borderWidth: 0,
                        borderColor: '#fff',
                        label:{
                            show:true,
                            position:'right',
                            formatter:function(v){ 
                              return v.value + "%";
                            },
                        },
                        color: function(params) { 
                            // build a color map as your need.
                            var colorList = [
                                '#b250ff',// 最后一个
                                '#4849b5', 
                                '#ffa800',
                                '#E5C37D', 
    
    
                                '#7f80e1b3', '#5c6d9ab3', 
                                '#837e86',
                                '#fdc86a' 
    
                            ];
    
                            return colorList[params.dataIndex]
                        },
                         shadowBlur: 20,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                barGap: '0',
                barWidth:'20',
                barCategoryGap: '5%',
                data: [10, 32, 28, 18, 2, 5, 5, ]
            },
            {
                name: 'TOMACAT',
                type: 'bar',
                xAxisIndex: 3,
                yAxisIndex: 3,
                itemStyle: {
                    // normal:{color:'#4f9aff',barBorderRadius:[0,10,10,0],}
                    normal: {
                        barBorderRadius: [0, 8, 8, 0],
                        borderWidth: 0,
                        borderColor: '#fff',
                        label:{
                            show:true,
                            position:'right',
                            formatter:function(v){ 
                              return v.value + "%";
                            },
                        },
                        color: function(params) { 
                            // build a color map as your need.
                            var colorList = [
                                '#b250ff',// 最后一个
                                '#4849b5', 
                                '#ffa800',
                                '#E5C37D', 
    
    
                                '#7f80e1b3', '#5c6d9ab3', 
                                '#837e86',
                                '#fdc86a' 
                            ];
    
                            return colorList[params.dataIndex]
                        },
                        shadowBlur: 20,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                barGap: '0',
                barWidth:'20',
                barCategoryGap: '5%',
                data: [10, 42, 8, 28, 2, 5, 5, ]
            }
    
        ]
    };

--------------------

#### 排行榜效果 ####

需要对返回的值进行**排序**

![排行榜效果][SouthEast 4]

--------------------

#### 一个实体的两个属性 ####

首先想到的是在一个图形中展示**两支柱状图**，由于这两个属性可能对应的值大小或者类型不同，会导致两个属性各自对应的图形高低不一致。同时需设立两个 **y轴** 。使用条形图和折线图的组合方式是一个不错的选择。  
![两支柱状图][SouthEast 5]

![折线图和柱状图][SouthEast 6]

[参考地址][Link 2]

[SouthEast]: /images/20220527/a97d674e65dd4a07b98dfe4b728aacfd.png
[SouthEast 1]: /images/20220527/77f4c9ce2f754153b1748b1791dbf719.png
[SouthEast 2]: /images/20220527/abf6fff2a5164b48bd736e704fcd3bbb.png
[Link 1]: http://gallery.echartsjs.com/editor.html?c=xSkBesa7Yz
[SouthEast 3]: /images/20220527/5addba5015664853acc57bb33879a79f.png
[SouthEast 4]: /images/20220527/5823037c492c450badebf6a1fb9b7e06.png
[SouthEast 5]: /images/20220527/3be7035a009c432696d8441b7205a6b6.png
[SouthEast 6]: /images/20220527/a61d41707a8847eca6ed398f84760733.png
[Link 2]: http://gallery.echartsjs.com/editor.html?c=xBJyA-rH5g