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

vue图表组件使用，组件文档echartshttp://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>