vue中使用echarts畫餅狀圖

echarts的中文文檔地址：https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

采用按需引入的方式

安裝echarts包就不說了，上一篇有代碼

今天來看看如何畫餅狀圖

<template>
  <div>
    <div class="pie">
        <div id="pie1">
            <!-- 為 ECharts 准備一個具備大小（寬高）的 DOM -->
            <div id="main1" style="float:left;width:100%;height: 300px"></div>
        </div>
        <div id="pie2">
            <div id="main2" style="float:left;width:100%;height: 300px"></div>
        </div>
    </div>
  </div>
</template>

<script>// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入餅狀圖組件
require('echarts/lib/chart/pie')
// 引入提示框和title組件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')


export default {
  created(){
  },
  mounted(){
    this.initData();
  },
  methods:{
    //初始化數據
    initData() {
      // 基於准備好的dom，初始化echarts實例
      var myChart = echarts.init(document.getElementById('main1'));
      // 繪制圖表
      myChart.setOption({
          title : {
              text: '某站點用戶訪問來源',//主標題
              subtext: '純屬虛構',//副標題
              x:'center',//x軸方向對齊方式
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              bottom: 'bottom',
              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: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      });
    },
  }
}
</script>

效果圖

 

具體設置請參考 官網