vue使用echarts

1.安裝echarts

npm install echarts -S

2.在main.js中引用echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.封裝chart組件

在components中新建chart.vue

<template>
    <div class="chart">
        <div class="chart" :id="id" :option="option"></div>
    </div>
</template>

<script>
    export default {
        props: {
            id: {
                type: String
            },
            option: {
                type: Object
            }
        },
        mounted () {
            this.$echarts.init(document.getElementById(this.id)).setOption(this.option)  
        }
    }
</script>

<style scoped>

</style>

4.其他組件調用圖表組件

<template>
  <div class="hello">
    <Chart :id="id" :option="pieOption"></Chart>
  </div>
</template>

<script>
import Chart from './Chart'
export default {
  name: 'HelloWorld',
  components: {
    Chart
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      id: 'pie',
      pieOption: {
          tooltip : {  
                    trigger: 'item',  
                    formatter: "{a} <br/>{b} : {c} "  
                },  
          calculable : false,  
          series : [  
            {  
                name: '',  
                type: 'pie',  
                radius: '45%', //餅圖的半徑大小  
                center: ['40%', '60%'], //餅圖的位置  
                label: {show:true},
                labelLine: {show: true, length: 0},    
                data:[
                    {
                        value: 20, name: '余'
                    },
                    {
                        value: 20, name: '已開'
                    },
                ]
            }  
          ] 
      }
    }
  }
  }
}
</script>

 5.動態獲取數據展示到圖表中

在圖表組件中加監聽，option改變就執行

watch: {
            //觀察option的變化
            option: {
                handler(newVal, oldVal) {
                    if (this.chart) {
                        if (newVal) {
                            this.chart.setOption(newVal);
                        } else {
                            this.chart.setOption(oldVal);
                        }
                    } else {
                        this.init();
                    }
                },
                deep: true //對象內部屬性的監聽，關鍵。
            }
        },

 

 

在頁面中引用

import Echarts from '@/components/publics/Echarts'
    import {lineChartFun} from '@/../static/js/package'
    export default {
        name: 'incomeIndex',
        data () {
            return {
                id: 'echartsOnlyLineJX',
                id2: 'echartsManyLineJX',
                option: {},
                option2: {}
            }
        },
        mounted () {
            this.getAjax()
        },
        components: {
            Echarts
        },
        methods: {
             href () {
                console.log('22')
                this.$router.go("/incomeTotal")
            },
            getAjax (){
                let xData = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
                let YDataJX =  [
                    {
                        name:'進項金額',
                        type:'line',
                        color:'#008DFF',
                        itemStyle: {normal: {
                            areaStyle: {type: 'default'}
                        }},
                        data:[120, 132, 101, 134, 90, 230, 210,220, 182, 191, 234, 290],
                    },
                    {
                        name:'進項稅額',
                        type:'line',
                        color:'rgba(0,189,177,1)',
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data:[220, 182, 191, 234, 290, 330, 310,120, 132, 101, 134, 90]
                    }
                ];
                let lendJX = ['進項金額','進項稅額'];
                let onlyLendJX = ['進項發票數量'];
                let onlyYDataJX = [
                    {
                        name:'進項發票數量',
                        type:'line',
                        smooth:true,
                        color:'#008DFF',
                        itemStyle: {normal: {areaStyle: {type: 'default',color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 

                            offset: 0,
                            color: 'rgba(0,193,255,0.53)'
                        },{
                            offset: 1,
                            color: 'rgba(0,141,255,0.30)'
                        }])
                    }}},
                        data:[12, 13, 10, 14, 20, 23, 21,22, 18, 19, 23, 29]
                    },
                ]
                this.option = lineChartFun(xData,onlyYDataJX,onlyLendJX);
                this.option2 = lineChartFun(xData,YDataJX,lendJX)
            }
        }
    }

 

生成option封裝成方法

//折線圖調用函數
export const lineChartFun = (xData,YData,lend) => {
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:lend,
            top:'5px'
        },
        grid:{
            left:'50px',
            right:'50px',
            top:'50px',
            bottom:'20px'
        },
        xAxis : [
            {
                type: 'category',
                boundaryGap: false,
                data:xData
            },
        ],
        yAxis : [
            {
                type : 'value'
            }
            
        ],
        series: YData
    }
    return option    
}

 

 

6.屏幕拖動時echarts自適應

methods: {
            init() {
                let _this = this;
                this.eComVisitChart = this.$echarts.init(document.getElementById(this.id));
                this.eComVisitChart.setOption(this.option);
                window.addEventListener('resize',function(){
                    _this.eComVisitChart.resize()
                })
            }
        },

 

 

 

完整的echarts組件

<template>
    <div class="chart">
        <div :id="id" :option="option"></div>
    </div>
</template>

<script>
    export default {
        // 驗證類型
        data () {
            return {
                eComVisitChart:null
            }
        },
        props: {
            id: {
                type: String
            },
            option: {
                type: Object
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                let _this = this;
                this.eComVisitChart = this.$echarts.init(document.getElementById(this.id));
                this.eComVisitChart.setOption(this.option);
                window.addEventListener('resize',function(){
                    _this.eComVisitChart.resize()
                })
            }
        },
        watch: {
            //觀察option的變化
            option: {
                handler(newVal, oldVal) {
                    if (this.chart) {
                        if (newVal) {
                            this.chart.setOption(newVal);
                        } else {
                            this.chart.setOption(oldVal);
                        }
                    } else {
                        this.init();
                    }
                },
                deep: true //對象內部屬性的監聽，關鍵。
            }
        },
        beforeDestroy () {
            if (this.eComVisitChart) {
                this.eComVisitChart.clear()
            }   
        }
    }
</script>

<style scoped>

</style>