最终效果
饼状图:饼状图示例,使劲点我!!!
折线图:折线图示例,使劲点我!!!
步骤:准备一个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>