echarts饼状图代码（echarts饼状图图例）

今天给各位分享echarts饼状图代码的知识，其中也会对echarts饼状图图例进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、使用echarts画饼状图，设置饼状图颜色
• 2、echarts怎么控制圆饼图的大小
• 3、如何使用echarts做饼状图

使用echarts画饼状图，设置饼状图颜色

前言：

前面已经跟大家分享了使用echarts画柱状图、折线图，一些之前自己遇到的坑也跟大家说了，这次就不再赘述。官方有配置文档，很详细，大家不懂的地方也可以交流。

今日分享重点：画饼状图。

1.引入相关js

2.确定容器

3.定义画饼状图的方法，配置图表参数

4.调用方法，传递参数

5.划重点

6.上图

echarts怎么控制圆饼图的大小

echarts控制圆饼图的大小代码及方法如下：

1、新建静态页面pie.html，并引入echarts核心js文件。

2、在body/body元素内插入div饼图容器，设置其宽度和高度。

3、编写生成饼图图形的核心代码，有数据源和样式。

4、预览该静态页面，查看饼图效果，分别点击饼图块。

5、添加饼图块图例切换事件，并打印出饼图参数，更改参数值即可实现圆饼图大小的控制。

6、再次预览该界面，可以查看到饼图效果，并点击饼图分块。

如何使用echarts做饼状图

!DOCTYPE html

2 html

3 head

4 meta charset="UTF-8"

5 title饼状图练习/title

6 style

7 #pic1{

8 width:400px;

9 height:400px;

10 margin: 20px auto;

11 }

12 /style

13 script src="js/echarts.common.min.js"/script

14 /head

15 body

16 div id="pic1"/div

17 script

18 var myCharts1 = echarts.init(document.getElementById('pic1'));

19 var option1 = {

20 backgroundColor: 'white',

21

22 title: {

23 text: '课程内容分布',

24 left: 'center',

25 top: 20,

26 textStyle: {

27 color: '#ccc'

28 }

29 },

30 tooltip : {

31 trigger: 'item',

32 formatter: "{a} br/{b} : {d}%"

33 },

34

35 visualMap: {

36 show: false,

37 min: 500,

38 max: 600,

39 inRange: {

40 colorLightness: [0, 1]

41 }

42 },

43 series : [

44 {

45 name:'课程内容分布',

46 type:'pie',

47 clockwise:'true',

48 startAngle:'0',

49 radius : '60%',

50 center: ['50%', '50%'],

51 data:[

52 {

53 value:70,

54 name:'语言',

55 itemStyle:{

56 normal:{

57 color:'rgb(255,192,0)',

58 shadowBlur:'90',

59 shadowColor:'rgba(0,0,0,0.8)',

60 shadowOffsetY:'30'

61 }

62 }

63 },

64 {

65 value:10,

66 name:'美国科学社会科学',

67 itemStyle:{

68 normal:{

69 color:'rgb(1,175,80)'

70 }

71 }

72 },

73 {

74 value:20,

75 name:'美国数学',

76 itemStyle:{

77 normal:{

78 color:'rgb(122,48,158)'

79 }

80 }

81 }

82

83 ],

84 }

85 ]

86 };

87 myCharts1.setOption(option1);

88 /script

89 /body

90 /html

关于echarts饼状图代码和echarts饼状图图例的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。