饼图与圆环图区别

最新推荐文章于 2024-08-13 22:07:58 发布

lyq1820847491

最新推荐文章于 2024-08-13 22:07:58 发布

阅读量814

点赞数 20

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/lyq1820847491/article/details/137501209

版权

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="D:\js\echarts.js"></script>

<body>



<div style="width: 600px;height: 400px"></div>

<script>

// 2.初始化echarts实例化对象

var myChart = echarts.init(document.querySelector('div'));

// 3.指定图表的配置项和数据

// pieData就是需要设置给饼图的数据，是一个数组，数组中包含一个又一个对象，每一个对象中需要有 name 和 value

var pieData = [{

name: '淘宝',

value: 11231,

}, {

name: '京东',

value: 22673,

}, {

name: '唯品会',

value: 6123,

}, {

name: '拼多多',

value: 8989,

}, {

name: '苏宁易购',

value: 6700,

}]

var option = {

series: [{

type: 'pie',

data: pieData,

// 饼图的文字的显示

label: {

show: true,

// 决定文字显示的内容

formatter: function(arg) {

console.log(arg);

return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%';

},

}

}]

}

// 4.使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

</script>

</body>

</head>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="D:\js\echarts.js"></script>

<body>



<div style="width: 600px;height: 400px"></div>

<script>

// 2.初始化echarts实例化对象

var myChart = echarts.init(document.querySelector('div'));

// 3.指定图表的配置项和数据

// pieData就是需要设置给饼图的数据，是一个数组，数组中包含一个又一个对象，每一个对象中需要有 name 和 value

var pieData = [{

name: '淘宝',

value: 11231,

}, {

name: '京东',

value: 22673,

}, {

name: '唯品会',

value: 6123,

}, {

name: '拼多多',

value: 8989,

}, {

name: '苏宁易购',

value: 6700,

}]

var option = {

series: [{

type: 'pie',

data: pieData,

// 饼图的文字的显示

label: {

show: true,

// 决定文字显示的内容

formatter: function(arg) {

console.log(arg);

return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%';

},

},

//radius: 20, //饼图的半径

radius: '20%', // 百分比参照的是宽度和高度中较小的那一部分的一半 × 百分比

radius: ['50%','70%'], // 第 0 个元素代表的是内圆的半径,第 1 个元素是外圆的半径

}]

}

// 4.使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

</script>

</body>

</head>

lyq1820847491

关注

20
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
饼图与圆环图区别

return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%';return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%';radius: ['50%','70%'], // 第 0 个元素代表的是内圆的半径,第 1 个元素是外圆的半径。radius: '20%', // 百分比参照的是宽度和高度中较小的那一部分的一半 × 百分比。// 饼图的文字的显示。
复制链接

扫一扫