vue中添加echarts

第一步 下载echarts
npm install echarts – save

第二步 引入echarts
在main.js中加入import * as echarts from “echarts”;

第三步 用着你需要的页面上

<div id="mychart" :style="{width:'100%', height: '400px' }"></div>

 mounted () {
         this.drawLine();
    },

    methods: {
         drawLine(){
             var echarts = require("echarts");
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('mychart'))
            // 绘制图表
            myChart.setOption({
                 title: {
                    left: 'center',
                    text: '本日网络状况',
                },
                 xAxis: {
                    type: 'category',
                    data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00',
                    '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00',
                    '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00',
                    '21:00', '22:00', '22:00']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [0,0,0,0,0,0,0,0,3,8,4,1,3,0,0,0,0,0,0,0,0,0,0,0],
                    type: 'line',
                    smooth: true,
                    itemStyle : { normal: {label : {show:  true }}},
                }]
            });
        }
    },

效果