vue2.0引用Echart3.0

1、需求

　　一、因爲咱們項目中有個頁面，須要統計分析的功能

　　二、因此纔想到vue中引用echart組件（備註：咱們是利用vue-cli腳手架，初始化vue項目）

2、如何實現這個需求

　　一、引入Echart包，經過如下命令安裝Echarts

　　二、寫一個環形圖的子組件

　　該組件比較全的代碼以下：

<template>
    <div :id="this.id" :style="{ height: height + 'px', width: width + '%'}"></div>
</template>
<script>
    var echarts = require('echarts/lib/echarts') // 引入柱狀圖
 require('echarts/lib/chart/pie') // 引入提示框和標題組件
 require('echarts/lib/component/tooltip') require('echarts/lib/component/title') require('echarts/lib/component/legend') export default { name: 'VChartPie', props: { height: { type: Number, default: 400 }, width: { type: Number, default: 100 }, // 圖表形狀顏色, ecahrts依次選擇顏色渲染
 color: { type: Array, default: function () { return [] } }, // 縱座標數據
 seriesData: { type: Array, default: function () { return [] } }, title:{ type: String, default:function (){ return '' } }, orient:{ type: String, default:function (){ return 'vertical' } }, legendTop: { type: Number, default: 40 }, legendRight: { type: Number, default: 4 }, itemGap: { type: Number, default: 8 }, radius:{ type: Array, default: function () { return [] } }, center:{ type: Array, default: function () { return [] } } }, data() { return { } }, computed: { // 生成一個隨機id, 實現圖表組件的複用
 id: function () { return parseInt(Math.random() * 1000000) }, legendData: function () { let legendData = [] this.seriesData.forEach(function (elem) { legendData.push(elem.name) }) return legendData } }, methods: { renderPieChart: function () { if (this.chart) { this.chart.dispose() } // 初始化echart
                this.chart = echarts.init(document.getElementById(this.id)) // 自定義eChart樣式 官方配置指南(http://echarts.baidu.com/option.html#yAxis.splitLine.lineStyle.color)
                this.chart.setOption({ title:{ text:this.title, textStyle: { fontSize:16, fontWeight:100, }, }, legend: { icon: 'stack', data: this.legendData, itemGap: this.itemGap, itemWidth: 12, itemHeight: 12, top: this.legendTop, right:this.legendRight, orient: this.orient, }, grid: { left: 0, right: 20 }, color: this.color, tooltip: {}, series: { type: 'pie', radius: this.radius, data: this.seriesData, labelLine: { normal: { show: false } }, label: { normal: { show: false, } }, center: this.center, } }) } }, watch: { seriesData(){ this.renderPieChart() } }, mounted() { this.renderPieChart() } } </script>

　　三、在父組件中引用子組件

　　該父組件中比較全的代碼以下：

<template>
        <el-row>
            <el-col :span="8">
                <div class="grid-content bg-purple maintainInfo">
                      <!-- 及時性 -->
                      <div class="ridingQualityEchart">
                           <vChartPie :seriesData="timeliness.series" :color="timeliness.color" class="areaBar" :height = "maintainHeight":title="timeliness.title" :orient ="timeliness.orient" :legendTop="timeliness.legendTop" :legendRight="timeliness.legendRight":radius="timeliness.radius":center="timeliness.center" :itemGap="timeliness.itemGap"style="margin-left:20px;padding-top:10px"></vChartPie>
                      </div>
                 </div>
             </el-col>
        </el-row>
</template>
<script> import vChartPie from './pieChart.vue' export default { data() { return { timeliness:{ title:'及時性：', radius: ['35%', '55%'], center:['34%','51%'], orient:'vertical', legendTop:200, legendRight:105, itemGap:35, series: [ {value:335, name:'及時'}, {value:100, name:'不及時'} ], color:['#289df5', '#fbc01b'], } } }, components:{ vChartPie }, created(){ this.getMaintainData(); }, methods:{ getMaintainData(){ 　let self = this; 　self.$axios.post('你的接口'+'&startTime='+ self.startDate.getTime()+'&endTime='+ self.endDate.getTime()).then((res) => { 　let onTime = res.data.data.onTime; 　self.timeliness.series = []; 　onTime.forEach(function(item){ 　self.timeliness.series.push(item); 　}) 　}); 　} } } </script>

運行後的效果以下：