使用Echarts快速实现柱状图数据可视化

2021年6月16日 169次阅读 来源: lao cui

做项目时用到ECharts，特此整理分享一下，作为笔记，同时希望帮助更多码友。 ECharts，是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库， 可以流畅的运行在 PC 和移动设备上。而作为数据可视化工具，使用快捷、方便。

下面就是实际应用到的代码，使用原理就是：
1） 先准备要显示柱状图的DIV：

<div id="demoCountId" style="width: 97%;min-height: 350px;"></div>

2） 引入echarts.min.js：

<!-- ECharts单文件引入 -->
<script src="<%=path %>/js/echarts/echarts.min.js" ></script>

3） 在自己写的JS中绑定刚刚准备的DIV，初始化echarts，把要可视化的数据赋值到相应的X、Y轴：
X轴是xAxis所在data，Y轴是yAxis所在data：

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById(demoCountId));
    // 指定图表的配置项和数据
    option = { 
        title : { 
            text: '近四周统计数',
            left:'left', //标题的水平位置
            top: 'top', //标题的垂直位置
            textStyle:{ 
                color:'#555555',
                fontStyle:'normal',
                fontWeight:'normal',
                fontSize:14
            }
        },
        color: ['#3398DB'],
        xAxis : [
            { 
                type : 'category',
                data : ['${weekStr[0]}','${weekStr[1]}','${weekStr[2]}','${weekStr[3]}'], //X轴要显示的数据，后台传入数组
                axisLabel: { 
                    show: true,
                    textStyle: { 
                        color: '#555555',   //颜色、字体
                        fontSize: '10'
                    },
                    interval: 0,    //坐标轴刻度标签的相关设置。
                    rotate: "45"
                },
                axisLine:{ 
                    lineStyle:{ 
                        color:'#555555' //更改坐标轴颜色
                    }
                },
                axisTick: { 
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            { 
                show : false,
                type : 'value',
            }
        ],
        series : [
            { 
                name:'周统计数',
                type:'bar',
                barWidth: '30%',
                data:['${countWeek[0]}','${countWeek[1]}','${countWeek[2]}','${countWeek[3]}'], //Y轴要显示的数据，后台传入数组
                itemStyle: { 
                    normal: { 
                        label: { 
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: {  //数值样式
                                color: '#555555',
                                fontSize: '12'
                            }
                        }
                    }
                }

            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

大致显示效果：
《使用Echarts快速实现柱状图数据可视化》
通过以上简单配置，即可快速实现数据可视化。如有错误，请不吝斧正。
更多示例详见：https://www.echartsjs.com/examples/zh/index.html

    原文作者：lao cui
    原文地址: https://blog.csdn.net/cuikai_8/article/details/103893066
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