您的位置:首页> 日志> 前端技术 正文
DTOP

如何在网页中引用数据图表

NoyaHua | 2019年12月16日 |

>>收藏本文 已有 0条评论

最近项目中有遇到数据图表,这里推荐一款百度前端出品的Echarts。它是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

使用方法如下:

1.首先在官网选择合适的下载版本

http://echarts.baidu.com/download.html

下载或通过cdn引入 https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js

2.引入Echarts

<script src="echarts.min.js"></script>

  

3.准备一个DOM容器,设置好高度和宽度

<div id="main" style="width: 1000px;height:600px;"></div>

4.创建一个图表

创建图表JS,可以根据官方实例,拷贝对应的JS。然后修改成自己网页中的图表样式。

实例如下图:

  1. <div id="main" style="width: 1000px;height:600px;">&nbsp</div>
  2. <script type="text/javascript">
  3. var myChart = echarts.init(document.getElementById('main'));
  4. var dataAxis = ["部门一","部门二","部门三","部门四","部门五","部门六","部门七","部门八","部门九","部门十"];
  5. var data = [300, 390, 200, 345, 300, 390,200,345,390,200];
  6. var yMax = 400;
  7. var dataShadow = [];
  8. for (var i = 0; i < data.length; i++) {
  9. dataShadow.push(yMax);
  10. }
  11. option = {
  12. tooltip : {
  13. trigger: 'axis',
  14. axisPointer : {
  15. type : 'shadow'
  16. }
  17. },
  18. grid: {
  19. left: '3%',
  20. right: '4%',
  21. bottom: '3%',
  22. containLabel: true
  23. },
  24. xAxis: {
  25. data: dataAxis,
  26. axisLabel: {
  27. inside: false,
  28. textStyle: {
  29. color: '#333'
  30. }
  31. },
  32. axisTick: {
  33. show: true
  34. },
  35. axisLabel:{ //加上这个强制显示
  36. interval: 0},
  37. axisLine: {
  38. show: true
  39. },
  40. z: 10
  41. },
  42. yAxis: {
  43. axisLine: {
  44. show: true
  45. },
  46. axisTick: {
  47. show: false
  48. },
  49. axisLabel: {
  50. textStyle: {
  51. color: '#999'
  52. }
  53. }
  54. },
  55. dataZoom: [
  56. {type: 'inside'
  57. }
  58. ],
  59. series: [
  60. { // For shadow type: 'bar', itemStyle: { normal: {color: 'rgba(0,0,0,0.05)'}, },
  61. barGap:'-100%',
  62. barCategoryGap:'60%',
  63. data: dataShadow,
  64. animation: false,
  65. axisTick: {
  66. alignWithLabel: true
  67. }
  68. },
  69. {
  70. type: 'bar',
  71. itemStyle: {
  72. normal: {
  73. color: new echarts.graphic.LinearGradient(
  74. 0, 0, 0, 1,
  75. [{offset: 0, color: '#44ae21'}, {offset: 1, color: '#155001'}
  76. ]
  77. )
  78. },
  79. emphasis: {
  80. color: new echarts.graphic.LinearGradient(
  81. 0, 0, 0, 1,
  82. [{offset: 0, color: '#155001'}, {offset: 1, color: '#44ae21'}
  83. ]
  84. )
  85. }
  86. },
  87. label: {
  88. show: true,
  89. position: 'top'
  90. },
  91. data: data
  92. }
  93. ]
  94. };
  95. var zoomSize = 6;
  96. myChart.on('click', function (params) {
  97. console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
  98. myChart.dispatchAction({
  99. type: 'dataZoom', startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)], endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
  100. });
  101. });
  102. // 使用刚指定的配置项和数据显示图表。
  103. myChart.setOption(option);
  104. </script>