使用echars图表

最近项目需要做一个首页图表展示，需要饼图、柱形图等。那么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);
    }
}