Vue中折线图的使用

当我们要展示数据的时候除了表格，第一个想到的应该就是图了，平时使用的最多的一般都是柱状图、折线图和饼图了，本章主讲折线图和柱状图的使用。

准备工作如下：

1、要使用折线图就要用到Echarts

安装方法：npm install echarts -S

2、在main.js文件中引入

import Echarts from 'echarts'

Vue.use(Echarts);
Vue.prototype.$echarts = Echarts;

3、在templates\home_application\src\views\目录下建立新的组件，取名为zzt.vue（在pycharm中使用vue的话，设置请看http://www.mamicode.com/info-detail-2404830.html）

4、既然创建了组件，那么代表肯定有某处地方会用到这个组件，这样才会使组件发挥作用。在templates\home_application\src\components\base\headerMenu.vue里面添加相关的内容（name就是点击的时候跳转的路径，to代表跳到哪个组件里面）

、在templates\home_application\src\router\index.js文件中添加路由信息（title就是路由的名称，path为跳转的路径，是相对路径，name就是第4步中的name去掉/，component就是导入时命名的组件名称。）

制折线图步骤：

1、在<template><div></div></template>中添加一个div标签，内容如下（style中的width和height是折线图的宽高）：

<div id="myLine" style="width: 700px; height: 350px"></div>

2、在<script></script>标签中添加如下代码：

export default {
    data() {
        return {
            myLine_option: {
                 title: {
                    text: '5分钟平均负载(近一小时)',  // 图表标题
                    x: '100px'  // 标题位置，可选值有'center'，'left'，'right'，{number}（x坐标，单位px）
                },
                tooltip: {trigger: 'axis'},  // 提示框选项：axis，item，none
                  // legend是每条折线的配置
                  legend: {
                      orient: 'horizontal',  // 设置布局方式，默认水平布局，可选值：'horizontal'（水平），'vertical'（垂直）
                       x: 'right',  // 设置水平安放位置，默认全图居中，可选值：'center'，'left'，'right'，{number}（x坐标，单位px）
                        y: 'top',  // 设置垂直安放位置，默认全图顶端，可选值：'top'，'bottom'，'center'，{number}（y坐标，单位px）
                        data: ['5分钟平均负载(近一小时)', '10分钟平均负载(近一小时)']  // 每条折线的标题
                },
                 //  图表距边框的距离,可选值：'百分比'，{number}（单位px）
                  grid: {
                        top: '16%', // 等价于 y: '16%'
                        left: '8%',
                        right: '8%',
                        bottom: '3%',
                        containLabel: true
                },
                  xAxis: {
                        name: '时间',   // x轴标题
                        type: 'category',
                        data: ['2019-3-4 15:19:20', '2019-3-4 15:20:20', '2019-3-4 15:21:20', '2019-3-4 15:22:20', '2019-3-4 15:23:20', '2019-3-4 15:24:20', '2019-3-4 15:25:20'],  // x轴数据
                        axisLabel: {
                            rotate: 30,  // 旋转角度
                            interval: 0  // 设置X轴数据间隔几个显示一个，为0表示都显示
                },
                },
                  yAxis: {},
                  // 要展示的数据
                  series: [{
                        name: '5分钟平均负载(近一小时)',  // 要与legend中data里面的内容一致，否则会导致无法显示折线标题
                        type: 'line',  // 选项有：折线'line', 柱状'bar'
                         data: [16.7, 18.9, 15.4, 17.3, 13.6, 11.4, 14.9]
                },
                {
                        name: '10分钟平均负载(近一小时)',
                        type: 'line',
                        data: [17.3, 14.9, 15.4, 13.6, 16.7, 11.4, 18.9]
                }
                ]
                },
                }
                },
methods: {
    initChart() {
        var myLine = this.$echarts.init(document.getElementById('myLine'));
        myLine.setOption(this.myLine_option);
},
},
mounted() {
    this.initChart()
}
}

3、启动前端，就能看见美美的折线图了

4、其实要从折线图转成柱状图很简单，只需要将series里面的type由line改成bar即可，其余配置都是一样的

5、整个图表数据需要修改的部分只有x轴的数据和series中的数据，x轴的数据对象获取方式为：this.myLine_option.xAxis.data，series中的数据对象获取方式为：this.myLine_option.series[0].data

最后附上源码：

<template>
<div>
        <div id="myLine" style="width: 700px; height: 350px"></div>
</div>
</template>
<script>
    export default {
        data() {
            return {
                myLine_option: {
                    title: {
                        text: '5分钟平均负载(近一小时)',
                        x: '100px'
                    },
                    tooltip: {trigger: 'axis'},
                    legend: {
                        orient: 'horizontal',
                        x: 'right',
                        y: 'top',
                        data: ['5分钟平均负载(近一小时)', '10分钟平均负载(近一小时)']
                    },
                    grid: {
                        top: '16%',
                        left: '8%',
                        right: '8%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        name: '时间',
                        type: 'category',
                        data: ['2019-3-4 15:19:20', '2019-3-4 15:20:20', '2019-3-4 15:21:20', '2019-3-4 15:22:20', '2019-3-4 15:23:20', '2019-3-4 15:24:20', '2019-3-4 15:25:20'],
                        axisLabel: {
                            rotate: 30,
                            interval: 0
                        },
                    },
                    yAxis: {},
                    series: [{
                        name: '5分钟平均负载(近一小时)',
                        type: 'line',
                        data: [16.7, 18.9, 15.4, 17.3, 13.6, 11.4, 14.9]
                    },
                        {
                            name: '10分钟平均负载(近一小时)',
                            type: 'bar',
                            data: [17.3, 14.9, 15.4, 13.6, 16.7, 11.4, 18.9]
                        }
                    ]
                },
            }
        },
        methods: {
            initChart() {
                var myLine = this.$echarts.init(document.getElementById('myLine'));
                myLine.setOption(this.myLine_option);
            },
        },
        mounted() {
            this.initChart()
        }
    }
</script>
<style>
</style>