vue項目單頁面引入echarts步驟

第一步   npm安裝echarts

npm install echarts --save

第二步  在需要使用的頁面引入  import * as echarts from 'echarts'

<script>
import * as echarts from 'echarts';
export default {....}
</script>

第三步 在需要使用的頁面寫出一個dom節點

<template>
  <div class="home_container">
    <div id="main" :style="{width: '100%', height: '100%'}"></div>
  </div>
</template>

第四步 在methods方法里寫一個創建echarts圖表的函數  然后在mounted里面調用

 RenderEcharts() {
      var myChart = echarts.init(document.getElementById('main')); //取dom 渲染圖表
      window.onresize = function () {
        myChart.resize();  //自動響應圖表和容器大小
      };
      // 繪制圖表
      myChart.setOption({
        // title: { text: '在Vue中使用Echarts柱狀圖' }, //標題
        tooltip: {},
        xAxis: {
          type: 'category',
          data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子", "顆粒"]  //每個柱子對應的標題
        },
        yAxis: {
          type: 'value'  
        },
        series: [  //繪制柱子的數組
          // 柱子一
          {
            name: '銷量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 40, 20],  //每個柱子的數值 和標題相對應
            showBackground: true,  //是否開啟柱狀圖的背景顏色
            backgroundStyle: {
              color: 'rgba(205, 64, 50,.4)'
            },
            itemStyle: {
              opacity: 0.6,//改變柱條的透明度
              color: '#000', //改變柱條的顏色
              barBorderRadius: 20, //改變柱條的圓角
            }
          },
          // 柱子二
          {
            type: 'bar',
            data: [12, 14, 9, 9, 11, 66, 22],
            showBackground: true,  //開啟柱狀圖的背景顏色
            backgroundStyle: {
              color: 'rgba(205, 64, 50,.8)'
            },
            itemStyle: {
              opacity: 0.6,//改變柱條的透明度
              color: '#eee', //改變柱條的顏色
              barBorderRadius: 20, //改變柱條的圓角
            }
          }

        ],
      });
    }

最后效果就是這樣