master

分支 (2)

管理

管理

master

develop

echart154
/
04-测试代码-生成多个图表.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>薪资想过万，代码敲三遍</title>
    <script src="./lib/echarts.min.js"></script>
    <style>
      .box1,
      .box2,
      .box3 {
        width: 600px;
        height: 300px;
        border: 1px solid pink;
        margin: 0 auto;
        margin-bottom: 20px;
      }
    </style>
  </head>

  <body>
    <!-- 折线图 -->
    <div class="box1"></div>

    <!-- 柱状图 -->
    <div class="box2"></div>

    <!-- 饼图 -->
    <div class="box3"></div>

    <script>
      function line() {
        const myChart = echarts.init(document.querySelector('.box1'))
        // 准备配置项和数据
        const option = {
          title: {
            text: 'Stacked Area Chart',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
            },
          },
          legend: {
            data: [
              'Email',
              'Union Ads',
              'Video Ads',
              'Direct',
              'Search Engine',
            ],
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: 'Email',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: [120, 132, 101, 134, 90, 230, 210],
            },
            {
              name: 'Union Ads',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: [220, 182, 191, 234, 290, 330, 310],
            },
            {
              name: 'Video Ads',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: [150, 232, 201, 154, 190, 330, 410],
            },
            {
              name: 'Direct',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: [320, 332, 301, 334, 390, 330, 320],
            },
            {
              name: 'Search Engine',
              type: 'line',
              stack: 'Total',
              label: {
                show: true,
                position: 'top',
              },
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: [820, 932, 901, 934, 1290, 1330, 1320],
            },
          ],
        }
        // 设置配置项，生成图表
        myChart.setOption(option)
      }
      line()
      function bar() {
        const myChart = echarts.init(document.querySelector('.box2'))
        // 准备配置项和数据
        const option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [
                120,
                {
                  value: 200,
                  itemStyle: {
                    color: '#a90000',
                  },
                },
                150,
                80,
                70,
                110,
                130,
              ],
              type: 'bar',
            },
          ],
        }
        // 设置配置项，生成图表
        myChart.setOption(option)
      }
      bar()
      function pie() {
        const myChart = echarts.init(document.querySelector('.box3'))
        // 准备配置项和数据
        const option = {
          title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        }
        // 设置配置项，生成图表
        myChart.setOption(option)
      }
      pie()
    </script>
  </body>
</html>