ECharts-html 实训（四）

2301_77563994

于 2024-04-01 13:12:08 发布

阅读量1.6k

点赞数 29

文章标签： echarts 前端

本文链接：https://blog.csdn.net/2301_77563994/article/details/137005002

版权

一、绘制普通散点图

1.什么是散点图

散点图，顾名思义就是使用一些散乱的点来展示数据的一种图表，这些点在哪个位置，是由其X值和Y值确定的，因此散点图也叫做XY散点图，散点图适用于展示不同时间下离散数据的差异。

2.绘制基本散点图

绘制基本散点图的代码

<!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 style="width: 600px;height: 400px"></div>
  <script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.querySelector('div'))
    // 步骤4：准备配置项
    option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      symbolSize: 20,
      data: [
        [10.0, 8.04],
        [8.07, 6.95],
        [13.0, 7.58],
        [9.05, 8.81],
        [11.0, 8.33],
        [14.0, 7.66],
        [13.4, 6.81],
        [10.0, 6.33],
        [14.0, 8.96],
        [12.5, 6.82],
        [9.15, 7.2],
        [11.5, 7.2],
        [3.03, 4.23],
        [12.2, 7.83],
        [2.02, 4.47],
        [1.05, 3.33],
        [4.05, 4.96],
        [6.03, 7.24],
        [12.0, 6.26],
        [12.0, 8.84],
        [7.08, 5.82],
        [5.02, 5.68]
      ],
      type: 'scatter'
    }
  ]
};
    // 步骤5：将配置项设置给echarts实例对象
    mCharts.setOption(option);
  </script>
</body>

上述代码展示的结果如下图所示：

二、绘制带涟漪特效的散点图

在ECharts中，通过使用effectScatter可以设置带有涟漪特效的散点图。

绘制带有涟漪特效的散点图代码为：

