Echarts 系列之复制粘贴大法

栏目: 数据库 · 发布时间: 5年前

内容简介:最近在耍 Echarts 稍微有点小经验,写(熬)篇文章记录一下下~话不多说,直接开始(开始复制粘贴) hhhhh~~开发中也有找类似的图表直接修改 附上链接官方链接 >社区-GALLERY

最近在耍 Echarts 稍微有点小经验,写(熬)篇文章记录一下下~

话不多说,直接开始(开始复制粘贴) hhhhh~~

开发中也有找类似的图表直接修改 附上链接官方链接 >社区-GALLERY

仓库地址 预览地址 文章地址

饼图

Doughnut Chart

链接

Echarts 系列之复制粘贴大法

官方给出了 demo 其实也还挺好看的,只是不适合直接放在业务里面(需要变变色,变色大小什么的)

让我们一步步改造他吧。

let json = {
  ...
   legend: {
     ...
    icon: "circle",  // legend icon形状 也可以自定义
  },
  series: [{
    name: "甜甜圈",
    type: "pie",
    radius: ["30%", "60%"], // 'radius' 扇区圆心角展现数据的百分比,半径展现数据的大小。
    center: ["50%", "50%"], // 饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
    color: ["#1976D2", "#2196F3", "#03A9F4"], // 颜色
    ...
  }]
}
复制代码

Echarts 系列之复制粘贴大法

是不是很简单!感觉都没什么好写的 23333(继续改,后面使用上面的 json)。

仓库地址

有时候会遇到这种空心圆中间放 icon 图片的时候 于是就有下图

Echarts 系列之复制粘贴大法

let json = {
  ...
    // graphic 是原生图形元素组件。可以支持的图形元素包括:
    // image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
   graphic: {
    type: "image",
    left: "center",  // 位置
    top: "center",   // 位置
    style: {
      image: "chartsGraphic.png",  // 路径
      width: 100,                  // 宽高
      height: 100
    }
  },
  ...
}
复制代码

文档地址

继续复制粘贴 emmmm

如果很多个标题,设计稿放在两边! (xiaochangmian)

Echarts 系列之复制粘贴大法

let json = {
  ...
  // 将legend 变成数组形式,左右各一个
    legend: [{
      x: "left",
      itemGap: 30,
      icon: "circle",
      data: []      // 里面存放名字
    },
    {
      x: "right",
      itemGap: 30,
      icon: "circle",
      data: []   // 里面存放名字
    }
  ],
  ...
}

// 我自己写了一个方法存进去,可供参考
// 传入数据和 json 配置
// 数字可以抽离出来,大家可以自行改造(或者取长度/2 需要算上单数情况)
function setChartsAreaLength(areaName, json) {
let arr1 = [],
arr2 = [];
areaName.map((item, index) => {
index < 8 ? (arr1 = [...arr1, item]) : (arr2 = [...arr2, item]);
});
json.legend[0].data = arr1;
json.legend[1].data = arr2;
}

复制代码

Referer of a website

于是继续搞

这个同第一个 改改颜色就好了 然后隐藏标线和文字

Echarts 系列之复制粘贴大法

let json = {
  ...
   series: [{
    data: [],
    label: {
      show: false // 是否显示标示文字
    },
    labelLine: {
      show: false // 是否显示视觉引导线
    }
  }]
  ...
};
复制代码

Nested Pies

嵌套饼图

Echarts 系列之复制粘贴大法

let json = {
  ...
  // 将legend 变成数组形式,左右各一个
    legend: [{
      data: ['白天', '晚上']
    },
    {
      data: ['上班', '游戏', '休息']
    }
  ],
   series: [{
      radius: [0, '36%'],    // 饼图大小  内饼图 从0-36%
      data: [{
          value: 12,
          name: '白天',
        },
        {
          value: 12,
          name: '晚上'
        }
      ]
    },
    {
      name: '分类',
      type: 'pie',
      radius: ['44%', '72%'],  // 饼图大小  内饼图 从44%-75%
      data: [{
          value: 335,
          name: '上班'
        },
        {
          value: 310,
          name: '游戏'
        }, {
          value: 300,
          name: '休息'
        }
      ]
    }
  ]
  ...
}
复制代码

大家也可以自行发挥,我看社区里面的大佬发的饼图非常强大也很好看,开发中都可以直接拿过去用(节省开发时间)hhh, 后面我还会继续更新这篇文章的,目前在公司一直都是 jq 所以这些都是原生的,后面也会出 Vue Or React 里面使用的(hhh)

如果阅读中,有什么不明白的 可以问我,也可以去群里交流

Qq:952822399

Qq 群 iD 718639024

大家也可以进来互相交流~

最后就是厚脸皮的一步(觉得不错可以点个 star 哦~~~) 仓库地址

同时也欢迎 Pr 帮我修复不正确的地方!!


以上所述就是小编给大家介绍的《Echarts 系列之复制粘贴大法》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

软件开发本质论

软件开发本质论

Ron Jeffries / 王凌云 / 人民邮电出版社图灵分社 / 2017-1 / 39

想象你正在攀登一座名为“软件开发”的山峰。本书是与你同登一座山峰的敏捷先驱所带来的话语与图片。他在崎岖的山路边找到相当平坦的歇脚处,画下所见的风景,并写下自己的想法和发现。他瞧见很多条上山的路,愿以此书与你分享哪条路容易、哪条路困难、哪条路安全、哪条路危险。他还想指引你欣赏身后的美景。正是这些美景丰富了你的登山之旅,让你在重重困难中收获成长。 “对于每一位CTO、技术VP、软件产品总......一起来看看 《软件开发本质论》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具