vue + echarts

1.安裝echarts依賴

npm install echarts -S

或者使用國內的淘寶映象：

安裝

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用

cnpm install echarts -S

 

2.建立圖表

全域性引入

main.js

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

Hello.vue

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

 

3.mounted 中呼叫 （mounted 是 vue 的生命週期，表示掛載完畢，html 已經渲染）

mounted(){
    this.$nextTick(function() {
        this.drawPie('myChart')
    })
}

 

4.元件

<template>
  	<!--為echarts準備一個具備大小的容器dom-->
  	<div id="myChart" style="width:300px;height:300px;"></div>
</template>

<script>
    export default {
        name: '',
        data () {
            return {
                charts: '',
                opinion:['直接訪問','郵件營銷','聯盟廣告','視訊廣告','搜尋引擎'],
                opinionData:[
                  	{value:335, name:'直接訪問'},
                  	{value:310, name:'郵件營銷'},
                  	{value:234, name:'聯盟廣告'},
                  	{value:135, name:'視訊廣告'},
                  	{value:1548, name:'搜尋引擎'}
                ]
            }
        },
        methods:{
            drawPie(id){
               	this.charts = $echarts.init(document.getElementById(id));
               	this.charts.setOption({
                 	tooltip: {
                   		trigger: 'item',
                   		formatter: '{a}<br/>{b}:{c} ({d}%)'
                 	},
                 	legend: {
                   		orient: 'vertical',
                   		x: 'left',
                   		data:this.opinion
                 	},
                 	series: [
                   		{
                     		name:'訪問來源',
                     		type:'pie',
                     		radius:['50%','70%'],
                     		avoidLabelOverlap: false,
                     		label: {
                       			normal: {
                         			show: false,
                         			position: 'center'
                       			},
                       			emphasis: {
                         			show: true,
                         			textStyle: {
                           				fontSize: '30',
                           				fontWeight: 'blod'
                         			}
                       			}
                     		},
                     		labelLine: {
                       			normal: {
                         			show: false
                       			}
                     		},
                     		data:this.opinionData
                   		}
                   	]
               	})
            }
        },
      	//呼叫
        mounted(){
            this.$nextTick(function() {
                this.drawPie('myChart')
            })
        }
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
</style>

 

5.效果圖

 

6.監聽扇形區域點選事件