Echart绘制好看的柱形图

简介: 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);

dashboard效果


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}'
                }
              }
            }
          }
        ]
相关文章
ECharts 柱状图横轴(X轴)文字内容显示不全
ECharts 柱状图横轴(X轴)文字内容显示不全
311 0
|
前端开发
【前端图表】echarts散点图鼠标划过散点显示信息
【前端图表】echarts散点图鼠标划过散点显示信息
129 0
|
4月前
|
JavaScript
vue + d3.js(v6) 绘制【柱状图/条形图】(含动画和交互)
vue + d3.js(v6) 绘制【柱状图/条形图】(含动画和交互)
64 0
|
5月前
|
数据可视化 JavaScript 前端开发
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
|
12月前
|
BI
echarts柱状图实现颜色渐变效果
echarts柱状图实现颜色渐变效果
221 1
|
前端开发
【前端图表】echarts实现散点图x轴时间轴
【前端图表】echarts实现散点图x轴时间轴
118 0
|
前端开发
【前端统计图】echarts多条折线图和横柱状图实现
【前端统计图】echarts多条折线图和横柱状图实现
108 0
30Echarts - 柱状图(柱状图框选)
30Echarts - 柱状图(柱状图框选)
44 0
|
前端开发
Echarts柱状图y轴刻度标签图片和柱状渐变功能实现的解决方案
Echarts柱状图y轴刻度标签图片和柱状渐变功能实现的解决方案
278 0
|
数据采集
如何使折线图的线条纵享丝滑?
昨天在做一个简单的频率分布直方图时,想在上方增添一个折线图,但是发现简单的geom_line()所添加的曲线有点生硬,在想有没有使其平滑的方法,于是google一番发现还是很容易实现的~~
85 0