Vue+Echarts数据可视化(面积图)

Vue+Echarts数据可视化(面积图)

最近公司开发需要使用Echarts来进行数据展示，稍微记录一下。先看效果图：
话不多说，直接上代码：
1、使用npm下载安装Echarts依赖(下载速度慢可使用淘宝镜像进行cnpm)

npm install echarts -S

2、main.js里引入echarts

import Echarts from 'echarts'
Vue.use(Echarts);
Vue.prototype.$echarts = Echarts;

3、Echarts面积图页面展示部分

<el-card class="trainsNumber">
  <div>
      <el-card class="carNumber-card">
       <div style="font-size: 18px">停车场库车次流水统计</div>
          <div>
           <div ref="main" id="myLine" style="width: 100%; height: 250px"></div>
           </div>
             </el-card>
            </div>
 </el-card>

4、data区进行相关值和属性设置(我这里数据写死，后续数据需要通过接口进行获取):面积图需关注areaStyle属性。

myLine_option: {
                    title: {
                        text: '',
                        x: '100px'
                    },
                    tooltip: {trigger: 'axis'},
                    legend: {
                        orient: 'horizontal',
                        x: 'right',
                        y: 'top',
                        data: ['进入停车场流水', '离开停车场流水']
                    },
                    grid: {
                        top: '16%',
                        left: '8%',
                        right: '8%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        name: '时间',
                        type: 'category',
                        data: ['2020-08-20 09:30:00', '2020-08-20 11:20:00', '2020-08-20 13:30:00', '2020-08-20 15:20:00', '2020-08-20 16:30:20', '2020-08-20 18:00:20', '2020-08-20 21:00:00'],
                        axisLabel: {
                            rotate: 30,
                            interval: 0
                        },
                    },
                    yAxis: {},
                    series: [{
                        name: '进入停车场流水',
                        type: 'line',
                        smooth:true,
                        data: [4, 28, 4, 30, 13, 11, 14],
                        itemStyle: {
                            normal: {
                                color: '#FFAE00',
                                lineStyle: {
                                    color: '#397FFF',
                                }
                            }
                        },
                        areaStyle: {
                            /*normal: { origin: 'start', color: 'rgba(57,127,255,.1)', opacity: 1 },*/
                            normal: {
                                color: {
                                    type: 'linear',//设置线性渐变
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: 'rgba(57,127,255,.1)' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#fff' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },

                            }
                        },

                    },
                        /*离开停车场流水*/
                        {
                            name: '离开停车场流水',
                            type: 'line',
                            smooth:true,
                            data: [2, 14, 15, 13, 16, 23, 3],
                            itemStyle: {
                                normal: {
                                    color: '#FFAE00',
                                    lineStyle: {
                                        color: '#397FFF',
                                    }
                                }
                            },
                            areaStyle: {
                                /*normal: { origin: 'start', color: 'rgba(57,127,255,.1)', opacity: 1 },*/
                                normal: {
                                    color: {
                                        type: 'linear',//设置线性渐变
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: 'rgba(57,127,255,.1)' // 0% 处的颜色

                                        }, {
                                            offset: 1, color: '#fff' // 100% 处的颜色
                                        }],
                                        globalCoord: false // 缺省为 false
                                    },

                                }
                            },
                        }

                    ]

                },

5、mounted区对Echarts方法进行初始化加载

mounted() {
            //停车场进出车次流水
            this.initChart()

        },

6、methods方法区：Echarts初始化方法：initChart()

initChart() {
                var myLine = this.$echarts.init(document.getElementById('myLine'));

                myLine.setOption(this.myLine_option);

            },

7，其他相关样式可以根据自己需求来写就行了，至此，Echarts数据可视化(面积图)的效果就可以在页面上实现了。
兄弟萌赶快试试吧