首页

接着上一集，继续来定制我们的 Echarts 。

label 给柱子加标签

重点是如何显示百分号。虽然 25% 也是个数字，但是一般 Echarts 这里，我们会填写的数值就是 25 ，然后%是作为辅助符号添加上去的。参考这里的写法： http://gallery.echartsjs.com/editor.html?c=xBJgbX8mFg

具体的做法就是用 formatter 的方式。我们这里代码如下：

label: {
  normal: {
    show: true,
    formatter:'{c}%'
  }
}

柱子颜色和整体背景色

后续工作就都是小格式的调整了。先来加背景色：

backgroundColor: '#2196f3',

然后设置，柱子宽度圆角和颜色，以及柱子 label 的颜色：

series: [
  {
    type: 'bar',
    barWidth: 30,
    itemStyle: {
      normal: {
        color: 'rgba(0,0,0,0.15)'
      }
    }
  },
  {
    type: 'bar',
    barWidth: 30,
    itemStyle: {
      normal: {
        barBorderRadius: 5,
        color: 'white'
      }
    }
  }
]

给 Y 轴的标注改文字样式

yAxis: {
  axisLine: {show: false},
  axisTick: {show: false},
  axisLabel: {
    show: true,
    textStyle: {
      color: 'white'
    }
  },
  data: ["HTML","CSS","JS","React"]
},

添加整图的标题 title

这里 textStyle 又出现了

title : {
   text: '我的手艺成熟度',
   textStyle: {
     color: 'white'
   },
   x: 'center'
}

最终代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 500px;height:300px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    option = {
      backgroundColor: '#2196f3',
      title : {
        text: '我的手艺成熟度',
        textStyle: {
         color: 'white'
        },
        x: 'center'
      },
      yAxis: {
        axisLine: {show: false},
        axisTick: {show: false},
        data: ["React","CSS","HTML","JS"],
        axisLabel: {
          show: true,
          textStyle: {
            color: 'white'
        }
      },
      },
      xAxis: {
        axisLine: {show: false},
        axisTick: {show: false},
        splitLine: { show: false },
        axisLabel: { show: false }
      },
      series: [
        {
          type: 'bar',
          barWidth: 30,
          data: [100, 100, 100, 100],
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0.15)'
            }
          }
        },
        {
          type: 'bar',
          barWidth: 30,
          data: [50, 80, 76, 70],
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: 'white'
            }
          },
          barGap: '-100%',
          label: {
            normal: {
              show: true,
              formatter: '{c}%',
              textStyle: {
                color: '#2196f3'
              }
            }
          }
        }
      ]
  };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>