echarts

柱状图

首先写有个div为图标构建一个框架

<div id="main" style="width:100%;height:400px;"></div>

<script>
var mychart=echarts.init(document.getElementById('main'));
//基于准备好的dom初始化echarts实例
var option={
      title:{ 
            text:'目标完成率', 
            x:'center'
      },
      tooltip:{
            show:true   //移动到每个柱形图上显示名称
      },
      lengend:{ 
            data:['完成率'],   //单一柱状图名称
            x:'left'
      },
      xAxis:{
            type:'category',
           data:['长春市','四平市','吉林市','辽源市','通化市','白山市'], 
                         //x轴类名
           axisLabel:{rotate:45}  //x轴文本旋转角度
      },
      yAxis:{
          axisLable:{
               formatter:'{value}%'
          }
      },
      series:[
          {
          name:'2015',
          type:'bar',
          barWidth:60,   //柱宽度
          data:[98,86,82,93,73,86]
          }
      ],
      toolbox:{   //保存图片功能
          show:true,
          orient:'vertical',
          x:'right',    //默认   left左
          y:'top',      //默认    botton下
          feature:{
                saveAsImage:{
                     show:true,
                     title:'保存为图片',
                     type:'png',
                     lang:['点击本地保存']
                }
          }
      }
}；
 mychart.setOption(option);
 //使用刚才配置型和数据显示图标
 window.onresize = mychart.resize;
 //自适应
</script>