67Echarts - 散点图(Basic Scatter Chart)

简介: 67Echarts - 散点图(Basic Scatter Chart)
效果图

源代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var option;
      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'
        }]
      };
      myChart.setOption(option);
    </script>
  </body>
</html>
目录
打赏
0
0
0
0
244
分享
相关文章
【前端图表】echarts散点图鼠标划过散点显示信息
【前端图表】echarts散点图鼠标划过散点显示信息
166 0
|
7月前
echarts中使用散点scatter更改颜色却不生效的问题
本文讨论了在ECharts中使用散点图(scatter)时更改颜色不生效的问题。原因是项目中使用了`visualMap`组件,它具有最高的优先级,导致自定义的颜色设置被覆盖。解决方法是在`visualMap`组件中增加`seriesIndex`属性,指定它只对特定的系列(series)生效,从而避免影响散点图的颜色设置。文章提供了详细的代码示例和解决办法。
190 3
195Echarts - 自定义系列(Error Scatter on Catesian)
195Echarts - 自定义系列(Error Scatter on Catesian)
35 0
ECharts散点图大小调整
ECharts散点图大小调整
244 0
【前端图表】echarts实现散点图x轴时间轴
【前端图表】echarts实现散点图x轴时间轴
252 0
264Echarts - GL 散点图(10 million Bulk GPS points)
264Echarts - GL 散点图(10 million Bulk GPS points)
95 0
245Echarts - 3D 散点图(Scatter3D - Simplex Noise)
245Echarts - 3D 散点图(Scatter3D - Simplex Noise)
99 0
244Echarts - 3D 散点图(3D Scatter with Scatter Matrix)
244Echarts - 3D 散点图(3D Scatter with Scatter Matrix)
95 0
242Echarts - 3D 散点图(3D Scatter with Dataset)
242Echarts - 3D 散点图(3D Scatter with Dataset)
209 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等