master

分支 (1)

管理

管理

master

add_system
/
echarts理想型模板OK.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <h3 style="text-align: center;">光伏</h3>
    <div id="main" style="width: 1280px;height:600px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        // title: {
        //   show: true,
        //   text: '强度'
        //   },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' },
    // 悬浮框数据添加单位
    formatter: function(params) {
      let firstParams = params[0];
      let sndParams = params[1];
      return '时间：' +firstParams.name +  '<br>' + '强度：' + firstParams.data + ' <br>板块净额：' + sndParams.data +' 亿';
    }
  },
  legend: {},
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      data: ['09:31', '09:33', '09:34', '09:35', '09:36', '09:37', '09:38', '09:39', '09:40', '09:42', '09:43', '09:44', '09:45', '09:46', '09:47', '09:48', '09:49', '09:50', '09:51', '09:52', '09:53', '09:54', '09:56', '09:57', '09:58', '09:59', '10:00', '10:01', '10:02', '10:04', '10:05', '10:06', '10:07', '10:08', '10:09', '10:10', '10:11', '10:12', '10:13', '10:14', '10:15', '10:16', '10:17', '10:18', '10:19', '10:20', '10:21', '10:22', '10:23', '10:24', '10:26', '10:27', '10:28', '10:29', '10:30', '10:31', '10:32', '10:33', '10:34', '10:35', '10:36', '10:37', '10:38', '10:39', '10:40', '10:41', '10:42', '10:43', '10:44', '10:45', '10:46', '10:47', '10:49', '10:50', '10:51', '10:52', '10:53', '10:54', '10:55', '10:56', '10:57', '10:58', '10:59', '11:00', '11:01', '11:02', '11:03', '11:04', '11:05', '11:06', '11:08', '11:09', '11:10', '11:11', '11:12', '11:13', '11:14', '11:15', '11:16', '11:17', '11:18', '11:19', '11:20', '11:22', '11:23', '11:24', '11:25', '11:26', '11:27', '11:28', '11:29', '11:30', '14:07', '14:08', '14:09', '14:10', '14:11', '14:12', '14:13', '14:14', '14:15', '14:16', '14:17', '14:18', '14:19', '14:20', '14:21', '14:22', '14:23', '14:24', '14:25', '14:26', '14:27', '14:28', '14:29', '14:30', '14:31', '14:32', '14:33', '14:34', '14:36', '14:37', '14:38', '14:39', '14:40', '14:41', '14:42', '14:43', '14:44', '14:45', '14:46', '14:47', '14:48', '14:49', '14:50', '14:51', '14:52', '14:53', '14:54', '14:55', '14:56', '14:57', '14:58', '14:59', '15:00', '15:01', '15:03', '15:04', '15:05', '15:06', '15:07', '15:08', '15:09', '15:10', '15:11', '15:12', '15:13', '15:14', '15:15', '15:16', '15:17', '15:18', '15:19']
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '强度',
      // min: -250,
      // max: 250,  # 不设置y轴最大最小值，就是自动计算，比较灵活
      position: 'right',
      axisLabel: {
        formatter: '{value} 强度'
      }
    },
    {
      type: 'value',
      name: '净额',
      // min: -25,
      // max: 25,
      position: 'left',
      axisLabel: {
        formatter: '{value} 亿'
      }
    }
  ],
  series: [
    {
      name: '强度',
      type: 'bar',
      itemStyle: {
        color: '#2AA9F7',  // 柱子颜色
        // barBorderRadius: 5,
        // borderWidth: 1,
        // borderType: 'solid',
        // borderColor: '#73c0de',
        // shadowColor: '#5470c6',
        // shadowBlur: 3
      },
      yAxisIndex: 0,
      data: [-64, -66, -79, -100, -103, -85, -91, -98, -86, -99, -103, -114, -116, -109, -95, -76, -74, -60, -62, -79, -68, -59, -37, -23, -6, -4, 3, 19, 26, 20, 4, 0, 11, 11, 0, -1, -1, -11, -14, -7, 2, 20, 33, 34, 37, 35, 15, 24, 18, 11, 10, 13, 20, 23, 13, 15, 18, 31, 36, 40, 31, 29, 26, 34, 35, 32, 31, 40, 39, 43, 52, 52, 39, 35, 33, 22, 22, 14, 12, 15, 16, 15, 15, 13, 11, 17, 19, 31, 533, 530, 545, 540, 548, 552, 548, 551, 547, 548, 46, 548, 1053, 1054, 1052, 1057, 1047, 1038, 1036, 1038, 1038, 1038, 1040, 1044, 2017, 2020, 2030, 2043, 2122, 2129, 2042, 2037, 2570, 2574, 2577, 2578, 2576, 2571, 2563, 2563, 2562, 2562, 2562, 2461, 2455, 2449, 2449, 2456, 2456, 2452, 2450, 2445, 2445, 2858, 2833, 2834, 2835, 2836, 2816, 2839, 2842, 2894, 2893, 2892, 2787, 2763, 2760, 2759, 2759, 2760, 2760, 2786, 2790, 2791, 2791, 2791, 2786, 2786, 2786, 2786, 2786, 2786, 2786, 2786, 2786, 2786, 2786, 2786, 2786, 2786, 2786, 2786, 2786, 2786, 2786]
    },
    {
      name: '净额',
      type: 'line',
      lineStyle: {
        normal: {
          color: '#FD0100',
          width: 4,
        }
      },
      smooth: true,
      yAxisIndex: 1,
      data: [0.13, 0.23, 0.24, 0.34, 0.33, 0.28, 0.22, 0.25, 0.21, 0.21, 0.24, 0.21, 0.18, 0.1, 0.07, 0.11, 0.11, 0.12, 0.13, 0.15, 0.12, 0.11, 0.13, 0.1, 0.11, 0.13, 0.22, 0.25, 0.3, 0.34, 0.37, 0.38, 0.32, 0.36, 0.38, 0.4, 0.41, 0.4, 0.35, 0.35, 0.42, 0.44, 0.55, 0.61, 0.6, 0.65, 0.71, 0.69, 0.7, 0.7, 0.71, 0.72, 0.71, 0.71, 0.77, 0.83, 0.88, 0.94, 0.97, 1.03, 1.15, 1.14, 1.15, 1.15, 1.13, 1.12, 1.16, 1.11, 1.13, 1.13, 1.11, 1.16, 1.19, 1.21, 1.22, 1.26, 1.26, 1.28, 1.3, 1.31, 1.31, 1.3, 1.31, 1.31, 1.31, 1.32, 1.3, 1.36, 1.37, 1.32, 1.35, 1.43, 1.47, 1.47, 1.47, 1.5, 1.54, 1.58, 1.59, 1.64, 1.88, 1.96, 1.98, 2.01, 2.05, 2.08, 2.11, 2.15, 2.19, 2.22, 2.25, 2.24, 5.01, 5.02, 4.94, 4.97, 4.98, 5.03, 5.05, 5.08, 5.2, 5.25, 5.31, 5.34, 5.38, 5.39, 5.41, 5.41, 5.43, 5.45, 5.46, 5.47, 5.49, 5.56, 5.59, 5.55, 5.51, 5.47, 5.48, 5.95, 5.96, 5.92, 5.96, 5.94, 5.93, 5.95, 5.97, 5.99, 6.01, 6.0, 6.08, 6.07, 6.02, 6.0, 5.96, 5.91, 5.9, 5.9, 5.9, 5.98, 6.02, 6.02, 6.02, 6.02, 6.06, 6.06, 6.06, 6.06, 6.06, 6.06, 6.06, 6.06, 6.06, 6.06, 6.06, 6.06, 6.06, 6.06, 6.06, 6.06, 6.06, 6.06, 6.06]
        }
    ]
    };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>