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

最终效果

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

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

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

html代码

<el-col :span="12">
	<div id="chartPie" style="width:100%; height:400px;"></div>
</el-col>

js代码

<script>
			//绘制饼状图
			drawPieChart() {
				this.chartPie = echarts.init(document.getElementById('chartPie'));
				this.chartPie.setOption({
					title: {
						text:'各系统校验规则数饼状图',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: []
					},
					series: [{
						name: '系统名称',
						type: 'pie',
						radius: '70%',
						center: ['50%', '60%'],
						data: [],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: ' (0, 0, 0, 0.5)'
							}
						}
					}]
				});
			},
			//动态渲染饼状图
			fillPieChart() {
				console.log("动态渲染饼状图");
				//chartPie.showLoading();等待动画
				//chartPie.hideLoading();
				var _this = this;
				let para='';
				var user_id;
				var servicedata=[];
				para={user_id:JSON.parse(sessionStorage.getItem("user")).id};
				this.$post(url.piedata,para)
					.then(res => {
						if(res != null) {
							for(var i = 0; i < res.name.length; i++) {
								 var obj=new Object();
				                 obj.name=res.name[i]; 
				                 obj.value=res.data[i];
				                 servicedata[i]=obj;
							}

							this.chartPie.setOption({
							//工具
							toolbox: {
								show: true,
			                    feature: {
		
			                        saveAsImage: { show: true }
			                    }
			                },
								legend: {
									data: res.name
								},
								series: [{
									data:servicedata
								}]
							});
						} else {
							alert("饼状图获取数据异常！");
			
						}
					});
			},

</script>

java代码

  @PostMapping(value = "/piedata")	 
    @ResponseBody
    public Object pieData(@RequestBody Map<String,String> para){
        List<CheckRule> list = new ArrayList<>();
    	//JSONArray json = new JSONArray();
        //JSONArray json = JSONArray.fromObject(list);
        //数据库中拿到目标数据存在嵌套对象的list中
    	list = checkRuleService.getPieData(para.get("user_id"));
    	String[] name= new String[list.size()];
    	String[] data= new String[list.size()];
    	Map<String, Object> map = new HashMap<>();
    	//遍历list将目标数据分别存在两个数组中，然后两个数组作为元素存在map中，以供后面转成echart饼状图要求的json格式数据
    	for (int i = 0; i < list.size(); i++) {
    		 name[i] = list.get(i).getApp_name();
    		 data[i] = Integer.toString(list.get(i).getCount());
    	    	map.put("name", name);
    	    	map.put("data", data);
		}
    	//map转成json对象返回给页面
    	Object json = JSONArray.toJSON(map);
    	//System.out.println("返回给饼状图的json:"+json);
    	return json;
    }

SQL语句

 <!--通过用户ID查询所有系统的名称和对应系统的规则数，供主页饼状图展示-->
 <select id="getPieData" resultType="CheckRule">
	select sa.app_name app_name,COUNT(*) as count 
	from tb_checkrules r
	left join system_app sa ON r.app_id = sa.id
	where <if test="_parameter!=null">user_id=#{user_id}</if>
	group by sa.app_name
 </select>