最近项目需要做一个首页图表展示,需要饼图、柱形图等。那么echars将是不错的选择。
去查echars官网发现登录不了,居然要使用魔法,话说echars不是中国的吗,咋回事。
下面这个链接是国内镜像网站不需要魔法
ISQQW.COM x ECharts 文档(国内同步镜像) - 教程
前端代码
首先得在项目中安装echars,在终端执行命令
npm install echarts --save
引入echars
import * as echarts from "echarts";
给图表一个展示的区域,可以是一个div
<el-card shadow="hover" style="height:403px;">
<div id="order-chart" style="height: 420px;width: 100%;"></div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-card shadow="hover">
<div ref="chart7" style="height: 400px;width: 100%;"></div>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="hover">
<div ref="chart" style="height: 400px;width: 100%;"></div>
</el-card>
</el-col>
</el-row>
给图表赋值,这里需要从后端查询数据
mounted() {
getHomeStackData().then(res => {
if (res.code === 200) {
this.stackData = res.data;
//遍历this.stackData.unBindData,如果this.stackData.unBindData的值为0,替换为null
for (let i = 0; i < this.stackData.unBindData.length; i++) {
if (this.stackData.unBindData[i] === 0) {
this.stackData.unBindData[i] = null;
}
}
const chart7 = echarts.init(this.$refs.chart7);
chart7.setOption(
{
title: {
text: '用户与产品绑定情况',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: this.stackData.productData,
},
series: [
{
name: '绑定量',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.stackData.bindData
},
{
name: '未绑定量',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.stackData.unBindData,
},
]
}
);
}
});
getHomePieData().then(res => {
if (res.code === 200) {
this.pieData = res.data;
const chart = echarts.init(this.$refs.chart);
chart.setOption({
title: {
text: '类型与用户数量',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '用户数量',
type: 'pie',
radius: '50%',
data: this.pieData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
}
}).catch(err => {
// console.log(err);
});
getHomeBarData().then(res => {
if (res.code === 200) {
this.barData = res.data;
const orderChart = echarts.init(document.getElementById('order-chart'));
orderChart.setOption(
{
title: {
text: '品牌与用户',
left: 'center'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
data: this.barData.xaxisData
},
yAxis: {},
series: [{
name: '用户量',
type: 'bar',
data: this.barData.seriesData
}]
}
);
}
}).catch(err => {
// console.log(err);
});
},
后端代码
@RestController
@RequestMapping("/home")
public class HomePageController {
@Autowired
private HomePageMapper homePageMapper;
/**
* 首页饼图数据
* @return List<HomePagePieVo>
*/
@ApiOperation("首页饼图数据")
@GetMapping("/getHomePagePieData")
public Result getHomePagePieData(){
List<HomePagePieVo> pieData = homePageMapper.getHomePagePieData();
if (pieData == null){
return ResultWrapper.error();
}
return ResultWrapper.ok(pieData);
}
/**
* 首页柱状图数据
* @return List<HomePageBarVo>
*/
@ApiOperation("首页柱状图数据")
@GetMapping("/getHomePageBarData")
public Result getHomePageBarData(){
List<HomePagePieVo> list = homePageMapper.getHomePageBarData();
HomePageBarVo homePageBarVo = new HomePageBarVo();
List<String> names = new ArrayList<>();
List<Integer> values = new ArrayList<>();
for (HomePagePieVo homePagePieVo : list) {
names.add(homePagePieVo.getName());
values.add(homePagePieVo.getValue());
}
homePageBarVo.setXAxisData(names);
homePageBarVo.setSeriesData(values);
if (homePageBarVo == null){
return ResultWrapper.error();
}
return ResultWrapper.ok(homePageBarVo);
}
/**
* 首页堆叠图数据
* @return List<HomePageBarVo>
*/
@ApiOperation("首页堆叠图数据")
@GetMapping("/getHomePageStackData")
public Result getHomePageStackData(){
List<HomePageStackedBarVo> list = homePageMapper.getHomePageStackedBarData();
HomePageStackedBarVo stackedBarVo = new HomePageStackedBarVo();
List<String> names = new ArrayList<>();
List<Integer> bind = new ArrayList<>();
List<Integer> unbind = new ArrayList<>();
for (HomePageStackedBarVo homePageStackedBarVo : list) {
names.add(homePageStackedBarVo.getProductName());
bind.add(homePageStackedBarVo.getBindCount());
unbind.add(homePageStackedBarVo.getUnBindCount());
}
stackedBarVo.setProductData(names);
stackedBarVo.setBindData(bind);
stackedBarVo.setUnBindData(unbind);
if (stackedBarVo == null){
return ResultWrapper.error();
}
return ResultWrapper.ok(stackedBarVo);
}
}