安裝外掛

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'
      }]
     })
  },
  
};
 

效果圖: