【Echarts】- 制作饼图

效果大概是这样

步骤分析

封装好函数，为后续传入真实数据做准备

初始化echarts

设置配置项，空的 option 即可

创建图表

查找官方示例

按需求，自定义配置图表

第一步：echarts基本步骤

 function pieChart() {let myChart = echarts.init(document.querySelector('.pie'));let option = {};myChart.setOption(option);}

第二步：参照官方示例

（官方示例：Examples - Apache ECharts）

只留下series系列数据配置，其他全部删除。

第三步：自定义配置

增加标题，标题颜色 #6d767e

增加鼠标移入提示。（比如：“各地学员分布北京市 12人占比6.8%”）

系列数据

修改 name 为 '各地学员分布'

饼图，内圈半径 10%，外圈半径 60%

居中显示

面积模式

扇形轮廓圆角（4px）

完成后的配置项如下：

function pieChart() {let myChart = echarts.init($('.pie')[0]); // $('.pie') 是jQuery对象；加 [0] 把它转为DOM对象let option = {// 标题title: {text: '籍贯 Hometown',textStyle: {color: '#6d767e'}},// 鼠标移入的提示tooltip: {// {a} 是 series[0].name ，系列名称// {b} 是 series[0].data.name ，每一项的名称// {c} 是 数值// {d} 是 百分比formatter: '{a} <br /> {b} <strong>{c}</strong>人 占比{d}%'},// 系列数据series: [{name: '各地人员分布', // 和提示有关系type: 'pie', // 表示这是饼图（line表示折线图、bar表示柱状图）radius: ['10%', '60%'], // 半径，一个表示饼图的内圈半径；一个表示外圈半径center: ['50%', '50%'], // 圆心点坐标// roseType 怎样表示数据，可选值有 area 和 radius// area 使用半径的长短表示数据的大小；每个扇形的圆心角相同// radius 使用半径的长短表示数据的大小；每个扇形的圆心角表示百分比roseType: 'area',// itemStyle 每一项的样式itemStyle: {borderRadius: 4},data: [{ value: 40, name: '河北省' },{ value: 20, name: '山东省' },{ value: 32, name: '河南省' },{ value: 30, name: '山西省' },{ value: 28, name: '内蒙古' },{ value: 26, name: '辽宁省' },{ value: 22, name: '吉林省' },{ value: 18, name: '黑龙江' }]}]};myChart.setOption(option);
}pieChart();

【Echarts】- 制作饼图相关推荐

VUE+ECharts 制作饼图
项目的首页需要实现一个饼图(后端接口返回数据) 准备工作:首先在项目里面安装echarts cnpm install echarts --s 然后我是在main.js里引入了 import echar ...
ECharts制作饼图，显示百分比、指示线
效果图: html模块 <template><div><div id="ipage-chart-send" ref="send" ...
echarts中饼图显示百分比
通过echarts制作饼图,需要通过鼠标移动到对应的扇形才能才看数值和百分比. 解决这个问题参考的是将鼠标移动到扇形上的显示方法: tooltip : { trigger: ...
Echarts之饼图制作
本篇主要讲解通过echarts制作一个饼图时所用到的一些代码,及所用到代码的详细作用,记录自己的echarts学习过程,同时希望对看到这篇博客的客友提供些许帮助. <!DOCTYPE html& ...
使用Echarts制作动态嵌套饼图
笔者最近因为使用Echarts制作报表,参考了官方文档及某些博客,使用过程中有些想法,想将其中的一些记录下来,也希望能帮助到需要的人. 本例以嵌套的饼图为例.嵌套的饼图即为双层饼图,相比普通的饼图多了 ...
echarts嵌套饼图自动动画_使用百度echarts制作可视化大屏——制作一个双层饼图...
使用百度echarts制作可视化大屏--制作一个双层饼图发布时间:2018-06-12 16:24, 浏览次数:745 , 标签: echarts 实现一个两层嵌套的环形图,展示三个分类下各个品牌车 ...
Echarts 解决饼图文字过长重叠的问题
Echarts 解决饼图文字过长重叠的问题参考文章: (1)Echarts 解决饼图文字过长重叠的问题 (2)https://www.cnblogs.com/yingsu/p/10608014.ht ...
echarts饼图解析html标签,解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. ...
java word 饼图_[Java教程]echarts标准饼图解读(一)——基本配置demo
[Java教程]echarts标准饼图解读(一)--基本配置demo 0 2016-11-21 17:00:18 echarts标准饼图解读共分为四部分, 一.基本配置demo 二.标题(title) ...
Echarts pie 饼图类型后显示数据
Echarts pie 饼图类型后显示数据 sysPie:function(libtypelist){var that=this;libtypelist=that.indexData.libtypel ...

【Echarts】- 制作饼图

步骤分析

第一步：echarts基本步骤

第二步：参照官方示例

第三步：自定义配置

完成后的配置项如下：

【Echarts】- 制作饼图相关推荐

最新文章

热门文章