#千锋逆战班，拼搏永向前#

小六子_Java魔法师

于 2020-03-05 22:08:46 发布

阅读量58

点赞数

本文链接：https://blog.csdn.net/weixin_46221109/article/details/104685349

版权

实用图表工具ECharts
介绍：ECharts 是一款由百度前端技术部开发的，基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
环境：https://www.echartsjs.com/index.html

案例:完成一个散点图
1,导入echarts.js文件
2,为 ECharts 准备一个具备高宽的DOM容器
3,初始化一个echarts实例
4,指定散点图的配置项和数据
5,通过 setOption 方法生成一个简单的散点图
代码：

<head>
<!‐‐1,导入echarts文件‐‐> 
<script src="echarts/echarts.min.js"></script> 
</head>
 <body>
 <!‐‐2,为 ECharts 准备一个具备高宽的DOM容器‐‐>
  <div id="main" style="width: 600px;height:400px;"></div> 
  <script type="text/javascript"> 
  <!‐‐3,初始化一个echarts实例‐‐>
  var myChart = echarts.init(document.getElementById('main'));
  <!‐‐4,指定散点图的配置项和数据‐‐> 
  var option = {
   xAxis: {}, 
   yAxis: {},
   series: [{ 
   symbolSize: 20, 
   data: [ 
   [10.0, 8.04],
   [8.0, 6.95], 
   [13.0, 7.58], 
   [9.0, 8.81],
   [11.0, 8.33], 
   [14.0, 9.96], 
   [6.0, 7.24],
   [4.0, 4.26],
   [12.0, 10.84], 
   [7.0, 4.82], 
   [5.0, 5.68] 
   ],
   type: 'scatter' 
   }] 
   };
    <!‐‐5,通过setOption 方法生成一个简单的散点图‐‐>
   myChart.setOption(option);
 </script> 
 </body>