vue使用echarts-折线图

vue使用echarts

charts的下载并引用

npm install echarts -S

全局引用

main.js
// 引入
import echarts from 'echarts'
// 挂载
Vue.prototype.$echarts = echarts

简单案例
单根折线：

<template>
  <div id="myChart" class="chart" :style="{width: '100%', height: '500px'}"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'xwPassengerFlow',
  data () {
    return {}
  },
  mounted () {
    this.loadLine()
  },
  methods: {
    loadLine () {
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          name: 'line1',
          type: 'line'
        }]
      }

      this.myChartOne = echarts.init(document.getElementById('myChart'))
      this.myChartOne.setOption(option)
    }
  }
}
</script>

图例

显示线名，及经过显示数据

经过显示数据，option中添加tooltip对象
tooltip: {
    trigger: 'axis'
 },
 // 显示折线名称
 legend: {
    data: ['line1']
  },

图例：

在折线图中显示多条折线图

const option = {
        legend: {
          data: ['line1', 'line2']
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          name: 'line1',
          type: 'line'
        }, {
          data: [110, 130, 140, 150, 200, 230, 280],
          name: 'line2',
          type: 'line'
        }]
      }

图例

堆叠折线图：
将各条折线图的数据叠加起来，后折线的数据是前面的数据的叠加

// 添加stack属性，可以看到在图中，后面的数据是前面的数据的和加本身数据
const option = {
        legend: {
          data: ['line1', 'line2', 'line3']
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          name: 'line1',
          stack: '总量',
          type: 'line'
        }, {
          data: [110, 130, 140, 150, 200, 230, 280],
          name: 'line2',
          stack: '总量',
          type: 'line'
        }, {
          data: [220, 240, 260, 290, 310, 330, 350],
          name: 'line3',
          stack: '总量',
          type: 'line'
        }]
      }