Echarts饼图之数据展示

Echarts饼图之数据展示

1、组件简介

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

官网链接：Echarts官网
W3C教程：W3C–Echarts教程

2、前端代码实现

首先，下载库，并引入到项目文件；

话不多说，直接上代码。

/* 封装的组件 HTML代码
<div class="echart-wrap-box">
    <div class="echart-content"></div>
</div>
*/
let echarts = require("echarts/echarts.min");

defaults: {
   
   option: {
   
       echartsObj: {
   },
       tooltip: {
   //提示框浮层内容。
           trigger: 'item',//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
           formatter: "{b} : {c}万人"//提示框浮层内容格式器,{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
       },
       //如果系列没有设置颜色，则会依次循环从默认列表中取颜色作为系列颜色。
       color: ["#369DFD", "#32C8CA", "#49C872", "#F6CE36", "#EE607A", "#935CE3", "#3436C7", "#3E4D86"],
       legend: {
   //图例组件。
           orient: 'vertical',//图例列表的布局朝向:垂直的
           x: '80%',//图例组件离容器左侧的距离。
           y: '60%',//图例组件离容器上侧的距离。
           // width: 100,
           textStyle: {
   },//图例文字的样式
           // left: 'right',//图例组件离容器左侧的距离。
           top: 'center',//图例组件离容器上侧的距离。
           data: [],//右侧图例小组件信息数据
       },
       series: [{
   //饼图信息
           name: '',
           type: 'pie',//饼状图
           radius: 140,//饼图的半径。
           center: ['50%', '50%'],