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

先看图效果

去除线段和边线

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);
}