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

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

原创

最新推荐文章于 2025-06-24 18:11:06 发布 · 3.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #柱状图 #数据可视化 #java

最终效果

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

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

步骤：准备一个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: {},