echarts柱状图鼠标悬浮显示数据_echarts数据可视化图表（一）：柱状图

た入场券 2023-01-10 11:53 397阅读 0赞

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

效果图：

![317e9ba6990d74882739e5c15823f310.png][]

代码如下：

注意：需引用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);    };

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

[317e9ba6990d74882739e5c15823f310.png]: /images/20221119/6e0dd44377cb4baca8cad2ed4d489922.png

发表评论取消回复

表情：

评论列表（有 0 条评论，397人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts 可视化数据展示竖柱状图

效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dl

左手的ㄟ右手/ 2023年06月22日 05:22/ 0 赞/ 186 阅读

相关 echarts 可视化数据展示横柱状图

效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dl

小咪咪/ 2023年06月22日 05:21/ 0 赞/ 5 阅读

相关 echarts柱状图鼠标悬浮显示数据_echarts数据可视化图表（一）：柱状图

echarts数据可视化图表(一)：柱状图效果图： ![317e9ba6990d74882739e5c15823f310.png][] 代码如下：注意：需引用ech

た入场券/ 2023年01月10日 11:53/ 0 赞/ 398 阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 290 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 638 阅读

相关 Echarts数据可视化：图表篇（1）—— 基本柱状图、堆叠柱状图

[项目地址][Link 1] 介绍柱状图作为最常见的可视化图表，用于展示一些比较基础的数据，其中分为基本柱状图、堆叠柱状图。通过实现这两种图表，我们将学习到以下内

亦凉/ 2022年10月01日 07:42/ 0 赞/ 1176 阅读

相关 ECharts 更新柱状图数据

ECharts 更新柱状图数据最近使用Echarts的时候，想要先加载出图表的大概框架样式，再加载数据，之后再定时刷新数据，这样就不用每次重新加载样式，减轻浏览器负担。

矫情吗；*/ 2022年07月11日 01:56/ 0 赞/ 407 阅读

相关 echarts-柱状图

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年06月08日 09:40/ 0 赞/ 359 阅读

相关 echarts柱状图

引入echarts的js包echarts.min.js 事例地址：echarts.baidu.com/examples.html\chart-type-bar [htt

梦里梦外;/ 2022年06月07日 20:49/ 0 赞/ 313 阅读

相关 ECharts柱状图百分比显示

ECharts柱状图百分比显示 ![Center][] //shop为div的id var city\_all\_bar = echarts.init(do

系统管理员/ 2022年06月04日 05:41/ 0 赞/ 443 阅读