Apache ECharts 图柱状图 :柱状图圆角、渐变色、线条、单击事件。

原创于 2022-05-19 11:06:22 发布 · 510 阅读

CC 4.0 BY-SA版权

文章标签：

该博客详细介绍了如何使用ECharts库进行图表定制，包括去除轴线、设置圆角渐变色条形图以及实现点击事件监听。通过调整xAxis和yAxis的配置，可以实现无边框、无线段的效果，增强图表的视觉简洁性。同时，利用LinearGradient创建渐变色，为条形图增加美观度。此外，通过监听'click'事件，可以获取到点击图表时的详细参数，为交互功能提供数据支持。

先看图效果

去除线段和边线

xAxis: {  //横向轴
    type: 'category',
    axisLabel: {
        fontSize: 12,
        interval: 0
    },
    axisTick: {
        show: false //关闭线段
    },
    axisLine: {
        show: false //关闭边框
    },
    data: ['NAME','NAME2','NAME3']
},

yAxis: {//竖向轴
    type: 'value',
    axisTick: {
        show: false //关闭线段
    },
    axisLine: {
        show: false //关闭边框
    },
},

圆角和渐变色

series: [
    {
        barCategoryGap: '75%',
        itemStyle: {
            // color: '#005CE6',
            //这里是 渐变色 x: 0, //右 y: 0, //下 x2: 0, //左  y2: 1, //上
            color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                {
                    offset: 0,
                    color: '#005CE6'
                },
                {
                    offset: 1,
                    color: '#0095F4'
                }
            ]),
            borderRadius: [15, 15, 0, 0], //这里是圆角 【 上 右 下 左 】顺序
        },
        data: [1203,3142,555],
        type: 'bar'
    }
]

单击事件

myChart.on('click', function (param) {
//   param.name  被选中的名字


        console.log(param);
}