echarts formatter_echarts数据可视化图表（一）：柱状图

echarts数据可视化图表(一)：柱状图

效果图：

代码如下：

注意：需引用echarts.js

html

css

.box-echarts{    width:500px;    height:500px;}

js

var loadEcharts05 = function (){        var myChartss = echarts.init(document.getElementById("Echarts05"));        var option = {            tooltip: {                trigger: 'axis',                axisPointer: {                    type: 'shadow'                },                formatter: function (params) {                    return params[0].name + ': ' + params[0].value;                }            },            grid: {                left: chartsRelativeSize(1, 'r'),                right: chartsRelativeSize(1, 'r'),                bottom: chartsRelativeSize(0.5, 'r'),                top:chartsRelativeSize(1, 'r'),                containLabel: true            },            xAxis: [                {                    type: 'category',                    data: ["济宁","泰安","烟台","枣庄","日照","青岛","淄博"],                    axisLine: {                        lineStyle: {                            color: '#363A51'                        }                    },                    axisTick: {                        show: false                    },                    axisLabel: {                        formatter: '{value}',                        textStyle: {                            color: '#fff'                        },                        interval: 0                    }                }],            yAxis: [                {                    type: 'value',                    splitLine:{                        lineStyle:{                            color:"#363A51"                        }                    },                    axisLine: {                        show: true,                        lineStyle: {                            color: '#363A51'                        }                    },                    axisTick: {                        show: false,                        interval: 2                    },                    axisLabel: {                        textStyle: {                            color: '#019ABA'                        },                        formatter:function(value,index){                            var r = '';                            if(value>100000000){//亿                                r = (value/100000000).toFixed(1) + '亿';                            }else if(value>10000){//万                                r = (value/10000).toFixed(1) + '万';                            }else{                                r = value;                            }                            return r;                        }                    }                }            ],            series: [                {                    "name": "",                    type: 'pictorialBar',                    symbolSize: [30, 16],                    symbolOffset: [0, -10],                    symbolPosition: 'end',                    itemStyle: {                        normal: {                            color: function (params) {                                var colorList = ['#EA5353', '#f27326', '#9DD530', '#38CFCA', '#6C54E2', '#4D86DB', '#DBD64D'];                                return colorList[params.dataIndex%colorList.length]                            }                        }                    },                    data: [100,55,58,12,45,48,78]                },                {                    name: '',                    type: 'pictorialBar',                    symbolSize: [30, 16],                    symbolOffset: [0, 5],                    z: 12,                    itemStyle: {                        normal: {                            color: function (params) {                                var colorList = ['#EA5353', '#f27326', '#9DD530', '#38CFCA', '#6C54E2', '#4D86DB', '#DBD64D'];                                return colorList[params.dataIndex%colorList.length]                            }                        }                    },                    data: [100,55,58,12,45,48,78]                },                {                    type: 'bar',                    barWidth: "30",                    itemStyle: {                        normal: {                            color: function (params) {                                var colorList = ['#EA5353', '#f27326', '#9DD530', '#38CFCA', '#6C54E2', '#4D86DB', '#DBD64D'];                                return colorList[params.dataIndex%colorList.length]                            },                            opacity: .7                        }                    },                    data: [100,55,58,12,45,48,78]                }            ]        };        myChartss.setOption(option);    };

原创不易，记得关注点赞转发哦！