数据可视化浮点图和仪表图

x11__111

于 2024-03-27 15:06:47 发布

阅读量189

点赞数 3

文章标签：数据可视化

本文链接：https://blog.csdn.net/x11__111/article/details/137008534

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 步骤1：引入echarts.js文件 -->
  <script src="js/echarts.js"></script>
  <!-- 
  步骤1：引入echarts.js文件
  步骤2：准备一个呈现图表的盒子
  步骤3：初始化echarts实例对象
  步骤4：准备配置项
  步骤5：将配置项设置给echarts实例对象
   -->
</head>
<body>
  
  <!-- 步骤2：准备一个呈现图表的盒子 -->
  <div id="main" style="width: 700px;height: 400px"></div>
  <script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
 var myChart = echarts.init(document.getElementById('main'))
 option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      symbolSize: 20,
      data: [
      [468,3134352.75],
      [1547,8150670.62],
      [748,4677846.24],
      [601,4234075.23],
      [2059,9903786.32],
      [429,2657902.04],
      [1012,5128837.07],
      [561,3954075.17],
      [422,2290201.87],
      [1188,6193413.66],
      [367,1695026.60],
      [1232,6736514.25],

      ],
      type: 'scatter'
    }
  ]
};

myChart.setOption(option);
</script>
</body>

仪表图

<!DOCTYPE html>
 
<html>
 
    <head>
 
        <meta charset="UTF-8">
 
        <script type="text/javascript" src="js/echarts.min.js" ></script>
 
        <title></title>
 
       
 
    </head>
 
    <body>
 
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 
    <div id="main" style="width: 1000px;height:800px;"></div>
 
    <script type="text/javascript">
 
        // 基于准备好的dom，初始化echarts实例
 
        var myChart = echarts.init(document.getElementById('main'));
 		
        var option ={
        		 title: {
                     text: '销售额完成情况',
                     
                 },
                 tooltip: {
                     trigger: 'axis',
                     axisPointer:{
                    	 type:'shadow'
                     }
                 },
                 
                 toolbox: {
                     show: true,
                     feature: {
                         mark: { show: true },
                         dataView: { show: true, readOnly: false },
                         magicType: { show: true, type: ['line', 'bar'] },
                         restore: { show: true },
                         saveAsImage: { show: true },
                     },
                 },
                 calculable: true,
 
            	series: [
            		 {
            		      name: 'Pressure',
            		      type: 'gauge',
            		      max:3494768.89,
            		      detail: {
            		        formatter: '{value}'
            		      },
            		      data: [
            		        {
            		          value: 31343522.75,
            		          name: '销售额'
            		        }
            		      ]
            		    }
            		      
        ]
                 	
        	};
 	
 
 
 
        // 使用刚指定的配置项和数据显示图表。
 
        myChart.setOption(option);
 
    </script>
 
</body>
 
</html>