1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 |
- (function () {
- Vue.component('bar-chart', {
- template: '<div class="chart_box" >\
- <div :id="chartid" class="chart_box"></div>\
- </div>',
- props: ['config'],
- data: function () {
- return {
- chartid: _.uniqueId("chart_"),
- chart: null,
- }
- },
- mounted: function () {
- var that =this;
- this.$nextTick(function () {
- that.chart = echarts.init(document.getElementById(that.chartid));
- if (that.config) {
- that.chart.setOption(that.setOption( that.config));
- }
- })
- },
- methods: {
- setOption: function (options) {
- var vm = this;
- if(!options)return
- var options = $.extend({}, defaults, options);
- vm.chart.on('click', function (param){
- vm.$emit('click-item', {param:param});
- });
-
- return options
- }
- },
- watch: {
- config: function (data) {
- if (data) {
- this.chart.setOption(this.setOption(data));
- }
- }
- }
- })
- var defaults = {
- }
- })()
|