vue图表组件使用，组件文档echarts

vue图表组件使用，组件文档echarts

http://echarts.baidu.com/echarts2/doc/example.html

vue组件手动封装barChart.vue

<template>
<div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from 'echarts';
require('echarts/theme/macarons')
export default {
props: {
className: {
type: String,
default: 'chart'
            },
id: {
type: String,
default: 'chart'
            },
width: {
type: String,
default: '200px'
            },
height: {
type: String,
default: '200px'
            }
        },
data() {
return {
chart: null
            };
        },
mounted() {
/*this.initChart();*/
this.chart = null;
        },
methods: {
initChart(monthdata, seriesVoList, yeardata) {
this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption( {
title: {
text: '2010-2013年中国城镇居民家庭人均消费构成（元）',
subtext: '数据来自国家统计局',
sublink: 'http://data.stats.gov.cn/search/keywordlist2?keyword=%E5%9F%8E%E9%95%87%E5%B1%85%E6%B0%91%E6%B6%88%E8%B4%B9'
    },
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.7)',
axisPointer: {
type: 'shadow'
        },

    },
legend: {
x: 'right',
data:['2010','2011','2012','2013']
    },
toolbox: {
show: true,
orient: 'vertical',
y: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
        }
    },
calculable: true,
grid: {
y: 80,
y2: 40,
x2: 40
    },
xAxis: [
        {
type: 'category',
data: ['食品', '衣着', '居住', '家庭设备及用品', '医疗保健', '交通和通信', '文教娱乐服务', '其他']
        }
    ],
yAxis: [
        {
type: 'value'
        }
    ],
series: [
        {
name: '2010',
type: 'bar',
data: [4804.7,1444.3,1332.1,908,871.8,1983.7,1627.6,499.2]
        },
        {
name: '2011',
type: 'bar',
data: [5506.3,1674.7,1405,1023.2,969,2149.7,1851.7,581.3]
        },
        {
name: '2012',
type: 'bar',
data: [6040.9,1823.4,1484.3,1116.1,1063.7,2455.5,2033.5,657.1]
        },
        {
name: '2013',
type: 'bar',
data: [6311.9,1902,1745.1,1215.1,1118.3,2736.9,2294,699.4]
        }
    ]})
            }
        }
    }
</script>

vue页面引用组件，及调用方式：

this.$refs.onclick.initChart(monthdata,seriesVoList,yeardata);

<template>
<div class="components-container" style='height:100vh'>

<div class='chart-container'>
<chart ref="onclick" height='100%' width='100%'></chart>
</div>

</div>

</template><script> import Chart from 'components/Charts/barChart'; export default { components: { Chart },

methods: {

getstoreStatistics() {
    this.dialogauditorFormVisible = true;
    this.statisticsQuery.productId = this.productobj.productId;
    this.statisticsQuery.collectinCode = this.productobj.downSuperiorCode;
    this.statisticsQuery.year = (new Date().toISOString().slice(0,4));
    storeStatistics(this.statisticsQuery).then(response => {
        if (response.data != null && response.data.status == 0) {
            /*console.log(response);*/
            let monthdata = response.data.data.monthdata;
            let seriesVoList = response.data.data.seriesVoList;
            let yeardata = response.data.data.yeardata;
            this.$refs.onclick.initChart(monthdata,seriesVoList,yeardata);
        }
        else {
            this.$message({
                message: '获取信息失败'
            });
        }
    });
},

}

</script>

<style scoped>
.chart-container{
position: relative;
width: 100%;
height: 90%;
padding-bottom: 40px;
}
</style>