对e-charts进行二次封装的简单柱形统计图

对e-charts进行二次封装的简单柱形统计图

写博客是为了做笔记

初次使用e-charts时,很多朋友会对很多参数有很大的困扰,特别是对于小白来说,不明白什么参数是干什么的,我在这里封装了一个简单的e-charts柱形统计图,希望大家多多指教!

• 所需工具:vue

第一步:npm install echarts --save 下载e-charts
第二步:在所需组件中引入 import echarts from "echarts";
第三步:

template中:

  <CardBlank :style="{margin: '12px'}">
        <div id="tour" class="echarts"></div>
      </CardBlank>

       <CardBlank :style="{margin: '12px'}">
        <div id="attrea" class="echarts"></div>
      </CardBlank>

       <CardBlank :style="{margin: '12px'}">
        <div id="attlks" class="echarts"></div>
      </CardBlank>

      <CardBlank :style="{margin: '12px'}">
        <div id="attgm" class="echarts"></div>
      </CardBlank>

script中:
这里第一个参数target是目标id,第二个参数就是有很多参数进行图表设置的option(用我们接下来封装的方法获取)

    	//初始化e-charts
        setTable(target,option){           
            target= echarts.init(document.getElementById(target));
            target.setOption(option);
        },   

这里第一个参数是图表名字,第二个参数是x轴坐标数据,第三个参数是x轴坐标数据对应的数值,第四个参数是柱形图的颜色

	 //横向柱状图options封装
        normalOption(title,datax,datay,color){  
            return{                
                title: {
                    text: title
                },
                tooltip: {},
                legend: {},
                xAxis: {
                    axisLabel:{
                        interval:0,
                        formatter: function (value) {
                            //x轴的文字改为竖版显示
                            var str = value.split("");
                            return str.join("\n");
                        }
                    },
                    data:datax
                },
                yAxis: {},
                series: [{                
                    type: 'bar',
                    color:color,
                    data:datay
                    }]
                } 
        },

然后在data中声明:

 data() {
        return {  
            datax:['事件1','事件2','事件3','事件4','事件5'],
            datay:[3,5,6,3,9],
            }

然后使用的时候在mounted里:

   mounted() {  
        this.setTable('event',this.normalOption('我是title',this.datax,this.datay,'#e4393c'))  
    },

效果就是:
当有很多相同的表格时,直接调用setTable方法,传入对应的参数就可以了,避免重复编写代码.或者当有很多重复的其他表的格式的时候,也可以只对normalOption方法进行改变,然后进行类似的封装.

<注:这是本人的第一篇博客,很简单的东西,写的不好请各位大神多多指教>