ECharts简单上手，实现数据可视化

ECharts官网Apache ECharts

• 前端vue2+element-ui
• 后端Spring boot+Mybatis-plus

实现效果:

文章主要介绍饼状图写法，其他图同理

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);
    }

}

实现效果: