echarts柱状图

最近做到了统计，用到了echart，做了一个简单的例子

先来看最终的效果图

option:{
          title : {
            text: '送检按时完成率',
            subtext: '数据来自xxxx有限公司',
            x: 'center',
            align: 'right'
          },//标题
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu',]
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000000',
                fontSize: '100%',
              },
              interval: 0,
              showMinLabel: true,
              formatter: '{value} %'
            },//让纵坐标按百分比显示
          },
          series: [{
            data: [100, 20, 15, 80,],
            type: 'bar',
            itemStyle:{
              normal:{
                color:'#00a0e9'
              }
            },//柱形颜色
            barWidth:70,//柱形宽度
          }],
          tooltip: {
            trigger: 'item',
            formatter:'{c}%'//柱状图 百分比显示
           },
        },

1.首先是标题的展示：title中的align是文字对齐方式。

2.柱状图纵坐标按百分比显示：用到了yAxis里的axisLabel，具体代码如上。

3.柱形颜色和柱形宽度：分别是series里的itemStyle和barWidth（宽度为数字）。

4.当鼠标滑过每个柱形时的具体数据也按百分比显示：用到的是tooltip里的formatter，具体写法如上所示。