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: {},
        series: [{
            name: '',
            type: 'bar',
            data: []
        }]
    });
},
//动态渲染柱状图
fillColumnChart() {
    var _this = this;
    this.$fetch(url.columndata)
    .then(res => {
        if(res != null) {
            var xaxi = [];
            var yaxi = [];
            for(var i = 0; i < res.length; i++) {
                if(typeof(res[i]) == "string") {
                    xaxi.push(res[i]);
                } else if(typeof(res[i] == "number")) {
	                yaxi.push(res[i]);
                }
            }
    this.chartColumn.setOption({
    //工具
    toolbox: {
        show: true,
        feature: {
        dataView: { show: false, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
        }
    },
		xAxis: {
			data: xaxi,
			name: "类型"
		},
		series: [{
			data: yaxi,
			type: 'bar',
			name: '次数'
		}]
		});
		} else {
			alert("柱状图数据获取异常！");
			this.$router.push({
			path: '/user/list'
		});
		}
	});
	}
}
</script>

Java代码

//主页柱状图获取数据
    @RequestMapping(value = "/columndata", method = RequestMethod.GET)
    @ResponseBody
    public List columnData() {
    	//用对象接收返回值，对象存在list里
    	List<DataSource> list  = dataSourceService.getDbType();
    	List datalist = new ArrayList<>();
    	//数据库类型和出现次数
		String dbtype= null;
		int count = 0;
		//遍历list拿到每个对象中需要的，dbtype和count
    	for(int i = 0 ; i < list.size() ; i++) {
    		  dbtype=list.get(i).getDbType();
    		  count = list.get(i).getCount();
    		  datalist.add(dbtype);
    		  datalist.add(count);
    		}
    	 return datalist;
    }

实体类

public class DataSource implements Serializable {

	private long id;
	private String code;
	private String dbInfo;
	private String userName;
	private transient String password;
	private String dbType;
	private String owner;
	private String sid;
	private String port;
	private String delete_flag;
	private String user_id;
	@JSONField(format="yyyy/MM/dd HH:mm:ss")
	private Date createTime;
	@JSONField(format="yyyy/MM/dd HH:mm:ss")
	private Date updateTime;
	private int count;
。。。。。。。。。。。。省略get  set方法
}

sql语句

	<select id = "getDbType" resultType = "DataSource">
		SELECT DISTINCT dbType,COUNT(*) as count FROM datasource GROUP BY dbType
	</select>