Echarts使用笔记（一） 渐变柱状图

看一下效果先

image.png

关键代码如下

itemStyle: {
    normal: {
        show: true,
        //其中, 前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 
        //而1 0 0 0则代表渐变色从正右方开始.
        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
        offset: 0,
        color: '#00F7FF'
        }, {
            offset: 1,
            color: '#3b73cf'
        }]),
            barBorderRadius: 50,
            borderWidth: 0,
    },
    emphasis: {
        shadowBlur: 15,
            shadowColor: 'rgba(105,123, 214, 0.7)'
    }
}

完整配置项如下

   
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts_1'));

        var xData = function () {
            var data = ['车辆故障报警', '车辆超速', '超出工作区域', '偏离工作路线', '长时间停留'];

            return data;
        }();

        var data = [5, 9, 3, 6, 11];

        option = {
            // backgroundColor: "#141f56",

            tooltip: {
                show: "true",
                trigger: 'item',
                backgroundColor: 'rgba(0,0,0,0.4)', // 背景
                padding: [8, 10], //内边距
                // extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
                formatter: function (params) {
                    if (params.seriesName != "") {
                        return params.name + ' ：  ' + params.value + ' 辆';
                    }
                },

            },
            grid: {
                borderWidth: 0,
                top: 0,
                bottom: 20,
                left: 120,
                right: 30,
                textStyle: {
                    color: "#fff"
                }
            },
            yAxis: [{
                type: 'category',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#eee',
                    }
                },
                axisLabel: {
                    inside: false,
                    textStyle: {
                        color: '#eee',
                        fontWeight: 'normal',
                        fontSize: '12',
                    },
                    // formatter:function(val){
                    //     return val.split("").join("\n")
                    // },
                },
                data: xData,
            }, {
                type: 'category',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                data: xData,
            }],
            xAxis: {
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#eee',
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#eee',
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#eee',
                        fontWeight: 'normal',
                        fontSize: '12',
                    },
                    formatter: '{value}',
                },
            },
            series: [{
                // name: '生师比(%)',
                type: 'bar',
                itemStyle: {
                    normal: {
                        show: true,
                        //其中, 前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始.
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#00F7FF'
                        }, {
                            offset: 1,
                            color: '#3b73cf'
                        }]),
                        barBorderRadius: 50,
                        borderWidth: 0,
                    },
                    emphasis: {
                        shadowBlur: 15,
                        shadowColor: 'rgba(105,123, 214, 0.7)'
                    }
                },
                zlevel: 2,
                barWidth: '60%',
                data: data,
            }]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });