Vue中引入echarts。

1、安裝

• 在終端vue項目的檔案夾下運作​

  ​npm install echarts --save​

  ​安裝依賴
• 可以使用​

  ​npm install echarts@(“這裡可以寫版本号”)​

  ​ --save安裝指定版本。

提示我之前使用的第一種方式安裝、結果出現了錯誤、弄了我老半天。最終解決的方法是：通過将之前下載下傳的版本解除安裝掉、然後安裝對應的版本

2、在main.js檔案中引入

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

3、測試

<style scoped>
  #sector{
    width: 100%;
    height: 300px;
    margin: 0 auto;
  }
</style>
<template>
  <div id="sector">
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name:'sector',
    data() {
      return {
        option:{
          title: {
            text: '某站點使用者通路來源',
            top:'5%',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            top:'15%',
            data: ['直接通路', '郵件營銷', '聯盟廣告', '視訊廣告', '搜尋引擎']
          },
          series: [
            {
              name: '通路來源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                {value: 335, name: '直接通路'},
                {value: 310, name: '郵件營銷'},
                {value: 234, name: '聯盟廣告'},
                {value: 135, name: '視訊廣告'},
                {value: 1548, name: '搜尋引擎'}
              ],
              itemStyle:{
                normal:{
                  label:{
                    show: true,
                    formatter: '{b} : {c}'
                  },
                  labelLine :{show:true}
                }
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                }
              }
            }
          ]
        }

      }
    },
    mounted() {
      let this_ = this;
      let chart = echarts.init(document.getElementById('sector'));
      chart.setOption(this.option);
      //建議加上以下這一行代碼，不加的效果圖如下（當浏覽器視窗縮小的時候）。超過了div的界限（紅色邊框）
      window.addEventListener('resize',function() {chart.resize()});
    },
    methods: {},
    watch: {},
    created() {
    }
  }
</script>