Vue集成echarts
1. 安装ecahrts依赖
cnpm i echarts -S
2. 引入echarts
import * as echarts from 'echarts
3. 编写响应的Controller
package com.lyj.puredesign.controller;
import cn.hutool.core.collection.CollUtil;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.date.Quarter;
import com.lyj.puredesign.common.Result;
import com.lyj.puredesign.pojo.User;
import com.lyj.puredesign.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/echarts")
public class EchartsController {
@Autowired
private IUserService userService;
@GetMapping("/example")
public Result get() {
Map<String, Object> map = new HashMap<>();
map.put("x", CollUtil.newArrayList("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"));
map.put("y", CollUtil.newArrayList(150, 230, 224, 218, 135, 147, 260));
return Result.success(map);
}
@GetMapping("/members")
public Result members() {
List<User> list = userService.list();
int q1 = 0; // 第一季度
int q2 = 0; // 第二季度
int q3 = 0; // 第三季度
int q4 = 0; // 第四季度
for (User user: list) {
Date createTime = user.getCreateTime();
Quarter quarter = DateUtil.quarterEnum(createTime);
switch (quarter) {
case Q1: q1 += 1; break;
case Q2: q2 += 1; break;
case Q3: q3 += 1; break;
case Q4: q4 += 1; break;
default: break;
}
}
return Result.success(CollUtil.newArrayList(q1, q2, q3, q4));
}
}
4. 前端页面显示
<template>
<div>
<el-row>
<el-col :span="12">
<div id="main" style="width: 500px; height: 400px"></div>
</el-col>
<el-col :span="12">
<div id="pie" style="width: 500px; height: 400px"></div>
</el-col>
</el-row>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: "Home",
data() {
return {
// user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
}
},
mounted() { // 页面元素渲染完之后再触发
let chartDom = document.getElementById('main');
let myChart = echarts.init(chartDom);
let option;
option = {
title: {
text: '各季度用户数量统计',
subtext: '趋势图',
left: 'center'
},
xAxis: {
type: 'category',
data: ['第一季度','第二季度','第三季度','第四季度']
},
yAxis: {
type: 'value'
},
series: [
{
data: [],
type: 'line'
},
{
data: [],
type: 'bar'
}
]
};
this.request.get("/echarts/members").then(res=>{
// option.xAxis.data = res.data.x
option.series[0].data = res.data
option.series[1].data = res.data
myChart.setOption(option);
})
// 饼图
let pieOption = {
title: {
text: '各季度用户数量统计',
subtext: '饼图',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '60%',
label:{ //饼图图形上的文本标签
normal:{
show:true,
position:'inner', //标签的位置
textStyle : {
fontWeight : 300 ,
fontSize : 14, //文字的字体大小
color: "#fff"
},
formatter:'{d}%'
}
},
data: [
/* { value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }*/
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
let pieDom = document.getElementById("pie")
let pieChart = echarts.init(pieDom)
this.request.get("/echarts/members").then(res=>{
pieOption.series[0].data = [
{value: res.data[0], name: '第一季度'},
{value: res.data[1], name: '第二季度'},
{value: res.data[2], name: '第三季度'},
{value: res.data[3], name: '第四季度'},
]
pieChart.setOption(pieOption)
})
}
}
</script>
