Echarts官网：https://echarts.apache.org/zh/tutorial.html#5%20分钟上手%20ECharts

一、安装echarts

npm install echarts

二、全局引入

在全局引入，需要在main.js文件中，引入echarts。

1. 全部引入

import echarts from 'echarts
Vue.prototype.$echarts = echarts

三、代码示例

<template>
    <div class="warp">
        <div class="echarts-warp">
            <div id="main1" class="box"></div>
        </div>
    </div>
</template>
<script>
export default {
    mounted() {
        this.initChart();
    },
    data() {
        return {};
    },
    methods: {
        initChart(){
            let option1 = {
                backgroundColor: '#2A3143', //背景
                color: '#FFFFFF',   //设置曲线颜色
                textStyle: {
                    fontWeight: 'normal',              //标题颜色
                    color: '#FFFFFF' //设置xy轴字体颜色
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    //设置x轴颜色以及轴大小
                    axisLine:{
                        lineStyle:{
                            color:'#FFFFFF',
                            width:1,//这里是为了突出显示加上的
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    //设置y轴颜色以及轴大小
                    axisLine:{
                        lineStyle:{
                            color:'#FFFFFF',
                            width:1,//这里是为了突出显示加上的
                        }
                    }
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                }]
            };
            let myChart1 = this.$echarts.init(document.getElementById('main1'));
            myChart1.setOption(option1);
        }
    }
}
</script>
<style lang="scss" scoped>
@import '@/styles/custom-theme.scss';
.warp{
    padding: 25px;
    color: #FFFFFF;
    height: 100%;
    text-align: left;
    .echarts-warp{
        background: #2A3143;
        display: inline-block;
        margin-right: 10px;
        .box {
            width: 300px;
            height: 300px;
            padding: 15px;
        }
    }
}
</style>