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>

 

来源：https://www.cnblogs.com/SunShineM/p/9006840.html