echarts教程饼状图（echarts教程）

大家好，小活来为大家解答以上问题。echarts教程饼状图，echarts教程很多人还不知道，现在让我们一起来看看吧！

1、先来一个最简单的案例，实现一个条形图

2、步骤如下：

3、(1)预先准备好具有宽和高的网页元素，我们将用它绘制数据表。

4、<div id="main" style="width:600px;height:400px"></div>

5、(2)然后我们导入Echarts类库，做好准备

6、<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

7、(3)然后就是重头戏，我们来绘制数据表，首先配置路径，接着使用Echarts开始绘图。

8、// 路径配置

9、require.config({

10、 paths: {

11、 echarts: 'http://echarts.baidu.com/build/dist'

12、 }

13、});

14、// 使用

15、require(

16、 [

17、 'echarts',

18、 'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载

19、 ],

20、 function (ec) {

21、 // 基于准备好的dom，初始化echarts图表

22、 var myChart = ec.init(document.getElementById('main'));

23、 //设置数据

24、 var option = {

25、

26、 };

27、 // 为echarts对象加载数据

28、 myChart.setOption(option);

29、 }

30、);

31、(4)重点是option里的设置，设置坐标轴、设置数据。

32、var option = {

33、 //设置坐标轴

34、 xAxis : [

35、 {

36、 type : 'category',

37、 data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]

38、 }

39、 ],

40、 yAxis : [

41、 {

42、 type : 'value'

43、 }

44、 ],

45、 //设置数据

46、 series : [

47、 {

48、 "name":"销量",

49、 "type":"bar",

50、 "data":[5, 20, 40, 10, 24, 20,24,32],

51、 }

52、 ]

53、 };

54、我们可以设置图标标题、图例、提示等，代码如下，效果如下图所示。

55、再来一张复杂的图——直线图加上条形图，同时画平均线、提示最大最小值；

56、当我们需要混搭的时候，首先需要在require里加载需要使用的图库，然后在series里填写折线图的数据就可以了。代码如下，因为注释已经写得很清楚了，就不在啰嗦了，大家直接研究代码。

57、// 路径配置

58、require.config({

59、 paths: {

60、 echarts: 'http://echarts.baidu.com/build/dist'

61、 }

62、});

63、// 使用

64、require(

65、 [

66、 'echarts',

67、 'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载

68、 'echarts/chart/line'

69、 ],

70、 function (ec) {

71、 // 基于准备好的dom，初始化echarts图表

72、 var myChart = ec.init(document.getElementById('main'));

73、//设置数据

74、 var option = {

75、 //设置标题

76、 title:{

77、 text:'销量图',

78、 subtext:'纯属捏造，如有雷同，人品爆发。'

79、 },

80、 //设置提示

81、 tooltip: {

82、 show: true

83、 },

84、 //设置图例

85、 legend: {

86、 data:['销量']

87、 },

88、 //设置坐标轴

89、 xAxis : [

90、 {

91、 type : 'category',

92、 data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]

93、 }

94、 ],

95、 yAxis : [

96、 {

97、 type : 'value'

98、 }

99、 ],

100、 //设置数据

101、 series : [

102、 //条形图

103、 {

104、 "name":"销量",

105、 "type":"bar",

106、 "data":[5, 20, 38, 10, 24, 20,24,32]

107、 },

108、 //折线图

109、 {

110、 "name":"销量",

111、 "type":"line",

112、 "data":[5, 20, 38, 10, 24, 20,24,32],

113、 //绘制平均线

114、 markLine : {

115、 data : [

116、 {type : 'average', name: '平均值'}

117、 ]

118、 },

119、 //绘制最高最低点

120、 markPoint : {

121、 data : [

122、 {type : 'max', name: '最大值'},

123、 {type : 'min', name: '最小值'}

124、 ]

125、 }

126、 }

127、 ]

128、 };

129、 // 为echarts对象加载数据

130、 myChart.setOption(option);

131、 }

132、);

133、最后的效果如下图所示

本文到此结束，希望对大家有所帮助。

免责声明：本文由用户上传，如有侵权请联系删除！