实现一个 Echarts 图表中饼状图的指示线条, 更加直观明确地看到统计效果.
写一个完整的 demo:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 五分钟上手之饼状
- </title>
- <!-- 引入 echarts.js -->
- <script src="https://cdn.bootCSS.com/echarts/4.2.1-rc1/echarts.min.js"
- type="text/javascript">
- </script>
- <script src="http://code.jquery.com/jquery-1.8.0.min.js">
- </script>
- </head>
- <body>
- <!-- 为 ECharts 准备一个具备大小 (宽高) 的 Dom -->
- <div id="main" style="width: 300px;height:300px;">
- </div>
- <script type="text/javascript">
- // 基于准备好的 dom, 初始化 echarts 实例
- var myChart = echarts.init(document.getElementById('main'));
- // 指定图表的配置项和数据
- myChart.setOption({
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b}: {c} ({d}%)"
- },
- legend: {
- orient: 'vertical',
- x: 'right',
- y: 'bottom',
- data: ['在线', '离线']
- },
- series: [{
- name: '访问来源',
- type: 'pie',
- radius: ['50%', '70%'],
- avoidLabelOverlap: false,
- data: [{
- value: 12,
- name: '在线',
- itemStyle: {
- color: '#005eff'
- }
- },
- {
- value: 3,
- name: '离线',
- itemStyle: {
- color: '#ff9194'
- }
- },
- ]
- }]
- });
- </script>
- </body>
- </HTML>
效果如下所示:
来源: http://www.jianshu.com/p/4fd79cf0a590