Echart绘制好看的柱形图

  // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("mainT"));
                let option = {
                    //画布背景色设置
                    backgroundColor: "#f1f1f1",
                    title: {
                        text: "这个是主标题",
                        textStyle: {
                            //设置主标题字体颜色
                            color: "#90E5E7" 
                        },
                        subtext: "这个是副标题"
                    },
                    tooltip: {
                        trigger: "axis"
                    },
                    legend: {
                        data: ["分类一", "分类二"]
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ["line", "bar"] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: "category",
                            data: [
                                "1月",
                                "2月",
                                "3月",
                                "4月",
                                "5月",
                                "6月",
                                "7月",
                                "8月",
                                "9月",
                                "10月",
                                "11月",
                                "12月"
                            ]
                        }
                    ],
                    yAxis: [
                        {
                            type: "value",
                            axisLine: {
                                //y轴
                                show: false
                            },
                            axisTick: {
                                //刻度线
                                show: false
                            },
                            splitLine: {
                                //网格线
                                show: true
                            }
                        }
                    ],
                    series: [
                        {
                            name: "蒸发量",
                            type: "bar",
                            //设置柱状图宽度
                            barWidth: "13",
                            data: [
                                2.0,
                                4.9,
                                7.0,
                                23.2,
                                25.6,
                                76.7,
                                135.6,
                                162.2,
                                32.6,
                                20.0,
                                6.4,
                                3.3
                            ],
                            itemStyle: {
                                normal: {
                                    //柱形图圆角，顺时针左上，右上，右下，左下）
                                    barBorderRadius: [12, 12, 12, 12],
                                    //设置柱状图颜色渐变
                                    color: new this.$echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: "#f75d5d"
                                            },
                                            {
                                                offset: 1,
                                                color: "#f0caca"
                                            }
                                        ]
                                    )
                                }
                            }
                        },
                        {
                            name: "降水量",
                            type: "bar",
                            //设置柱状图宽度
                            barWidth: "13",
                            //柱状图间距
                            barGap:"200%",
                            data: [
                                26.6,
                                5.9,
                                9.0,
                                26.4,
                                28.7,
                                70.7,
                                175.6,
                                182.2,
                                48.7,
                                18.8,
                                6.0,
                                26.3
                            ],
                            itemStyle: {
                                normal: {
                                    // 统一设置四个角的圆角大小
                                    barBorderRadius: 12,
                                    //设置柱状图颜色渐变
                                    color: new this.$echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: "#5ad9e8"
                                            },
                                            {
                                                offset: 1,
                                                color: "#caecf0"
                                            }
                                        ]
                                    )
                                }
                            }
                        }
                    ]
                };
                //  使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

series: [
          {
            data: [3480, 340, 171, 3897, 1234],
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: [8, 8, 0, 0],
                color: function(params) {
                  var colorList = [
                    '#DC69AA',
                    '#B6A2DE',
                    '#5AB1EF',
                    '#FFB980',
                    '#D87A80',
                    '#8D98B3',
                    '#E5CF0D',
                    '#97B552',
                    '#2EC7C9'
                  ]
                  return new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: '#5AB1EF'
                      },
                      {
                        offset: 1,
                        color: '#C0DCF9'
                      }
                    ]
                  )
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}'
                }
              }
            }
          }
        ]