使用Echarts.js和Vue3框架完成可视化图表的编写

首先说明一下环境：一个现成的初始化的Vue3的架构，在assstc下面有Echarts.js文件用来进行图表的开发

首先需要将初始化的eslink给关闭，否则会在导入js文件的时候出现警告：

在vue.config.js文件中添加一段话：

lintOnSave：false

添加完成后的vue.config.js是下面的样子，可以直接复制下面的代码：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

然后就是按照比赛的要求制作各种图表，我们先不去考虑从接口获取数据，我们首先考虑制作静态的图表：

折线图：

<template>
    <div id="line_main">

    </div>
</template>

<script>
    import * as echarts from "@/assets/echarts"
    export default{
        name:'line_demo',
        mounted(){
            let echart = echarts.init(document.getElementById('line_main'))
            echart.setOption({
                title:{
                    text:'折线图'
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }
                ]
            })
        }
    }
</script>

<style>
    #line_main{
        height: 500px;
        width: 500px;
        border: 1px solid black;
        float: left;
        margin: 10px;
    }
</style>

柱状图：

<template>
    <div id="bar_main">

    </div>
</template>

<script>
    import * as echarts from "@/assets/echarts"
    export default{
        name:'bar_charts',
        mounted(){
            let echart = echarts.init(document.getElementById('bar_main'))
            echart.setOption({
                title:{
                    text:'柱状图'
                },
                xAxis:{
                    type:'category',
                    data:['北京','上海','广州','深圳','济南']
                },
                yAxis:{

                },
                series:[
                    {
                        data:[120,230,432,312,212],
                        type:'bar'
                    }
                ]
            })
        }
    }
</script>

<style>
    #bar_main{
        height: 500px;
        width: 500px;
        border: 1px solid black;
        float: left;
        margin: 10px;
    }
</style>

饼图：

<template>
    <div id="pie_main">

    </div>
</template>

<script>
    import * as echarts from "@/assets/echarts"
    export default{
        mounted(){
            let echart = echarts.init(document.getElementById('pie_main'))
            echart.setOption({
                title:{
                    text:'饼图'
                },
                series:[
                    {
                        type:'pie',
                        data:[
                            {value:120,name:'上海'},
                            {value:320,name:'广州'},
                            {value:240,name:'深圳'},
                            {value:230,name:'济南'},
                            {value:140,name:'青岛'},
                        ]
                    }
                ]
            })
        }
    }
</script>

<style>
    #pie_main{
        width: 600px;
        height: 500px;
        border: 1px solid black;
        float: left;
    }
</style>

条形图：

<template>
    <div id="hist_main">

    </div>
</template>

<script>
    import * as echarts from "@/assets/echarts.js"
    export default{
        mounted(){
            let echart = echarts.init(document.getElementById('hist_main'))
            echart.setOption({
                title:{
                    text:'条形图'
                },
                xAxis:{
                    type:'value',
                },
                yAxis:{
                    type:'category',
                    data:['上海','广州','济南','深圳','北京']
                },
                series:[
                    {
                        type:'bar',
                        data:[120,131,145,176,132]
                    }
                ]
            })
        }
    }
</script>

<style>
    #hist_main{
        height: 500px;
        width: 500px;
        border: 1px solid black;
        margin: 10px;
        float: left;
    }
</style>

折柱共存图：

<template>
    <div id="lineanbar_main">

    </div>
</template>

<script>
    import * as echarts from '@/assets/echarts.js'
    export default{
        mounted(){
            let echart = echarts.init(document.getElementById('lineanbar_main'))
            echart.setOption({
                title:{
                    text:'折柱混合图'
                },
                xAxis:{
                    data:['山东','北京','上海','广州','深圳']
                },
                yAxis:{

                },
                series:[
                    {
                        type:'line',
                        data:[120,130,323,143,132]
                    },
                    {
                        type:'bar',
                        data:[120,130,323,143,132]
                    }
                ]
            })
        }
    }
</script>

<style>
    #lineanbar_main{
        width: 500px;
        height: 500px;
        border: 1px solid black;
        float: left;
        margin: 10px;
    }
</style>

注意点：

制作图表的固定步骤：

1.引入echarts.js文件，并用echarts别名接收

2.在mounted钩子函数中使用echarts的init方法传入一个dom对象，初始化图标容器，并返回一个echart对象

3.使用echart对象的setOption对象传入参数

图标的固定元素：

在第三步中的参数里面有几个固定的参数：

title：标题对象

        text属性

xAxis：X轴对象，

        type属性，data属性

yAxis：Y轴对象，

        一般无属性，在制作条形图的时候将原本X轴对象的属性复制进来

series：图表设置数组

        这是一个数组，传入图表设置对象

        type属性：设置图标的类型

        data：设置图表的数据

图表基于柱状图的不同点：

我们以柱状图为基点，所有的其他图标的变化都是相对于柱状图而言的：

折线图：就是将series的type属性变成了line

饼图：没有xAxis和yAxis属性，在series的data属性里面，data变成了一个数据，里面存入对象，每一个对象对应一个扇区，name表示扇区的名字，value表示扇区的值，也就是扇区的大小

折柱共存图：就是将series数组中的对象增加一个，并在新增加的独享里面设置type属性和data属性

条形图：就是将柱状图的xAxis和yAxis属性的内容互换即可

最终效果：

结构展示，展示一下Vue脚手架中的结构：

 基本我们需要修改的文件就是vue.config.js，然后就是在components文件夹里面添加不同的组件，以及在App.vue里面引入并使用不同的组件