vue-admin使用echart折线图

1 安装echart插件

npm install echarts --save

2 引入echart

import * as echarts from 'echarts'

引入echart有全部引入和按需引入，这里我使用的是全部引入，且在自己需要的页面下，而不是main.js

按需引入：https://echarts.apache.org/handbook/zh/basics/import 

3 定义一个宽高容器，如果没有宽高，图表不会显示

<div id="map" style="width: 100%;height:500px;"></div>

4  初始化

利用echarts.init初始话一个实例，并通过 setOption方法生成

methods: {
        getMap(){
            var myChart = echarts.init(document.getElementById('map'))
            let option = {
                title: {
                    text: '本月收益统计',
                    x:'center',
                    y:'top',
                    textAlign:'left'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
                    bottom: 0,
                    padding:[30, 30,0,0],
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                // 下载图标
                // toolbox: {
                //     feature: {
                //     saveAsImage: {}
                //     }
                // },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,100,30]
                    },
                    {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,50,60]
                    },
                    {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410,80,90]
                    },
                    {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320,70,60]
                    },
                    {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,125,60]
                    }
                ]
            }
            myChart.setOption(option);

        }
    },

把getMap方法放置在mounted函数中生成，这里我使用的是组件化形式，因此需要先引入组件

import monthChart from './monthChart'

注册组件 

components:{
    monthChart,
},

将组件渲染在页面上

<monthChart ref="monthChart"></monthChart>

 最后在mounted中生成

mounted() {
   this.$refs.monthChart.getMap();
 },

 

5、效果图

 

6 结语

在实际过程中肯定不会用到死的数据，都是通过前后端交互来获取数据生成的，可按自己需求进行相应的改变和配置