<!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 style="width: 600px;height: 400px"></div>
  <script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.querySelector('div'))
    // 步骤4：准备配置项
    option = {
  xAxis: {
    scale: true
  },
  yAxis: {
    scale: true
  },
  series: [
    {
      type: 'effectScatter',
      symbolSize: 20,
      data: [
        [172.7, 105.2],
        [153.4, 42]
      ]
    },
    {
      type: 'scatter',
      // prettier-ignore
      data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
                [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
                [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
                [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
                [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
                [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
                [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
                [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
                [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
                [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
                [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
                [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
                [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
                [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
                [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
                [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
                [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
                [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
                [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
                [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
                [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
                [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
                [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
                [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
                [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
                [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
                [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
                [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
                [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
                [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
                [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
                [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
                [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
                [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
                [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
                [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
                [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
                [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
                [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
                [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
                [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
                [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
                [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
                [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
                [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
                [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
                [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
                [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
                [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
                [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
                [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
                [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
            ]
    }
  ]
};

      
    // 步骤5：将配置项设置给echarts实例对象
    mCharts.setOption(option);
  </script>
</body>

上述代码展示的效果图如下图所示：

三、绘制汽泡图

上面绘制的散点图只有两个变量，如果想要再增加变量，就可以使用点的大小来表示。汽泡图是在基础散点图上添加了一个维度，即用气泡大小表示一个新的维度。

汽泡图和散点图最直观的区别在于：散点图中的数据点大小一样，气泡图中的气泡大小不相同。

绘制标准汽泡图的代码：

<!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 style="width: 600px;height: 400px"></div>
  <script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.querySelector('div'))
    // 步骤4：准备配置项
    const data = [
  [
    [28604, 77, 17096869, 'Australia', 1990],
    [31163, 77.4, 27662440, 'Canada', 1990],
    [1516, 68, 1154605773, 'China', 1990],
    [13670, 74.7, 10582082, 'Cuba', 1990],
    [28599, 75, 4986705, 'Finland', 1990],
    [29476, 77.1, 56943299, 'France', 1990],
    [31476, 75.4, 78958237, 'Germany', 1990],
    [28666, 78.1, 254830, 'Iceland', 1990],
    [1777, 57.7, 870601776, 'India', 1990],
    [29550, 79.1, 122249285, 'Japan', 1990],
    [2076, 67.9, 20194354, 'North Korea', 1990],
    [12087, 72, 42972254, 'South Korea', 1990],
    [24021, 75.4, 3397534, 'New Zealand', 1990],
    [43296, 76.8, 4240375, 'Norway', 1990],
    [10088, 70.8, 38195258, 'Poland', 1990],
    [19349, 69.6, 147568552, 'Russia', 1990],
    [10670, 67.3, 53994605, 'Turkey', 1990],
    [26424, 75.7, 57110117, 'United Kingdom', 1990],
    [37062, 75.4, 252847810, 'United States', 1990]
  ],
  [
    [44056, 81.8, 23968973, 'Australia', 2015],
    [43294, 81.7, 35939927, 'Canada', 2015],
    [13334, 76.9, 1376048943, 'China', 2015],
    [21291, 78.5, 11389562, 'Cuba', 2015],
    [38923, 80.8, 5503457, 'Finland', 2015],
    [37599, 81.9, 64395345, 'France', 2015],
    [44053, 81.1, 80688545, 'Germany', 2015],
    [42182, 82.8, 329425, 'Iceland', 2015],
    [5903, 66.8, 1311050527, 'India', 2015],
    [36162, 83.5, 126573481, 'Japan', 2015],
    [1390, 71.4, 25155317, 'North Korea', 2015],
    [34644, 80.7, 50293439, 'South Korea', 2015],
    [34186, 80.6, 4528526, 'New Zealand', 2015],
    [64304, 81.6, 5210967, 'Norway', 2015],
    [24787, 77.3, 38611794, 'Poland', 2015],
    [23038, 73.13, 143456918, 'Russia', 2015],
    [19360, 76.5, 78665830, 'Turkey', 2015],
    [38225, 81.4, 64715810, 'United Kingdom', 2015],
    [53354, 79.1, 321773631, 'United States', 2015]
  ]
];
option = {
  backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
    {
      offset: 0,
      color: '#f7f8fa'
    },
    {
      offset: 1,
      color: '#cdd0d5'
    }
  ]),
  title: {
    text: 'Life Expectancy and GDP by Country',
    left: '5%',
    top: '3%'
  },
  legend: {
    right: '10%',
    top: '3%',
    data: ['1990', '2015']
  },
  grid: {
    left: '8%',
    top: '10%'
  },
  xAxis: {
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  yAxis: {
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    },
    scale: true
  },
  series: [
    {
      name: '1990',
      data: data[0],
      type: 'scatter',
      symbolSize: function (data) {
        return Math.sqrt(data[2]) / 5e2;
      },
      emphasis: {
        focus: 'series',
        label: {
          show: true,
          formatter: function (param) {
            return param.data[3];
          },
          position: 'top'
        }
      },
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(120, 36, 50, 0.5)',
        shadowOffsetY: 5,
        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
          {
            offset: 0,
            color: 'rgb(251, 118, 123)'
          },
          {
            offset: 1,
            color: 'rgb(204, 46, 72)'
          }
        ])
      }
    },
    {
      name: '2015',
      data: data[1],
      type: 'scatter',
      symbolSize: function (data) {
        return Math.sqrt(data[2]) / 5e2;
      },
      emphasis: {
        focus: 'series',
        label: {
          show: true,
          formatter: function (param) {
            return param.data[3];
          },
          position: 'top'
        }
      },
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(25, 100, 150, 0.5)',
        shadowOffsetY: 5,
        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
          {
            offset: 0,
            color: 'rgb(129, 227, 238)'
          },
          {
            offset: 1,
            color: 'rgb(25, 183, 207)'
          }
        ])
      }
    }
  ]
};

      
    // 步骤5：将配置项设置给echarts实例对象
    mCharts.setOption(option);
  </script>
</body>

上述代码汽泡图的效果图如下所示：

四、绘制仪表盘

仪表盘(Cauge)也被称为投号表图或速度表图，用于显示类似于拨号/速度计上的数据，是一种拟物化的震不形式。仪表盘是常用商业 BI 类的图表之一，可以轻松展示用户的数据，并能清晰看出某个指标值所在的范围。为了更直观地查看项目的实际完成率数据，以及汽车的速度、发动机的转速、油表和水表的现状，需要在 EChart's 中绘制单仪表盘和多仪表盘进行展示。

在仪表盘中，颜色可以用于划分指示值的类别，而刻度、指针指示维度、指针角度则可用于表示数值。仪表盘别需分配最小值和最大值，并定义一个颜色范围，指针将显示出关键指标的数据或当前进度。仪表盘可应用于诸如速度、体积、温度、进度、完成率、满意度等。

1.绘制单仪表盘

绘制单仪表盘的代码：

<!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 style="width: 600px;height: 400px"></div>
  <script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.querySelector('div'))
    // 步骤4：准备配置项
    option = {
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      name: 'Pressure',
      type: 'gauge',
      detail: {
        formatter: '{value}'
      },
      data: [
        {
          value: 60,
          name: '仪表盘'
        }
      ]
    }
  ]
};

      
    // 步骤5：将配置项设置给echarts实例对象
    mCharts.setOption(option);
  </script>
</body>

单仪表盘代码的效果图：

2.绘制多仪表盘

绘制多仪表盘的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="../../lib/echarts.js"></script>-->
    <script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 900px; height: 600px"></div>
<script type="text/javascript">

    var myChart = echarts.init(document.getElementById("main"),'dark');

    var color1 = [[0.33, "rgba(0,255,0,1)"], [0.5, "rgba(0,255,255,1)"],[1, "rgba(255,0,0,1)"] ];
    var option = {
        backgroundColor:'rgb(0,0,0,1)',
        title:{
            text:'汽车仪表盘',
            textStyle:{
                fontsize:30,
                color:'#DC143C'
            },
            x:'45%',
            y:'10%'
        },
        tooltip:{
            formatter:'{a}<br/>{b}:{c}'
        },
        series:[
            {
                name:'仪表盘',
                type:'gauge',
                min:0,
                max:240,
                radius:'50%',
                splitNumber:12,
                axisLine:{
                    lineStyle:{
                        width:5,
                        color:color1,

                        }
                },
                axisTick:{
                    length:10,splitNumber: 5,lineStyle: {color:'#FDCF20'}
                },
                splitLine:{
                    length: 20,
                    lineStyle:{color: '#FDCF20',}
                },
                title:{
                    textStyle:{fontWeight:'bolder',fontsize:20,fontStyle:'italic',color:'auto'},


                },
                pointer:{
                    show:true,
                    length:'75%',
                    width: 10

                },
                itemStyle:{
                    color:color1,
                    shadowBlur: 20,
                    shadowColor: "pink",
                },



                detail:{
                    show:true,
                    color:'auto',
                    formatter: '{value}'
                },
                data:
                    [ {name:'速度表(km/h)', value:20},

                    ]

            },
            {
                name: '转速', type: 'gauge',
                center: ['20%', '55%'],  //设置转速仪表盘中心点的位置，默认全局居中
                radius: '35%',  //设置转速油表仪表盘的大小
                min: 0,  //设置转速仪表盘的最小值
                max: 7,  //设置转速仪表盘的最大值
                endAngle: 45,
                splitNumber: 7,  //设置转速仪表盘的分隔数目为7
                axisLine: { show:true,lineStyle: { width: 4 ,color:color1} },  //设置属性lineStyle控制线条样式
                axisTick: {  //设置坐标轴小标记
                    length: 6,  //设置属性length控制线长
                    splitNumber: 5,  //设置坐标轴小标记的分隔数目为5
                    lineStyle: {  //设置属性lineStyle控制线条样式
                        color: '#FDCF20'
                    }
                },
                splitLine: {  //设置分隔线
                    length: 10,  //设置属性length控制线长
                    lineStyle: {  //设置属性lineStyle（详见lineStyle）控制线条样式
                        color: '#FDCF20'
                    }
                },
                pointer:{
                    show:true,
                    length:'70%',
                    width: 5

                },
                itemStyle:{
                    color:color1,
                    shadowBlur: 20,  //设置(发光效果)图形阴影的模糊大小
                    shadowColor: "pink",  //设置阴影颜色，支持的格式同color
                },
                title: {
                    offsetCenter: ['30% ', '-30%'],
                    textStyle:{fontWeight:'bolder',fontsize:3,fontStyle:'italic',color:'auto'},
                },
                detail: { textStyle: { fontWeight: 'bolder' ,fontSize:20,color:'auto'},formatter: '{value} ' },
                data: [{ value: 1.5, name: '转速(x1000 r/m)' }]
            },
            {
                name:'里程',type:'gauge',
                center: ['80%','50%'],
                min:0,
                max:10,
                startAngle:135,
                endAngle: 45,
                splitNumber: 5,
                radius: '35%',
                axisLine: {
                    lineStyle: {color:color1,width:3}
                },
                axisTick: {
                    splitNumber: 5,
                    length: 5,
                    lineStyle: {color:'#FDCF20'}
                },
                splitLine: {
                  length: 15,lineStyle: {color: '#FDCF20'}
                },
                pointer: {
                    show: true,
                    width: 3,
                    length: '70%'
                },
                itemStyle: {
                    color:color1,
                    shadowBlur: 10,
                    shadowColor: 'white'
                },
                title: {
                    offsetCenter: ['0', '-120%'],
                    textStyle:{fontWeight:'bolder',fontsize:3,fontStyle:'italic',color:'auto'},
                },
                detail: { show:false,textStyle: { fontWeight: 'bolder' ,fontSize:20,color:'auto'},formatter: '{value} ' },
                data: [{ value: 1.5, name: '里程表(x1000 KM)' }]

            },
            {
                name: '油表', type: 'gauge',
                center: ['80%','50%'],
                radius: '35%',
                min: 0,
                max: 2,
                startAngle: 315, endAngle: 225,
                splitNumber: 2,
                axisLine: { lineStyle: { width: 3 ,color: color1} },  //设置属性lineStyle控制线条样式
                axisTick: {
                    splitNumber: 5,
                    length: 10,
                    lineStyle: {
                        color: '#FDCF20'
                    }
                },
                axisLabel: {
                    formatter: function (v) {
                        switch (v + '') {
                            case '0': return 'E';
                            case '1': return '油表';
                            case '2': return 'F';
                        }
                    }
                },
                splitLine: {
                    length: 15,
                    lineStyle: {
                        color: '#FDCF20'
                    }
                },
                pointer: { width: 4 },
                itemStyle: {
                    color:'yellow',
                    shadowBlur: 10,
                    shadowColor: 'white'
                },
                title: { show: false },
                detail: { show: false },
                data: [{ value: 0.5, name: 'gas' }]
            },

        ]
    }
    setInterval(function (arg) {
        var num = Math.random()
        option.series[0].data[0].value = (num*240).toFixed(2);
        option.series[1].data[0].value = (num*7).toFixed(2);
        option.series[2].data[0].value = (num*10).toFixed(2);
        option.series[3].data[0].value = (num*10).toFixed(2);
        myChart.setOption(option)

    },1000)

</script>

</body>
</html>

多仪表盘的效果图：

五、课本案例实训

1.客户数量与销售额相关分析

训练要点

掌握散点图的绘制。

需求说明

“销售任务完成情况表.xlsx”记录了完成情况，要通过绘制散点图分析已购买客户数量与销售额之间的关系。

销售任务完成情况表如下图：

绘制散点图的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height: 400px;"></div>
    <script type="text/javascript">
    var myChar=echarts.init(document.getElementById("main"));
    
    var option={
        title:{
            text:'散点图',
        },
        tooltip:{
            trigger:'item',
            formatter:"{b}{c}",
        },
        xAxis:{scale:true,name:'销售额'},
        yAxis:{scale:true,name:'已购买客户数量'},
        series:[
        {
                type:'scatter',
                symbolSize:10,
                data:[[3134352.75,468],[8150670.62,1547],[4677846.24,748],[4234075.23,601],[9903786.32,2059],[2657902.04,429],[5128837.07,1012],[3954075.17,561],[2290201.87,422],[6193413.66,1188],[1695026.6,367],[6736514.25,1232],]
            }
        ]
        };
 myChar.setOption(option);
 </script>
 </body>
 </html>

效果图：