扇形图

饼状图实战

介绍饼状图相关内容,数据收集,整理数据,编写饼状图的例子

02-01侠课岛    初级拔高       

前端/前端/Vue + ECharts实战 19     0     263

饼状图实战

柱状图主要用于表现不同类目的数据在总和中的占比。每个弧度表示数据数量的占比。

根据前面篇章的步骤,可以先把组件文件以及路由先配置好,我这边就直接贴代码了,具体情况可以看注释:

<template>
  <div>
    <h2>饼状图</h2>
    <div id='pie'></div>
  </div>
</template>
<script>
// 引入 ECharts 模块
let echarts = require("echarts/lib/echarts")
// 引入扇形图
require("echarts/lib/chart/pie")
// 引入提示框和标题组件
require("echarts/lib/component/tooltip")
require("echarts/lib/component/title")

export default {
  name: "Pie",
  data() {
    return {
      pieCharts: {}
    };
  },
  mounted() {
    this.drawPie()
  },
  methods: {
    drawPie() {
      let options = {
        title: {
          text: "2017年我国入境游客" // 标题组件,设置图表标题
        },
        series: [  // 系列列表 ,里面每个对象通过 type 决定自己额图表类型
          {
            name: "2017年我国入境游客", // 系列名称
            type: "pie", // 通过设置这个值来控制图表是扇形图
            radius: ["0%", "55%"],  // 饼图的半径,数组的第一项是内半径,第二项是外半径
            data: [  // 系列中的数据内容数组
              { value: 1830, name: "非洲" },
              { value: 230, name: "朝鲜" },
              { value: 756, name: "印度" },
              { value: 230, name: "日本" },
              { value: 124.5, name: "马利西亚", selected: true }
            ]
          }
        ]
      };

      this.pieCharts = echarts.init(document.getElementById("pie"))  // 初始化图表实例
      this.pieCharts.setOption(options)  // 设置图表配置项
    }
  }
};
</script>
<style>
#pie {
  width: 600px;
  height: 400px;
}
</style>

avatar

在路由上打开这个组件,已经可以暂时一个完整的扇形图,和前一篇创建柱状图的代码进行一个对比,发现其实就是 options 配置项不一样即可完成不同图表的切换,这里展开说明下:

上一篇使用的设置图表数据源的主要配置项是

// ...
dataset: {
  source: [{
    "product": "非洲",
    "2015年": 1700.5,
    "2016年": 1803.7,
    "2017年": 1830
  },]
},
series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }]

//...

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

19

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?