vue使用折线图插件 echarts

第一步：charts的下载并引用

npm install echarts --save

注意 :这样下载的版本是最新版本 5.0.0以上的。（后面的引入方式和5.0.0之前版本不太一样）

第二步：在main.js 里面引入

// 引入
import * as echarts from 'echarts';
// 挂载
Vue.prototype.$echarts = echarts

第三步：简单案例，单根折线

<template>
    <!-- 图表 -->
    <div class="vol-data">
      <div class="charts" style="width:'100%',height:'6.54rem'">
        <div class="charts-title">
          24小时内最高：99.99
        </div>
        <div id="myChart" :style="{width:'100%',height:'300px'}">
        </div>
      </div>
    </div>
<template>
<script>
export default {
  data () {
    return {
    }
  },
  mounted () {
    /*初始化ECharts图表，绑定到id=myChart的div上面*/
    var myChart = this.$echarts.init(document.getElementById('myChart'));
    myChart.setOption({
      xAxis: {
       type: 'category',
       data: ['0', '6H', '9H', '12H', '15H', '18H', '24H']
       },
       yAxis: {
           type: 'value'
       },
       series: [{
           data: [1, 3, 4, 7, 4, 6, 9],
           type: 'line'
      }],
      经过显示数据，option中添加tooltip对象
	  tooltip: {
	    trigger: 'axis'
	  }
    })
  }
}  
</script>

效果图：

echarts官网：https://echarts.apache.org/zh/index.html