Vue 使用图表插件 -- Echarts 源码+效果图展示

安装插件

npm install echarts -save

使用npm 安装 Echarts，安装成功后，可在项目package.json 文件中查看到

全局引入
main.js中配置

import echarts from 'echarts'; //引入echarts
Vue.prototype.$echarts = echarts; //引入组件

功能实现代码如下:

<template >
  <div>
    <!-- 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>
  </div>
</template>
<script>


import echarts from 'echarts'
// var echarts = require('echarts');

// // 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
export default {
  name: "creditcard",
  data() {
    return {
    
    };
  },
  
  methods: {
    },
  mounted() {
    var myChart = echarts.init(document.getElementById('myChart'));
    myChart.setOption({
      xAxis: {
       type: 'category',
       data: ['0', '6H', '9H', '12H', '15H', '18H', '24H']
       },
       yAxis: {
           type: 'value'
       },
       series: [{
           data: [9, 15, 18, 23, 16, 10, 5],
           type: 'line'
      }]
     })
  },
  
};

效果图: