Echarts2 柱状图

1.编写html文件:






Insert title here


//必须设置div的宽高,否则无图




2.封装柱状图生成函数getBar():

/**
 * 定义双柱状图生成函数
 * params:domId,标题名,柱形描述,Y轴数组,变量数组
 */
function getBar(domId,titleName,legendDescr,yAxisData,seriesData){
//初始化Dom
var myChart = echarts.init(document.getElementById(domId));
/*//加载时显示语句
myChart.showLoading({
   text: '分析数据中...',    //loading话术
});*/

//设置图表信息
option = {
   title : {
       text: titleName,//String
   },
   legend: {
       data:legendDescr//Array
   },
   toolbox: {
       show : false,
       feature : {
           mark : {show: true},
           dataView : {show: true, readOnly: false},
           magicType: {show: true, type: ['line', 'bar']},
           restore : {show: true},
           saveAsImage : {show: true}
       }
   },
   calculable : false,
   xAxis : [
       {
           type : 'value',
           boundaryGap : [0, 0.01]
       }
   ],
   yAxis : [
       {
           type : 'category',
           data : yAxisData//Array
       }
   ],
   series : [
       {
           name:legendDescr[0],
           type:'bar',
           data:seriesData[0],//Array
          color:'#4DB38A',

//设置柱宽
          //barWidth:20
       },
       {
           name:legendDescr[1],
           type:'bar',
           data:seriesData[1],
          color:'#F70909',
          //barWidth:20
       }
   ]
};
myChart.setOption(option);                    
}


Echarts2 柱状图_第1张图片

你可能感兴趣的:(编程,echart)