Echarts—柱状图动态获取数据示例（java版本）

最新推荐文章于 2025-06-24 18:11:06 发布

邓商羽

最新推荐文章于 2025-06-24 18:11:06 发布

阅读量3.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： # Echarts 文章标签： echarts 柱状图数据可视化 java

本文链接：https://blog.youkuaiyun.com/DengShangYu_/article/details/93879490

最终效果

饼状图：饼状图示例，使劲点我！！！

折线图：折线图示例，使劲点我！！！

步骤：准备一个dom——>获取dom节点——>初始化——>绘制图表——>渲染数据

html代码

创建一个指定大小的dom
	<el-col :span="12">
		<div id="chartColumn" style="width:100%; height:400px;"></div>
	</el-col>

js代码

<script>        
//绘制柱状图
drawColumnChart() {
    //初始化dom
    this.chartColumn = echarts.init(document.getElementById('chartColumn'));
    this.chartColumn.setOption({
    title: {
        text: '各数据库占有数据源情况柱状图'
        },
        tooltip: {},
        xAxis: {
            data: []
	    },
        yAxis: {},