echarts.js是什么

JavaScript031

echarts.js是什么,第1张

是一个 百度旗下 使用各种图表展示统计分析结果的js插件

引入这个js,你就可以使用echarts官网上提供的所有图表工具

官网链接:网页链接

如图所示:

<!DOCTYPE html>

02<head>

03<meta charset="UTF-8">

04<title>使用RGraph插件制作柱状图</title>

05<script src="/jscss/demoimg/201401/RGraph.common.core.js"></script>

06<script src="/jscss/demoimg/201401/RGraph.bar.js"></script>

07<script>

08function window_onload()

09{

10//绘制柱状图,指定数据

11myGraph = new RGraph.Bar('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100,

122500,2700,1400,2600])

13 //指定统计图标题

14myGraph.Set('chart.title','某个年份常州第一百货公司长虹彩电销售图')

15//指定X轴标题

16myGraph.Set('chart.title.xaxis','销售月份')

17//指定Y轴标题

18myGraph.Set('chart.title.yaxis','销售台数')

19//指定X轴的坐标轴文字

20myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',

21'11月','12月'])

22//指定Y轴的坐标轴文字

23myGraph.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500'])

24//指定在坐标轴顶部绘制说明销售数量的文字

25myGraph.Set('chart.labels.above', true)

26//指定网格自动与坐标轴单位对齐

27myGraph.Set('chart.background.grid.autofit', true)

28myGraph.Set('chart.background.grid.autofit.align', true)

29//指定标签文字所使用的空间尺寸

30myGraph.Set('chart.gutter',65)

31//绘制柱状图

32myGraph.Draw()

33}

34</script>

35</head>

36<body onload="window_onload()">

37<h1>使用RGraph插件制作柱状图</h1>

38<canvas id="myCanvas" width="700" height="400">

39 [您的浏览器不支持canvas元素]

40</canvas>

41</body>

42</html>