Echarts 之bar 柱形图

最新推荐文章于 2024-10-29 16:52:53 发布

woodFan先生

最新推荐文章于 2024-10-29 16:52:53 发布

阅读量544

点赞数

CC 4.0 BY-SA版权

分类专栏： Echarts相关

本文链接：https://blog.csdn.net/qq_42715494/article/details/116605399

Echarts相关专栏收录该内容

2 篇文章

订阅专栏

实现步骤：

一、引入Echars

npm install echarts

二、main.js中导入

// 图表--插件
import echarts from 'echarts'
 
Vue.use(echarts)
 
Vue.prototype.$echarts = echarts

三、html代码

<div id="shtBarChart" style="width:100%;height:100%"></div>

四、js代码

let titleFontSize = document.getElementById('shtBarChart').offsetWidth;
let myChart = this.$echarts.init(document.getElementById('shtBarChart'));
let option = {
    grid:{   //绘图区调整
        x:15,  //左留白
        y:10,   //上留白
        x2:15,  //右留白
        y2:10   //下留白
    },
    xAxis: {
        show:false,//隐藏x轴刻度
        splitLine:{ show: false }, //去除网格线
        axisLine: { show: false },
        axisTick: { show: false },
    },
    yAxis: {
        type: 'category',
        inverse: true,//是否排序
        splitLine:{ show: false }, //去除网格线
        axisLine: { show: false },
        axisTick: { show: false },
    },
    series: [
        {
            type: 'bar',
            barWidth: 11,
            barCategoryGap:'10%',/*多个并排柱子设置柱子之间的间距*/
            showBackground: true,//y轴背景
            label: {
                show: true,
                position:[6,-10],//设置文字显示位置
                formatter: '{b| '+'{b}'+'}'+'{c|'+'{c}'+'}',
                
                textStyle:{     //图例文字的样式
                    align:'left',
                    verticalAlign:'middle',//对齐方式
                    rich:{
                        b:{
                            fontSize:14,
                            fontWeight:700,
                            color:'#424F65',
                            width:200,//设置宽度
                        },
                        c:{
                            fontSize:14,
                            fontWeight:700,
                            color:'#00BCFF',
                            width:80,//设置宽度
                            align: 'right',//对齐方式
                            
                        },
                    },
                },
            },
            itemStyle: {
                barBorderRadius: [titleFontSize/2],//设置图形边界弧度
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0,
                    [
                        {offset: 0, color: '#39D7DE'},
                        {offset: 1, color: '#675AFF'}
                    ]
                ),
            },
            data: this.shPool,
        },
    ]
};
myChart.setOption(option)