ECharts官网[Apache ECharts](https://echarts.apache.org/zh/index.html)
- 前端vue2+element-ui
- 后端Spring boot+Mybatis-plus
实现效果:
文章主要介绍饼状图写法,其他图同理
template部分代码:
<template>
<div id="data">
<el-row :gutter="20">
<el-col :span="12">
<div ref="main" style="width: 600px;height:400px;margin:10px 0 0 20px;"></div>
</el-col>
<el-col :span="12">
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div ref="pie" style="width: 600px;height:400px;"></div>
</el-col>
</el-row>
</div>
</template>
进入官网复制代码模板
- 官网代码对应以下pieoption部分
script部分代码
<script>
import * as echarts from 'echarts';
export default {
name: "Data",
data() {
return {
allData: null,
myChart2: null,
}
},
//注意必须是mounted而不是created
mounted() {
this.initChart()
this.getData()
},
methods: {
//向后端发送get请求
getData() {
axios.get('/echarts/pie', {}).then(res => {
this.allData = res.data.data;
console.log(this.allData);
this.updateChart();
})
},
initChart() {
this.myChart2 = echarts.init(this.$refs.pie);
},
updateChart() {
const formNames = this.allData.map((item) => {
return item.name
})
const formValue = this.allData.map((item) => {
return item.value
})
console.log(formNames);
const pieoption = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
data: this.allData,
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
}
]
};
this.myChart2.setOption(pieoption);
}
}
}
</script>
后端代码:
定义一个ECharts的普通类
import lombok.Data;
@Data
public class Echarts {
private String name;
private Integer value;
public Echarts(String name, Integer value) {
this.name = name;
this.value = value;
}
public Echarts() {
}
}
Controller类编写:
@Slf4j
@RestController
@RequestMapping("/echarts")
@CrossOrigin("*")
public class ECchartsController {
@Autowired
private BookService bookService;
@Autowired
private BookMapper bookMapper;
@Autowired
private SportsMapper sportsMapper;
@GetMapping("/pie")
public R<List<Echarts>> pie() {
List<Echarts> list = new ArrayList<Echarts>();
List<Sports> sportslist = sportsMapper.selectList(null);
for (Sports sports : sportslist) {
String names = sports.getName();
LambdaQueryWrapper<Book> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(Book::getSportsName, names);
Integer integer = bookMapper.selectCount(queryWrapper);
list.add(new Echarts(names, integer));
}
return R.success(list);
}
}
实现效果: